UN-GCPDS / qt-material

Material inspired stylesheet for PySide2, PySide6, PyQt5 and PyQt6
https://qt-material.readthedocs.io/en/latest/
BSD 2-Clause "Simplified" License
2.3k stars 242 forks source link

allow a custom/user stylesheet to be passed in optionally #13

Closed chrisbeardy closed 3 years ago

chrisbeardy commented 3 years ago

This PR allows a user to optionally pass in their own CSS styelsheet to use, helpful if they only want to tweak certain elements of the main material.css.template file, (e.g. change the size of pushbuttons, or not having buttons displaying caps for text etc.) But still want to make use of the library and easy ability to switch between themes etc.

app = QApplication(sys.argv)
main_window = MainWindow()
css_template = os.getcwd() + "/ui/custom_material.css"
apply_stylesheet(app, theme='light_blue.xml', invert_secondary=True, template=css_template)
main_window.show()
main_window.raise_()
sys.exit(app.exec_())

It would be awesome if at some point you could have it so that the user only needs to override the bits they want to change and that it then takes the rest from the default stylesheet.

YeisonCardona commented 3 years ago

Hi @chrisbeardy

If people want to use a complete different CSS stylesheet they just don't use qt-material from beginning. There is already Qt way to tweak widgets, by overwriting styles adding it at the end of the current used stylesheet, this can be used to change completely the stylesheet too.

app = QApplication(sys.argv)
main_window = MainWindow()
css_template = os.getcwd() + "/ui/custom_material.css"
apply_stylesheet(app, theme='light_blue.xml', invert_secondary=True)

stylesheet = app.styleSheet()
#app.setStyleSheet(stylesheet + "QPushButton{color: red; text-transform: none;}")
with open(css_template) as file:
    app.setStyleSheet(stylesheet + file.read())

main_window.show()
main_window.raise_()
sys.exit(app.exec_())

This CSS extension can use theme colors too and use all the module features, like runtime theme switcher.

QPushButton {{
  color: {PYSIDEMATERIAL_SECONDARYCOLOR};
  text-transform: none;
  background-color: {PYSIDEMATERIAL_PRIMARYCOLOR};
}}

(I will change the environ variables name soon in favor to new prefix) and then

with open('custom.css') as file:
    app.setStyleSheet(stylesheet + file.read().format(**os.environ))

Since this feature can be implemented by the user with a few simple lines of code this pull request will not be accepted.

chrisbeardy commented 3 years ago

I understand this, especially the part about if you want a different stylesheet then don't use qt-material, however extending the stylesheet doesnt allways have the desired effect without having to go back and reapply individual stylesheets for each desired widget (there also appears on Windows to be a bug where following your example, all the text gets made smaller from what it's set to in my ui file).

For example, I have an application where I want buttons of all different sizes, so the only bit of the stylesheet I would want to change is to remove lines 209-211. However by extending the stylesheet as in the example, the resize has already happened, therefore I need to apply new stylesheet to each pushbutton I do want to be 34px high. Other users may want to teweak something else svery slighty. I am thinking this feature is only really used for users who want to make minor tweaks, For me it seems easier to just be able to let a user amend the default stylesheet slighty to there liking so that the rest of the library remains as easy to use as it currently is without having to add lots of extra stylesheets. As using this library is by far a lot easier to make a good looking UI with switchable theme than doing it yourself everytime.

It already looks as if other users already modify the stylesheet to suit thier preference.

YeisonCardona commented 3 years ago

I don't understand the button example, but you have the unset keyword and the class property, there is no need to overthink the solution.

QPushButton {{
  height: unset;
  max-height: unset;
}}

.big_button {{
  height: 64px;
}}

This new class can be applied from QtDesigner or even from source code:

self.main.pushButton.setProperty('class', 'big_button')
chrisbeardy commented 3 years ago

ok, i did not realise you could use the unset, you learn something new everyday