This is another stylesheet for PySide6, PySide2 and PyQt5, 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
pip install qt-materialimport sys
from PySide6 import QtWidgets
# from PySide2 import QtWidgets
# from PyQt5 import QtWidgets
from qt_material import apply_stylesheet
# create the application and the main window
app = QtWidgets.QApplication(sys.argv)
window = QtWidgets.QMainWindow()
# setup stylesheet
apply_stylesheet(app, theme='dark_teal.xml')
# run
window.show()
app.exec_()from qt_material import list_themes
list_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 as Android XML, the theme file must look like:
<!--?xml version="1.0" encoding="UTF-8"?-->
<resources>
<color name="primaryColor">#00e5ff</color>
<color name="primaryLightColor">#6effff</color>
<color name="secondaryColor">#f5f5f5</color>
<color name="secondaryLightColor">#ffffff</color>
<color name="secondaryDarkColor">#e6e6e6</color>
<color name="primaryTextColor">#000000</color>
<color name="secondaryTextColor">#000000</color>
</resources>Save it as my_theme.xml or similar and apply the style sheet from Python.
apply_stylesheet(app, theme='dark_teal.xml')Light themes will need to add invert_secondary argument as True.
apply_stylesheet(app, theme='light_red.xml', invert_secondary=True)There is a environ variables related to the current theme used, these variables are for consult 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 an extra 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 to QPushButton with the corresponding class 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')
stylesheet = app.styleSheet()
with open('custom.css') as file:
app.setStyleSheet(stylesheet + file.read().format(**os.environ))And the class style can be applied with the setProperty method:
self.main.pushButton.setProperty('class', 'big_button')
A window with almost all widgets (see the previous screenshots) are available to test all themes and create new ones.
git clone https://github.com/UN-GCPDS/qt-material.git
cd qt-material
python setup.py install
cd test
python main.py --pyside6
Do you have a custom theme? it looks good? create a pull request in themes folder and share it with all users.
There is a qt_material.QtStyleTools class that must be inherited along to QMainWindow for change themes in runtime using the apply_stylesheet() method.
class RuntimeStylesheets(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 custom stylesheets menu can be added to a project for switching across all default available themes.
class RuntimeStylesheets(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 as my_theme.xml
class RuntimeStylesheets(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 the examples directory