UI theme settings

pyproject.toml

@@ -48,9 +48,11 @@ mark-parentheses = false
 extend-ignore-names = ['allKeys',
                        'addItem',
                        'addItems',
+                       'changeEvent',
                        'closeEvent',
                        'columnCount',
                        'createEditor',
+                       'drawComplexControl',
                        'expandingDirections',
                        'eventFilter',
                        'hasHeightForWidth',

rascal2/app.py

@@ -1,12 +1,11 @@
 import logging
 import multiprocessing
-import re
-from contextlib import suppress
 
 from PyQt6 import QtWidgets
 
 from rascal2.config import MatlabHelper, handle_scaling, setup_logging
-from rascal2.paths import IMAGES_PATH, STATIC_PATH
+from rascal2.settings import get_colour_scheme
+from rascal2.theme import THEMES, set_stylesheet
 from rascal2.ui.view import MainWindowView
 
 
@@ -19,25 +18,19 @@ def ui_execute(splash):
         QApplication exit code
     """
     handle_scaling()
-    QtWidgets.QApplication.setStyle("Fusion")
     app = QtWidgets.QApplication.instance()
-    with suppress(FileNotFoundError), open(STATIC_PATH / "style.css") as stylesheet:
-        palette = app.palette()
-        replacements = {
-            "@Path": IMAGES_PATH.as_posix(),
-            "@Window": palette.window().color().name(),
-            "@Highlight": palette.highlight().color().name(),
-            "@Midlight": palette.midlight().color().name(),
-            "@Text": palette.text().color().name(),
-        }
-        style = re.sub("|".join(replacements), lambda x: replacements[x.group(0)], stylesheet.read())
-        app.setStyleSheet(style)
+    app.setStyle("Fusion")
+    app.installEventFilter(THEMES)
+    app.styleHints().setColorScheme(get_colour_scheme())
+    set_stylesheet(app)
 
     window = MainWindowView()
     window.show()
     splash.finish(window)
 
-    return app.exec()
+    exit_code = app.exec()
+    app.removeEventFilter(THEMES)
+    return exit_code
 
 
 def start_app(splash):

rascal2/dialogs/settings_dialog.py

@@ -7,7 +7,7 @@
 
 from rascal2.config import LOGGER, SETTINGS, MatlabHelper
 from rascal2.paths import MATLAB_ARCH_FILE
-from rascal2.settings import SettingsGroups
+from rascal2.settings import SettingsGroups, change_ui_style
 from rascal2.widgets.inputs import get_validated_input
 
 
@@ -69,6 +69,7 @@ def update_settings(self) -> None:
     def reset_default_settings(self) -> None:
         """Reset the settings to the global defaults."""
         SETTINGS.reset_global_settings()
+        change_ui_style()
         self.accept()
 
 
@@ -122,6 +123,10 @@ def modify_setting(self, setting: str):
         """
         setattr(self.settings, setting, self.widgets[setting].get_data())
 
+        match setting:
+            case "style":
+                change_ui_style(self.widgets[setting].get_data())
+
 
 class MatlabSetupTab(QtWidgets.QWidget):
     """Dialog to adjust Matlab location settings."""

rascal2/settings.py

@@ -13,7 +13,7 @@
 from typing import Any, TypeAlias
 
 from pydantic import BaseModel, Field
-from PyQt6 import QtCore
+from PyQt6 import QtCore, QtWidgets
 
 
 # we do this statically rather than making it an attribute of Settings because all fields in a Pydantic model
@@ -52,7 +52,9 @@ class SettingsGroups(StrEnum):
 class Styles(StrEnum):
     """Visual styles for RasCAL-2."""
 
+    System = "system"
     Light = "light"
+    Dark = "dark"
 
 
 class BackgroundColour(StrEnum):
@@ -117,7 +119,7 @@ class Settings(BaseModel, validate_assignment=True, arbitrary_types_allowed=True
 
     # The Settings object's own model fields contain the within-project settings.
     # The global settings are read and written via this object using `set_global_settings`.
-    style: Styles = Field(default=Styles.Light, title=SettingsGroups.General, description="Style")
+    style: Styles = Field(default=Styles.System, title=SettingsGroups.General, description="Style")
     editor_fontsize: int = Field(default=12, title=SettingsGroups.General, description="Editor Font Size", gt=0)
     matlab_as_default_editor: bool = Field(
         default=False,
@@ -159,7 +161,7 @@ def save(self, path: str | PathLike):
     def set_global_settings(self):
         """Set manually-set local settings as global settings."""
         global_settings = get_global_settings()
-        for setting in self.model_fields_set:
+        for setting in self.model_fields:
             global_settings.setValue(global_name(setting), getattr(self, setting))
         global_settings.sync()
 
@@ -225,3 +227,29 @@ def update_recent_projects(path: str | None = None) -> list[str]:
     settings.setValue("recent_projects", new_recent_projects)
     settings.sync()
     return new_recent_projects
+
+
+def get_colour_scheme():
+    """Get the currently selected colour scheme and converts it to relevant Qt colour scheme flag."""
+    colour_scheme = get_global_settings().value("General/style", "system")
+    match colour_scheme:
+        case "system":
+            colour_scheme_default = QtCore.Qt.ColorScheme.Unknown
+        case "light":
+            colour_scheme_default = QtCore.Qt.ColorScheme.Light
+        case "dark":
+            colour_scheme_default = QtCore.Qt.ColorScheme.Dark
+    return colour_scheme_default
+
+
+def change_ui_style(style: Styles = Styles.System) -> None:
+    """Change the style of the app GUI to the given style."""
+    app = QtWidgets.QApplication.instance()
+    match style:
+        case "system":
+            colour_scheme = QtCore.Qt.ColorScheme.Unknown
+        case "light":
+            colour_scheme = QtCore.Qt.ColorScheme.Light
+        case "dark":
+            colour_scheme = QtCore.Qt.ColorScheme.Dark
+    app.styleHints().setColorScheme(colour_scheme)

rascal2/static/style.css

@@ -5,7 +5,7 @@
 }
 
 QDialog{
-    border: 1px solid #ddd;
+    border: 1px solid darkgray;
 }
 
 QToolBar {
@@ -23,11 +23,11 @@ QSpinBox, QDoubleSpinBox, QAbstractSpinBox, QLineEdit, QComboBox {
 
 QStatusBar {
     min-height: 20px;
-    border-top: 1px solid #ddd;
+    border-top: 1px solid @Midlight;
 }
 
 QPushButton {
-    background-color: white;
+    background-color: @Button;
     text-align: center;
     border: 1px solid #828282;
     padding: 5px 12px 5px 12px;
@@ -37,14 +37,16 @@ QPushButton {
     min-height: 14px;
 }
 
+QPushButton:focus,
 QPushButton:hover,
-QPushButton:focus {
-    color: black;
-    border-color: #3874f2;
+QPushButton:pressed {
+    color: @Text;
+    border-color: @Highlight;
 }
 
-QPushButton:hover{
-    background-color: #e0eef9;
+QPushButton:hover,
+QPushButton:pressed {
+    background-color: @Highlight;
 }
 
 QPushButton:disabled,
@@ -54,26 +56,22 @@ QPushButton:disabled:checked {
     border-color: #b6b6b6;
 }
 
-QPushButton:pressed {
-    background-color: #3874f2;
-}
-
 QPushButton:checked {
     background-color: #5e90fa;
     border-color: #3874f2;
 }
 
 QLineEdit {
-    color: black;
-    background-color: white;
-    selection-color: black;
+    color: @Text;
+    background-color: @Base;
+    selection-color: @Text;
     selection-background-color: @Highlight;
-    border: 1px solid #aaa;
+    border: 1px solid darkgray;
     border-radius: 3px;
 }
 
 QLineEdit:read-only {
-    selection-color: black;
+    selection-color: @Text;
     selection-background-color: @Highlight;
     background-color: transparent;
 }
@@ -133,15 +131,15 @@ StartUpWidget QLabel {
 }
 
 StartUpWidget QToolButton#NewProjectButton{
-    image: url(@Path/create-light.png);
+    image: url(@Path/create-dark.png);
 }
 
 StartUpWidget QToolButton#ImportProjectButton{
-    image: url(@Path/browse-light.png);
+    image: url(@Path/browse-dark.png);
 }
 
 StartUpWidget QToolButton#ImportR1Button{
-    image: url(@Path/import-r1-light.png);
+    image: url(@Path/import-r1.png);
 }
 
 /*****************************
@@ -153,15 +151,15 @@ StartupDialog #CancelButton {
 }
 
 StartupDialog #BrowseButton {
-    icon: url(@Path/browse-dark.png);
+    icon: url(@Path/browse-light.png);
 }
 
 StartupDialog #CreateButton {
-    icon: url(@Path/create-dark.png);
+    icon: url(@Path/create-light.png);
 }
 
 StartupDialog #LoadButton {
-    icon: url(@Path/load-dark.png);
+    icon: url(@Path/load-light.png);
 }
 
 StartupDialog > QLabel {
@@ -204,7 +202,7 @@ DisplayWidget #title{
 }
 
 DisplayWidget #desc{
-    color: #555
+    color: @text
 }
 
 /*****************************
@@ -228,17 +226,17 @@ ProjectWidget QPushButton{
 }
 
 #InteractButton {
-    background-color: #dadbde;
+    background-color: @Button;
 }
 
 #InteractButton:hover,
 #InteractButton:focus {
-    color: black;
-    border-color: #3874f2;
+    color: @Text;
+    border-color: darkgray;
 }
 
 #InteractButton:hover{
-    background-color: #e0eef9;
+    background-color: @Button;
 }
 
 #InteractButton:pressed {
@@ -247,20 +245,20 @@ ProjectWidget QPushButton{
 
 #InteractButton:checked {
     background-color: @Highlight;
-    border-color: #3874f2;
+    border-color: darkgray;
 }
 
 /*****************************
      TerminalWidget Styles
 *****************************/
 
 TerminalWidget QPlainTextEdit{
-    background-color: white;
+    background-color: @Base;
 }
 
 TerminalWidget QProgressBar{
     border-radius: 0px;
-    border: 1px solid grey;
+    border: 1px solid @Midlight;
     text-align: center;
 }
 
@@ -269,7 +267,7 @@ TerminalWidget QProgressBar{
 *****************************/
 
 ControlsWidget #FitSettings{
-    background-color: white;
+    background-color: @Base;
 }
 
 ControlsWidget QPushButton {
@@ -331,14 +329,14 @@ QTabWidget:focus {
 }
 
 QTabWidget::pane {
-  border: 1px solid lightgray;
+  border: 1px solid darkgray;
   top:-1px;
-  background: #f5f5f5;;
+  background: @Window;;
 }
 
 QTabBar::tab {
-  background: #e6e6e6;
-  border: 1px solid lightgray;
+  background: @Base;
+  border: 1px solid darkgray;
   padding: 10px;
 }
 
@@ -357,12 +355,12 @@ QTabBar::tab:selected {
 
 QTableView
 {
-  background-color: white;
+  background-color: @Base;
 }
 
 QTableView::disabled
 {
-  background-color: @Window;
+  background-color: @Midlight;
 }
 
 QTableView item
@@ -389,7 +387,7 @@ QTableView QPushButton {
 *****************************/
 
 QMenuBar {
-  background-color: white;
+  background-color: @Window;
 }
 
 QMenuBar:disabled,
@@ -425,7 +423,7 @@ AbstractProjectListWidget QPushButton {
 
 AbstractProjectListWidget QTableView {
     border: 1px solid @Midlight;
-    background-color: white;
+    background-color: @Window;
 }
 
 #CountHeader::section {