- Notifications
You must be signed in to change notification settings - Fork263
Material inspired stylesheet for PySide2, PySide6, PyQt5 and PyQt6
License
UN-GCPDS/qt-material
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This is another stylesheet forPySide6,PySide2,PyQt5 andPyQt6, which looks like Material Design (close enough).
There is some custom dark themes:
And light:
- Install
- Usage
- Themes
- Custom colors
- Usage
- Light themes
- Environ variables
- Alternative QPushButtons and custom fonts
- Custom stylesheets
- Run examples
- New themes
- Change theme in runtime
- Export theme
- Density scale
- Troubleshoots
pipinstallqt-material
importsysfromPySide6importQtWidgets# from PySide2 import QtWidgets# from PyQt5 import QtWidgetsfromqt_materialimportapply_stylesheet# create the application and the main windowapp=QtWidgets.QApplication(sys.argv)window=QtWidgets.QMainWindow()# setup stylesheetapply_stylesheet(app,theme='dark_teal.xml')# runwindow.show()app.exec_()
fromqt_materialimportlist_themeslist_themes()
WARNING:root:qt_material must be imported after PySide or PyQt!['dark_amber.xml', 'dark_blue.xml', 'dark_cyan.xml', 'dark_lightgreen.xml', 'dark_pink.xml', 'dark_purple.xml', 'dark_red.xml', 'dark_teal.xml', 'dark_yellow.xml', 'light_amber.xml', 'light_blue.xml', 'light_cyan.xml', 'light_cyan_500.xml', 'light_lightgreen.xml', 'light_pink.xml', 'light_purple.xml', 'light_red.xml', 'light_teal.xml', 'light_yellow.xml']Color Tool is the best way to generate new themes, just choose colors and export asAndroid XML, the theme file must look like:
<!--?xmlversion="1.0"encoding="UTF-8"?--><resources><colorname="primaryColor">#00e5ff</color><colorname="primaryLightColor">#6effff</color><colorname="secondaryColor">#f5f5f5</color><colorname="secondaryLightColor">#ffffff</color><colorname="secondaryDarkColor">#e6e6e6</color><colorname="primaryTextColor">#000000</color><colorname="secondaryTextColor">#000000</color></resources>
Save it asmy_theme.xml or similar and apply the style sheet from Python.
apply_stylesheet(app,theme='dark_teal.xml')
Light themes will need to addinvert_secondary argument asTrue.
apply_stylesheet(app,theme='light_red.xml',invert_secondary=True)
There is a environ variables related to the current theme used, these variables are forconsult purpose only.
| Environ variable | Description | Example |
|---|---|---|
| QTMATERIAL_PRIMARYCOLOR | Primary color | #2979ff |
| QTMATERIAL_PRIMARYLIGHTCOLOR | A bright version of the primary color | #75a7ff |
| QTMATERIAL_SECONDARYCOLOR | Secondary color | #f5f5f5 |
| QTMATERIAL_SECONDARYLIGHTCOLOR | A bright version of the secondary color | #ffffff |
| QTMATERIAL_SECONDARYDARKCOLOR | A dark version of the primary color | #e6e6e6 |
| QTMATERIAL_PRIMARYTEXTCOLOR | Color for text over primary background | #000000 |
| QTMATERIAL_SECONDARYTEXTCOLOR | Color for text over secondary background | #000000 |
| QTMATERIAL_THEME | Name of theme used | light_blue.xml |
There is anextra argument for accent colors and custom fonts.
extra= {# Button colors'danger':'#dc3545','warning':'#ffc107','success':'#17a2b8',# Font'font_family':'Roboto',}apply_stylesheet(app,'light_cyan.xml',invert_secondary=True,extra=extra)
The accent colors are applied toQPushButton with the correspondingclass property:
pushButton_danger.setProperty('class','danger')pushButton_warning.setProperty('class','warning')pushButton_success.setProperty('class','success')
Custom changes can be performed by overwriting the stylesheets, for example:
QPushButton {{color: {QTMATERIAL_SECONDARYCOLOR};text-transform:none;background-color: {QTMATERIAL_PRIMARYCOLOR};}}.big_button {{height:64px;}}
Then, the current stylesheet can be extended just with:
apply_stylesheet(app,theme='light_blue.xml',css_file='custom.css')
The stylesheet can also be changed on runtime by:
stylesheet=app.styleSheet()withopen('custom.css')asfile:app.setStyleSheet(stylesheet+file.read().format(**os.environ))
And the class style can be applied with thesetProperty method:
self.main.pushButton.setProperty('class','big_button')
A window with almost all widgets (see the previous screenshots) are available to test all themes andcreate new ones.
gitclonehttps://github.com/UN-GCPDS/qt-material.gitcdqt-materialpythonsetup.pyinstallcdexamples/full_featurespythonmain.py--pyside6
Do you have a custom theme? it looks good? create apull request inthemes folder and share it with all users.
There is aqt_material.QtStyleTools class that must be inherited along toQMainWindow for change themes in runtime using theapply_stylesheet() method.
classRuntimeStylesheets(QMainWindow,QtStyleTools):def__init__(self):super().__init__()self.main=QUiLoader().load('main_window.ui',self)self.apply_stylesheet(self.main,'dark_teal.xml')# self.apply_stylesheet(self.main, 'light_red.xml')# self.apply_stylesheet(self.main, 'light_blue.xml')
A customstylesheets menu can be added to a project for switching across all default available themes.
classRuntimeStylesheets(QMainWindow,QtStyleTools):def__init__(self):super().__init__()self.main=QUiLoader().load('main_window.ui',self)self.add_menu_theme(self.main,self.main.menuStyles)
A simple interface is available to modify a theme in runtime, this feature can be used to create a new theme, the theme file is created in the main directory asmy_theme.xml
classRuntimeStylesheets(QMainWindow,QtStyleTools):def__init__(self):super().__init__()self.main=QUiLoader().load('main_window.ui',self)self.show_dock_theme(self.main)
A full set of examples are available in theexmaples directory
This feature able to useqt-material themes intoQt implementations using only local files.
fromqt_materialimportexport_themeextra= {# Button colors'danger':'#dc3545','warning':'#ffc107','success':'#17a2b8',# Font'font_family':'monoespace','font_size':'13px','line_height':'13px',# Density Scale'density_scale':'0',# environ'pyside6':True,'linux':True,}export_theme(theme='dark_teal.xml',qss='dark_teal.qss',rcc='resources.rcc',output='theme',prefix='icon:/',invert_secondary=False,extra=extra, )
This script will generate bothdark_teal.qss andresources.rcc and a folder with all theme icons calledtheme.
The files generated can be integrated into aPySide6 application just with:
importsysfromPySide6importQtWidgetsfromPySide6.QtCoreimportQDirfrom__feature__importsnake_case,true_property# Create applicationapp=QtWidgets.QApplication(sys.argv)# Load styleswithopen('dark_teal.qss','r')asfile:app.style_sheet=file.read()# Load iconsQDir.add_search_path('icon','theme')# Appwindow=QtWidgets.QMainWindow()checkbox=QtWidgets.QCheckBox(window)checkbox.text='CheckBox'window.show()app.exec()
This files can also be used into nonPython environs likeC++.
Theextra arguments also include an option to set thedensity scale, by default is0.
extra= {# Density Scale'density_scale':'-2',}apply_stylesheet(app,'default',invert_secondary=False,extra=extra)
QMenu has multiple rendering for each Qt backend, and for each operating system. Even can be related with the style, likefusion. Then, theextra argument also supportsQMenu parameters to configure this widgest for specific combinations. This options are not affected bydensity scale.
extra['QMenu']= {'height':50,'padding':'50px 50px 50px 50px',# top, right, bottom, left}