**Course Title:** PySide6 Application Development **Section Title:** Styling and Theming Applications **Topic:** Creating a custom-styled app with dark mode and dynamic theming. (Lab topic) ## Introduction In this lab topic, we will cover how to create a custom-styled application with dark mode and dynamic theming using Qt Stylesheets. We will build on the concepts learned in previous topics, including understanding Qt Stylesheets, customizing widget appearance, and implementing dark mode. ## Learning Objectives * Create a custom style for a PySide6 application using Qt Stylesheets * Implement dark mode and dynamic theming * Use selectors, properties, and pseudo-states to customize widget appearance * Understand how to apply stylesheets to applications and individual widgets ## Creating a Custom Style To create a custom style, we will create a new stylesheet file (.qss) and define the styles for our widgets. We will use the Qt Stylesheet syntax, which is similar to CSS. Let's create a simple stylesheet (style.qss) to style our application: ```qss /* style.qss */ /* Global styles */ body { background-color: #f0f0f0; font-family: Arial, sans-serif; } /* Button styles */ QPushButton { background-color: #4CAF50; color: #ffffff; border: 1px solid #3e8e41; padding: 10px 20px; } QPushButton:hover { background-color: #3e8e41; } ``` In this example, we define global styles for the body of our application and custom styles for `QPushButton` widgets. ## Implementing Dark Mode To implement dark mode, we will create a separate stylesheet file (dark.qss) with styles that override the default light theme styles. Let's create a simple dark mode stylesheet (dark.qss): ```qss /* dark.qss */ /* Global styles */ body { background-color: #333333; color: #ffffff; } /* Button styles */ QPushButton { background-color: #555555; color: #ffffff; border: 1px solid #333333; padding: 10px 20px; } QPushButton:hover { background-color: #333333; } ``` In this example, we define styles that override the default light theme styles to create a dark mode. ## Dynamic Theming To implement dynamic theming, we will use a toggle button to switch between light and dark modes. We will use the `setStyleSheet()` method to apply the stylesheets to our application. Let's create a example application with dynamic theming: ```python import sys from PySide6 import QtWidgets, QtCore class DynamicThemingApp(QtWidgets.QApplication): def __init__(self): super().__init__() self.window = QtWidgets.QMainWindow() self.window.setWindowTitle("Dynamic Theming App") self.toggle_button = QtWidgets.QPushButton("Toggle Theme") self.toggle_button.clicked.connect(self.toggle_theme) self.window.setCentralWidget(self.toggle_button) self.light_stylesheet = "style.qss" self.dark_stylesheet = "dark.qss" self.apply_light_theme() def apply_light_theme(self): with open(self.light_stylesheet, "r") as f: self.window.setStyleSheet(f.read()) def apply_dark_theme(self): with open(self.dark_stylesheet, "r") as f: self.window.setStyleSheet(f.read()) def toggle_theme(self): if self.window.styleSheet(): self.apply_light_theme() else: self.apply_dark_theme() if __name__ == "__main__": app = DynamicThemingApp() app.window.show() sys.exit(app.exec()) ``` In this example, we create a toggle button that switches between light and dark modes. ## Conclusion In this lab topic, we covered how to create a custom-styled application with dark mode and dynamic theming using Qt Stylesheets. We learned how to define styles for widgets, implement dark mode, and use selectors, properties, and pseudo-states to customize widget appearance. We also applied stylesheets to applications and individual widgets using the `setStyleSheet()` method. **Practice Exercise** Create a custom-styled application with dark mode and dynamic theming using Qt Stylesheets. Use selectors, properties, and pseudo-states to customize widget appearance. **External Resources** * Qt Stylesheet Reference: <https://doc.qt.io/qt-5/stylesheet-reference.html> * Qt Stylesheet Syntax: <https://doc.qt.io/qt-5/stylesheet-syntax.html> **Comments and Feedback** If you have any questions or need help with this topic, please leave a comment below.