%global _empty_manifest_terminate_build 0 Name: python-qt-material Version: 2.14 Release: 1 Summary: Material inspired stylesheet for PySide2, PySide6, PyQt5 and PyQt6. License: BSD-2-Clause URL: https://pypi.org/project/qt-material/ Source0: https://mirrors.nju.edu.cn/pypi/web/packages/bd/62/da101036c3cd7a160a15614a1ab5b42547c1c3e689d8f08f42bb0fb76452/qt-material-2.14.tar.gz BuildArch: noarch Requires: python3-Jinja2 %description # Qt-Material This is another stylesheet for **PySide6**, **PySide2**, **PyQt5** and **PyQt6**, which looks like Material Design (close enough). ![GitHub top language](https://img.shields.io/github/languages/top/un-gcpds/qt-material) ![PyPI - License](https://img.shields.io/pypi/l/qt-material) ![PyPI](https://img.shields.io/pypi/v/qt-material) ![PyPI - Status](https://img.shields.io/pypi/status/qt-material) ![PyPI - Python Version](https://img.shields.io/pypi/pyversions/qt-material) ![GitHub last commit](https://img.shields.io/github/last-commit/un-gcpds/qt-material) ![CodeFactor Grade](https://img.shields.io/codefactor/grade/github/UN-GCPDS/qt-material) [![Documentation Status](https://readthedocs.org/projects/qt-material/badge/?version=latest)](https://qt-material.readthedocs.io/en/latest/?badge=latest) There is some custom dark themes: ![dark](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/dark.gif) And light: ![light](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/light.gif) ## Navigation * [Install](#install) * [Usage](#usage) * [Themes](#themes) * [Custom colors](#custom-colors) * [Usage](#usage) * [Light themes](#light-themes) * [Environ variables](#environ-variables) * [Alternative QPushButtons and custom fonts](#alternative-qpushbuttons-and-custom-fonts) * [Custom stylesheets](#custom-stylesheets) * [Run examples](#run-examples) * [New themes](#new-themes) * [Change theme in runtime](#change-theme-in-runtime) * [Export theme](#export-theme) * [Density scale](#density-scale) * [Troubleshoots](#troubleshoots) ## Install ```python pip install qt-material ``` ## Usage ```python import 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_() ``` ## Themes ```python 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'] ## Custom colors [Color Tool](https://material.io/resources/color/) is the best way to generate new themes, just choose colors and export as `Android XML`, the theme file must look like: ```python #00e5ff #6effff #f5f5f5 #ffffff #e6e6e6 #000000 #000000 ``` Save it as `my_theme.xml` or similar and apply the style sheet from Python. ```python apply_stylesheet(app, theme='dark_teal.xml') ``` ## Light themes Light themes will need to add `invert_secondary` argument as `True`. ```python apply_stylesheet(app, theme='light_red.xml', invert_secondary=True) ``` ## Environ variables 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 | ## Alternative QPushButtons and custom fonts There is an `extra` argument for accent colors and custom fonts. ```python 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: ```python pushButton_danger.setProperty('class', 'danger') pushButton_warning.setProperty('class', 'warning') pushButton_success.setProperty('class', 'success') ``` ![extra](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/extra.png) ## Custom stylesheets Custom changes can be performed by overwriting the stylesheets, for example: ```python QPushButton {{ color: {QTMATERIAL_SECONDARYCOLOR}; text-transform: none; background-color: {QTMATERIAL_PRIMARYCOLOR}; }} .big_button {{ height: 64px; }} ``` Then, the current stylesheet can be extended just with: ```python apply_stylesheet(app, theme='light_blue.xml', css_file='custom.css') ``` The stylesheet can also be changed on runtime by: ```python 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: ```python self.main.pushButton.setProperty('class', 'big_button') ``` ![extra](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/custom.png) ## Run examples A window with almost all widgets (see the previous screenshots) are available to test all themes and **create new ones**. ```python git clone https://github.com/UN-GCPDS/qt-material.git cd qt-material python setup.py install cd examples/full_features python main.py --pyside6 ``` ![theme](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/theme.gif) ## New themes Do you have a custom theme? it looks good? create a [pull request](https://github.com/UN-GCPDS/qt-material/pulls) in [themes folder](https://github.com/UN-GCPDS/qt-material/tree/master/qt_material/themes>) and share it with all users. ## Change theme in runtime There is a `qt_material.QtStyleTools` class that must be inherited along to `QMainWindow` for change themes in runtime using the `apply_stylesheet()` method. ```python 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') ``` ![run](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/runtime.gif) ### Integrate stylesheets in a menu A custom _stylesheets menu_ can be added to a project for switching across all default available themes. ```python 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) ``` ![menu](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/runtime_menu.gif) ## Create new themes 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` ```python class RuntimeStylesheets(QMainWindow, QtStyleTools): def __init__(self): super().__init__() self.main = QUiLoader().load('main_window.ui', self) self.show_dock_theme(self.main) ``` ![dock](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/runtime_dock.gif) A full set of examples are available in the [exmaples directory](https://github.com/UN-GCPDS/qt-material/blob/master/examples/runtime/) ## Export theme This feature able to use ```qt-material``` themes into ```Qt``` implementations using only local files. ```python from qt_material import export_theme extra = { # 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 both ```dark_teal.qss``` and ```resources.rcc``` and a folder with all theme icons called ```theme```. The files generated can be integrated into a ```PySide6``` application just with: ```python import sys from PySide6 import QtWidgets from PySide6.QtCore import QDir from __feature__ import snake_case, true_property # Create application app = QtWidgets.QApplication(sys.argv) # Load styles with open('dark_teal.qss', 'r') as file: app.style_sheet = file.read() # Load icons QDir.add_search_path('icon', 'theme') # App window = QtWidgets.QMainWindow() checkbox = QtWidgets.QCheckBox(window) checkbox.text = 'CheckBox' window.show() app.exec() ``` This files can also be used into non ```Python``` environs like ```C++```. ## Density scale The ``extra`` arguments also include an option to set the **density scale**, by default is ```0```. ```python extra = { # Density Scale 'density_scale': '-2', } apply_stylesheet(app, 'default', invert_secondary=False, extra=extra) ``` ![dock](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/density/density.gif) ## Troubleshoots ### QMenu `QMenu` has multiple rendering for each Qt backend, and for each operating system. Even can be related with the style, like [fusion](https://doc.qt.io/qt-5/qtquickcontrols2-fusion.html). Then, the `extra` argument also supports`QMenu` parameters to configure this widgest for specific combinations. This options are not affected by **density scale**. ```python extra['QMenu'] = { 'height': 50, 'padding': '50px 50px 50px 50px', # top, right, bottom, left } ``` %package -n python3-qt-material Summary: Material inspired stylesheet for PySide2, PySide6, PyQt5 and PyQt6. Provides: python-qt-material BuildRequires: python3-devel BuildRequires: python3-setuptools BuildRequires: python3-pip %description -n python3-qt-material # Qt-Material This is another stylesheet for **PySide6**, **PySide2**, **PyQt5** and **PyQt6**, which looks like Material Design (close enough). ![GitHub top language](https://img.shields.io/github/languages/top/un-gcpds/qt-material) ![PyPI - License](https://img.shields.io/pypi/l/qt-material) ![PyPI](https://img.shields.io/pypi/v/qt-material) ![PyPI - Status](https://img.shields.io/pypi/status/qt-material) ![PyPI - Python Version](https://img.shields.io/pypi/pyversions/qt-material) ![GitHub last commit](https://img.shields.io/github/last-commit/un-gcpds/qt-material) ![CodeFactor Grade](https://img.shields.io/codefactor/grade/github/UN-GCPDS/qt-material) [![Documentation Status](https://readthedocs.org/projects/qt-material/badge/?version=latest)](https://qt-material.readthedocs.io/en/latest/?badge=latest) There is some custom dark themes: ![dark](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/dark.gif) And light: ![light](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/light.gif) ## Navigation * [Install](#install) * [Usage](#usage) * [Themes](#themes) * [Custom colors](#custom-colors) * [Usage](#usage) * [Light themes](#light-themes) * [Environ variables](#environ-variables) * [Alternative QPushButtons and custom fonts](#alternative-qpushbuttons-and-custom-fonts) * [Custom stylesheets](#custom-stylesheets) * [Run examples](#run-examples) * [New themes](#new-themes) * [Change theme in runtime](#change-theme-in-runtime) * [Export theme](#export-theme) * [Density scale](#density-scale) * [Troubleshoots](#troubleshoots) ## Install ```python pip install qt-material ``` ## Usage ```python import 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_() ``` ## Themes ```python 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'] ## Custom colors [Color Tool](https://material.io/resources/color/) is the best way to generate new themes, just choose colors and export as `Android XML`, the theme file must look like: ```python #00e5ff #6effff #f5f5f5 #ffffff #e6e6e6 #000000 #000000 ``` Save it as `my_theme.xml` or similar and apply the style sheet from Python. ```python apply_stylesheet(app, theme='dark_teal.xml') ``` ## Light themes Light themes will need to add `invert_secondary` argument as `True`. ```python apply_stylesheet(app, theme='light_red.xml', invert_secondary=True) ``` ## Environ variables 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 | ## Alternative QPushButtons and custom fonts There is an `extra` argument for accent colors and custom fonts. ```python 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: ```python pushButton_danger.setProperty('class', 'danger') pushButton_warning.setProperty('class', 'warning') pushButton_success.setProperty('class', 'success') ``` ![extra](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/extra.png) ## Custom stylesheets Custom changes can be performed by overwriting the stylesheets, for example: ```python QPushButton {{ color: {QTMATERIAL_SECONDARYCOLOR}; text-transform: none; background-color: {QTMATERIAL_PRIMARYCOLOR}; }} .big_button {{ height: 64px; }} ``` Then, the current stylesheet can be extended just with: ```python apply_stylesheet(app, theme='light_blue.xml', css_file='custom.css') ``` The stylesheet can also be changed on runtime by: ```python 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: ```python self.main.pushButton.setProperty('class', 'big_button') ``` ![extra](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/custom.png) ## Run examples A window with almost all widgets (see the previous screenshots) are available to test all themes and **create new ones**. ```python git clone https://github.com/UN-GCPDS/qt-material.git cd qt-material python setup.py install cd examples/full_features python main.py --pyside6 ``` ![theme](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/theme.gif) ## New themes Do you have a custom theme? it looks good? create a [pull request](https://github.com/UN-GCPDS/qt-material/pulls) in [themes folder](https://github.com/UN-GCPDS/qt-material/tree/master/qt_material/themes>) and share it with all users. ## Change theme in runtime There is a `qt_material.QtStyleTools` class that must be inherited along to `QMainWindow` for change themes in runtime using the `apply_stylesheet()` method. ```python 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') ``` ![run](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/runtime.gif) ### Integrate stylesheets in a menu A custom _stylesheets menu_ can be added to a project for switching across all default available themes. ```python 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) ``` ![menu](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/runtime_menu.gif) ## Create new themes 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` ```python class RuntimeStylesheets(QMainWindow, QtStyleTools): def __init__(self): super().__init__() self.main = QUiLoader().load('main_window.ui', self) self.show_dock_theme(self.main) ``` ![dock](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/runtime_dock.gif) A full set of examples are available in the [exmaples directory](https://github.com/UN-GCPDS/qt-material/blob/master/examples/runtime/) ## Export theme This feature able to use ```qt-material``` themes into ```Qt``` implementations using only local files. ```python from qt_material import export_theme extra = { # 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 both ```dark_teal.qss``` and ```resources.rcc``` and a folder with all theme icons called ```theme```. The files generated can be integrated into a ```PySide6``` application just with: ```python import sys from PySide6 import QtWidgets from PySide6.QtCore import QDir from __feature__ import snake_case, true_property # Create application app = QtWidgets.QApplication(sys.argv) # Load styles with open('dark_teal.qss', 'r') as file: app.style_sheet = file.read() # Load icons QDir.add_search_path('icon', 'theme') # App window = QtWidgets.QMainWindow() checkbox = QtWidgets.QCheckBox(window) checkbox.text = 'CheckBox' window.show() app.exec() ``` This files can also be used into non ```Python``` environs like ```C++```. ## Density scale The ``extra`` arguments also include an option to set the **density scale**, by default is ```0```. ```python extra = { # Density Scale 'density_scale': '-2', } apply_stylesheet(app, 'default', invert_secondary=False, extra=extra) ``` ![dock](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/density/density.gif) ## Troubleshoots ### QMenu `QMenu` has multiple rendering for each Qt backend, and for each operating system. Even can be related with the style, like [fusion](https://doc.qt.io/qt-5/qtquickcontrols2-fusion.html). Then, the `extra` argument also supports`QMenu` parameters to configure this widgest for specific combinations. This options are not affected by **density scale**. ```python extra['QMenu'] = { 'height': 50, 'padding': '50px 50px 50px 50px', # top, right, bottom, left } ``` %package help Summary: Development documents and examples for qt-material Provides: python3-qt-material-doc %description help # Qt-Material This is another stylesheet for **PySide6**, **PySide2**, **PyQt5** and **PyQt6**, which looks like Material Design (close enough). ![GitHub top language](https://img.shields.io/github/languages/top/un-gcpds/qt-material) ![PyPI - License](https://img.shields.io/pypi/l/qt-material) ![PyPI](https://img.shields.io/pypi/v/qt-material) ![PyPI - Status](https://img.shields.io/pypi/status/qt-material) ![PyPI - Python Version](https://img.shields.io/pypi/pyversions/qt-material) ![GitHub last commit](https://img.shields.io/github/last-commit/un-gcpds/qt-material) ![CodeFactor Grade](https://img.shields.io/codefactor/grade/github/UN-GCPDS/qt-material) [![Documentation Status](https://readthedocs.org/projects/qt-material/badge/?version=latest)](https://qt-material.readthedocs.io/en/latest/?badge=latest) There is some custom dark themes: ![dark](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/dark.gif) And light: ![light](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/light.gif) ## Navigation * [Install](#install) * [Usage](#usage) * [Themes](#themes) * [Custom colors](#custom-colors) * [Usage](#usage) * [Light themes](#light-themes) * [Environ variables](#environ-variables) * [Alternative QPushButtons and custom fonts](#alternative-qpushbuttons-and-custom-fonts) * [Custom stylesheets](#custom-stylesheets) * [Run examples](#run-examples) * [New themes](#new-themes) * [Change theme in runtime](#change-theme-in-runtime) * [Export theme](#export-theme) * [Density scale](#density-scale) * [Troubleshoots](#troubleshoots) ## Install ```python pip install qt-material ``` ## Usage ```python import 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_() ``` ## Themes ```python 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'] ## Custom colors [Color Tool](https://material.io/resources/color/) is the best way to generate new themes, just choose colors and export as `Android XML`, the theme file must look like: ```python #00e5ff #6effff #f5f5f5 #ffffff #e6e6e6 #000000 #000000 ``` Save it as `my_theme.xml` or similar and apply the style sheet from Python. ```python apply_stylesheet(app, theme='dark_teal.xml') ``` ## Light themes Light themes will need to add `invert_secondary` argument as `True`. ```python apply_stylesheet(app, theme='light_red.xml', invert_secondary=True) ``` ## Environ variables 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 | ## Alternative QPushButtons and custom fonts There is an `extra` argument for accent colors and custom fonts. ```python 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: ```python pushButton_danger.setProperty('class', 'danger') pushButton_warning.setProperty('class', 'warning') pushButton_success.setProperty('class', 'success') ``` ![extra](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/extra.png) ## Custom stylesheets Custom changes can be performed by overwriting the stylesheets, for example: ```python QPushButton {{ color: {QTMATERIAL_SECONDARYCOLOR}; text-transform: none; background-color: {QTMATERIAL_PRIMARYCOLOR}; }} .big_button {{ height: 64px; }} ``` Then, the current stylesheet can be extended just with: ```python apply_stylesheet(app, theme='light_blue.xml', css_file='custom.css') ``` The stylesheet can also be changed on runtime by: ```python 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: ```python self.main.pushButton.setProperty('class', 'big_button') ``` ![extra](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/custom.png) ## Run examples A window with almost all widgets (see the previous screenshots) are available to test all themes and **create new ones**. ```python git clone https://github.com/UN-GCPDS/qt-material.git cd qt-material python setup.py install cd examples/full_features python main.py --pyside6 ``` ![theme](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/theme.gif) ## New themes Do you have a custom theme? it looks good? create a [pull request](https://github.com/UN-GCPDS/qt-material/pulls) in [themes folder](https://github.com/UN-GCPDS/qt-material/tree/master/qt_material/themes>) and share it with all users. ## Change theme in runtime There is a `qt_material.QtStyleTools` class that must be inherited along to `QMainWindow` for change themes in runtime using the `apply_stylesheet()` method. ```python 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') ``` ![run](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/runtime.gif) ### Integrate stylesheets in a menu A custom _stylesheets menu_ can be added to a project for switching across all default available themes. ```python 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) ``` ![menu](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/runtime_menu.gif) ## Create new themes 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` ```python class RuntimeStylesheets(QMainWindow, QtStyleTools): def __init__(self): super().__init__() self.main = QUiLoader().load('main_window.ui', self) self.show_dock_theme(self.main) ``` ![dock](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/runtime_dock.gif) A full set of examples are available in the [exmaples directory](https://github.com/UN-GCPDS/qt-material/blob/master/examples/runtime/) ## Export theme This feature able to use ```qt-material``` themes into ```Qt``` implementations using only local files. ```python from qt_material import export_theme extra = { # 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 both ```dark_teal.qss``` and ```resources.rcc``` and a folder with all theme icons called ```theme```. The files generated can be integrated into a ```PySide6``` application just with: ```python import sys from PySide6 import QtWidgets from PySide6.QtCore import QDir from __feature__ import snake_case, true_property # Create application app = QtWidgets.QApplication(sys.argv) # Load styles with open('dark_teal.qss', 'r') as file: app.style_sheet = file.read() # Load icons QDir.add_search_path('icon', 'theme') # App window = QtWidgets.QMainWindow() checkbox = QtWidgets.QCheckBox(window) checkbox.text = 'CheckBox' window.show() app.exec() ``` This files can also be used into non ```Python``` environs like ```C++```. ## Density scale The ``extra`` arguments also include an option to set the **density scale**, by default is ```0```. ```python extra = { # Density Scale 'density_scale': '-2', } apply_stylesheet(app, 'default', invert_secondary=False, extra=extra) ``` ![dock](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/density/density.gif) ## Troubleshoots ### QMenu `QMenu` has multiple rendering for each Qt backend, and for each operating system. Even can be related with the style, like [fusion](https://doc.qt.io/qt-5/qtquickcontrols2-fusion.html). Then, the `extra` argument also supports`QMenu` parameters to configure this widgest for specific combinations. This options are not affected by **density scale**. ```python extra['QMenu'] = { 'height': 50, 'padding': '50px 50px 50px 50px', # top, right, bottom, left } ``` %prep %autosetup -n qt-material-2.14 %build %py3_build %install %py3_install install -d -m755 %{buildroot}/%{_pkgdocdir} if [ -d doc ]; then cp -arf doc %{buildroot}/%{_pkgdocdir}; fi if [ -d docs ]; then cp -arf docs %{buildroot}/%{_pkgdocdir}; fi if [ -d example ]; then cp -arf example %{buildroot}/%{_pkgdocdir}; fi if [ -d examples ]; then cp -arf examples %{buildroot}/%{_pkgdocdir}; fi pushd %{buildroot} if [ -d usr/lib ]; then find usr/lib -type f -printf "/%h/%f\n" >> filelist.lst fi if [ -d usr/lib64 ]; then find usr/lib64 -type f -printf "/%h/%f\n" >> filelist.lst fi if [ -d usr/bin ]; then find usr/bin -type f -printf "/%h/%f\n" >> filelist.lst fi if [ -d usr/sbin ]; then find usr/sbin -type f -printf "/%h/%f\n" >> filelist.lst fi touch doclist.lst if [ -d usr/share/man ]; then find usr/share/man -type f -printf "/%h/%f.gz\n" >> doclist.lst fi popd mv %{buildroot}/filelist.lst . mv %{buildroot}/doclist.lst . %files -n python3-qt-material -f filelist.lst %dir %{python3_sitelib}/* %files help -f doclist.lst %{_docdir}/* %changelog * Tue May 30 2023 Python_Bot - 2.14-1 - Package Spec generated