diff --git a/src/citron/configuration/configure.ui b/src/citron/configuration/configure.ui
index 406e450e4..6b300940f 100644
--- a/src/citron/configuration/configure.ui
+++ b/src/citron/configuration/configure.ui
@@ -27,42 +27,42 @@
         </property>
         <property name="templateStyleSheet" stdset="0">
             <string>QDialog {
-                background-color: #2b2b2b;
-                color: #ffffff;
+                background-color: %%BACKGROUND_COLOR%%;
+                color: %%TEXT_COLOR%%;
                 }
 
                 QWidget {
-                background-color: #2b2b2b;
-                color: #ffffff;
+                background-color: %%BACKGROUND_COLOR%%;
+                color: %%TEXT_COLOR%%;
                 }
 
                 QStackedWidget {
-                background-color: #2b2b2b;
-                border: 1px solid #3d3d3d;
+                background-color: %%BACKGROUND_COLOR%%;
+                border: 1px solid %%SECONDARY_BG_COLOR%%;
                 border-radius: 8px;
                 margin: 0px;
                 padding: 0px;
                 }
 
                 QScrollArea {
-                background-color: #2b2b2b;
+                background-color: %%BACKGROUND_COLOR%%;
                 border: none;
                 border-radius: 8px;
                 }
 
                 QScrollArea > QWidget > QWidget {
-                background-color: #2b2b2b;
+                background-color: %%BACKGROUND_COLOR%%;
                 }
 
                 QScrollBar:vertical {
-                background-color: #3d3d3d;
+                background-color: %%SECONDARY_BG_COLOR%%;
                 width: 14px;
                 border-radius: 7px;
                 margin: 2px;
                 }
 
                 QScrollBar::handle:vertical {
-                background-color: #5d5d5d;
+                background-color: %%TERTIARY_BG_COLOR%%;
                 border-radius: 6px;
                 min-height: 30px;
                 margin: 1px;
@@ -79,14 +79,14 @@
                 }
 
                 QScrollBar:horizontal {
-                background-color: #3d3d3d;
+                background-color: %%SECONDARY_BG_COLOR%%;
                 height: 14px;
                 border-radius: 7px;
                 margin: 2px;
                 }
 
                 QScrollBar::handle:horizontal {
-                background-color: #5d5d5d;
+                background-color: %%TERTIARY_BG_COLOR%%;
                 border-radius: 6px;
                 min-width: 30px;
                 margin: 1px;
@@ -103,8 +103,8 @@
                 }
 
                 QPushButton.tabButton {
-                background-color: #383838;
-                color: #ffffff;
+                background-color: %%BUTTON_BG_COLOR%%;
+                color: %%TEXT_COLOR%%;
                 padding: 10px 14px;
                 margin: 2px;
                 border-top-left-radius: 8px;
@@ -114,7 +114,7 @@
                 min-width: 85px;
                 max-width: 160px;
                 font-weight: 500;
-                border: 1px solid #3d3d3d;
+                border: 1px solid %%SECONDARY_BG_COLOR%%;
                 text-align: center;
                 }
 
@@ -126,8 +126,8 @@
                 }
 
                 QPushButton.tabButton:hover:!checked {
-                background-color: #4d4d4d;
-                border-color: #5d5d5d;
+                background-color: %%HOVER_BG_COLOR%%;
+                border-color: %%TERTIARY_BG_COLOR%%;
                 }
 
                 QPushButton.tabButton:pressed {
@@ -135,13 +135,13 @@
                 }
 
                 QTabWidget {
-                background-color: #2b2b2b;
+                background-color: %%BACKGROUND_COLOR%%;
                 border: none;
                 }
 
                 QTabWidget::pane {
-                border: 1px solid #3d3d3d;
-                background-color: #2b2b2b;
+                border: 1px solid %%SECONDARY_BG_COLOR%%;
+                background-color: %%BACKGROUND_COLOR%%;
                 border-radius: 8px;
                 margin: 0px;
                 padding: 0px;
@@ -152,13 +152,13 @@
                 }
 
                 QTabBar {
-                background-color: #2b2b2b;
+                background-color: %%BACKGROUND_COLOR%%;
                 border: none;
                 }
 
                 QTabBar::tab {
-                background-color: #383838;
-                color: #ffffff;
+                background-color: %%BUTTON_BG_COLOR%%;
+                color: %%TEXT_COLOR%%;
                 padding: 12px 20px;
                 margin-right: 2px;
                 margin-bottom: 2px;
@@ -166,7 +166,7 @@
                 border-top-right-radius: 8px;
                 min-width: 100px;
                 font-weight: 500;
-                border: 1px solid #3d3d3d;
+                border: 1px solid %%SECONDARY_BG_COLOR%%;
                 border-bottom: none;
                 }
 
@@ -178,20 +178,20 @@
                 }
 
                 QTabBar::tab:hover:!selected {
-                background-color: #4d4d4d;
-                border-color: #5d5d5d;
+                background-color: %%HOVER_BG_COLOR%%;
+                border-color: %%TERTIARY_BG_COLOR%%;
                 }
 
                 QTabBar QToolButton {
-                background-color: #383838;
-                border: 1px solid #3d3d3d;
+                background-color: %%BUTTON_BG_COLOR%%;
+                border: 1px solid %%SECONDARY_BG_COLOR%%;
                 border-radius: 4px;
                 padding: 4px;
                 margin: 2px;
                 }
 
                 QTabBar QToolButton:hover {
-                background-color: #4d4d4d;
+                background-color: %%HOVER_BG_COLOR%%;
                 border-color: %%ACCENT_COLOR%%;
                 }
 
@@ -201,24 +201,24 @@
 
                 QGroupBox {
                 font-weight: bold;
-                border: 1px solid #3d3d3d;
+                border: 1px solid %%SECONDARY_BG_COLOR%%;
                 border-radius: 8px;
                 margin-top: 12px;
                 padding-top: 12px;
-                background-color: #2b2b2b;
-                color: #ffffff;
+                background-color: %%BACKGROUND_COLOR%%;
+                color: %%TEXT_COLOR%%;
                 }
 
                 QGroupBox::title {
                 subcontrol-origin: margin;
                 left: 12px;
                 padding: 0 8px 0 8px;
-                color: #ffffff;
+                color: %%TEXT_COLOR%%;
                 font-weight: bold;
                 }
 
                 QCheckBox {
-                color: #ffffff;
+                color: %%TEXT_COLOR%%;
                 spacing: 10px;
                 padding: 4px;
                 background-color: transparent;
@@ -227,9 +227,9 @@
                 QCheckBox::indicator {
                 width: 18px;
                 height: 18px;
-                border: 2px solid #5d5d5d;
+                border: 2px solid %%TERTIARY_BG_COLOR%%;
                 border-radius: 4px;
-                background-color: #3d3d3d;
+                background-color: %%SECONDARY_BG_COLOR%%;
                 }
 
                 QCheckBox::indicator:checked {
@@ -242,11 +242,11 @@
                 }
 
                 QComboBox {
-                background-color: #3d3d3d;
-                border: 1px solid #5d5d5d;
+                background-color: %%SECONDARY_BG_COLOR%%;
+                border: 1px solid %%TERTIARY_BG_COLOR%%;
                 border-radius: 6px;
                 padding: 8px 12px;
-                color: #ffffff;
+                color: %%TEXT_COLOR%%;
                 min-width: 120px;
                 min-height: 28px;
                 selection-background-color: %%ACCENT_COLOR%%;
@@ -254,12 +254,12 @@
 
                 QComboBox:hover {
                 border-color: %%ACCENT_COLOR%%;
-                background-color: #404040;
+                background-color: %%HOVER_BG_COLOR%%;
                 }
 
                 QComboBox:focus {
                 border-color: %%ACCENT_COLOR%%;
-                background-color: #404040;
+                background-color: %%FOCUS_BG_COLOR%%;
                 }
 
                 QComboBox::drop-down {
@@ -272,10 +272,10 @@
 
 
                 QComboBox QAbstractItemView {
-                background-color: #3d3d3d;
+                background-color: %%SECONDARY_BG_COLOR%%;
                 border: 1px solid %%ACCENT_COLOR%%;
                 selection-background-color: %%ACCENT_COLOR%%;
-                color: #ffffff;
+                color: %%TEXT_COLOR%%;
                 outline: none;
                 }
 
@@ -296,18 +296,18 @@
                 }
 
                 QLineEdit {
-                background-color: #3d3d3d;
-                border: 1px solid #5d5d5d;
+                background-color: %%SECONDARY_BG_COLOR%%;
+                border: 1px solid %%TERTIARY_BG_COLOR%%;
                 border-radius: 6px;
                 padding: 8px 12px;
-                color: #ffffff;
+                color: %%TEXT_COLOR%%;
                 min-height: 20px;
                 selection-background-color: %%ACCENT_COLOR%%;
                 }
 
                 QLineEdit:focus {
                 border-color: %%ACCENT_COLOR%%;
-                background-color: #404040;
+                background-color: %%FOCUS_BG_COLOR%%;
                 }
 
                 QPushButton {
@@ -329,8 +329,8 @@
                 }
 
                 QPushButton:disabled {
-                background-color: #5d5d5d;
-                color: #8d8d8d;
+                background-color: %%TERTIARY_BG_COLOR%%;
+                color: %%DISABLED_TEXT_COLOR%%;
                 }
 
                 QToolButton {
@@ -353,16 +353,16 @@
                 }
 
                 QLabel {
-                color: #ffffff;
+                color: %%TEXT_COLOR%%;
                 background-color: transparent;
                 padding: 2px;
                 }
 
                 QListWidget {
-                background-color: #3d3d3d;
-                border: 1px solid #5d5d5d;
+                background-color: %%SECONDARY_BG_COLOR%%;
+                border: 1px solid %%TERTIARY_BG_COLOR%%;
                 border-radius: 6px;
-                color: #ffffff;
+                color: %%TEXT_COLOR%%;
                 padding: 4px;
                 }
 
@@ -378,13 +378,13 @@
                 }
 
                 QListWidget::item:hover:!selected {
-                background-color: #4d4d4d;
+                background-color: %%HOVER_BG_COLOR%%;
                 }
 
                 QSlider::groove:horizontal {
-                border: 1px solid #5d5d5d;
+                border: 1px solid %%TERTIARY_BG_COLOR%%;
                 height: 8px;
-                background-color: #3d3d3d;
+                background-color: %%SECONDARY_BG_COLOR%%;
                 border-radius: 4px;
                 }
 
@@ -401,21 +401,21 @@
                 }
 
                 QSpinBox, QDoubleSpinBox {
-                background-color: #3d3d3d;
-                border: 1px solid #5d5d5d;
+                background-color: %%SECONDARY_BG_COLOR%%;
+                border: 1px solid %%TERTIARY_BG_COLOR%%;
                 border-radius: 6px;
                 padding: 6px;
-                color: #ffffff;
+                color: %%TEXT_COLOR%%;
                 min-height: 20px;
                 }
 
                 QSpinBox:focus, QDoubleSpinBox:focus {
                 border-color: %%ACCENT_COLOR%%;
-                background-color: #404040;
+                background-color: %%FOCUS_BG_COLOR%%;
                 }
 
                 QRadioButton {
-                color: #ffffff;
+                color: %%TEXT_COLOR%%;
                 spacing: 8px;
                 padding: 4px;
                 }
@@ -423,9 +423,9 @@
                 QRadioButton::indicator {
                 width: 16px;
                 height: 16px;
-                border: 2px solid #5d5d5d;
+                border: 2px solid %%TERTIARY_BG_COLOR%%;
                 border-radius: 8px;
-                background-color: #3d3d3d;
+                background-color: %%SECONDARY_BG_COLOR%%;
                 }
 
                 QRadioButton::indicator:checked {
diff --git a/src/citron/configuration/configure_dialog.cpp b/src/citron/configuration/configure_dialog.cpp
index 2f6e038ba..65e812f75 100644
--- a/src/citron/configuration/configure_dialog.cpp
+++ b/src/citron/configuration/configure_dialog.cpp
@@ -49,6 +49,15 @@ static QScrollArea* CreateScrollArea(QWidget* widget) {
     return scroll_area;
 }
 
+// Helper function to detect if the application is using a dark theme
+static bool IsDarkMode() {
+    const QPalette palette = qApp->palette();
+    const QColor text_color = palette.color(QPalette::WindowText);
+    const QColor base_color = palette.color(QPalette::Window);
+    // A common heuristic for dark mode is that the text color is brighter than the background
+    return text_color.value() > base_color.value();
+}
+
 ConfigureDialog::ConfigureDialog(QWidget* parent, HotkeyRegistry& registry_,
                                  InputCommon::InputSubsystem* input_subsystem,
                                  std::vector<VkDeviceInfo::Record>& vk_device_records,
@@ -174,18 +183,14 @@ ConfigureDialog::~ConfigureDialog() {
 void ConfigureDialog::UpdateTheme() {
     QString accent_color_str;
     if (UISettings::values.enable_rainbow_mode.GetValue()) {
-        rainbow_hue += 0.003f; // Even slower transition for better performance
+        rainbow_hue += 0.003f;
         if (rainbow_hue > 1.0f) {
             rainbow_hue = 0.0f;
         }
-
-        // Cache the color to avoid repeated operations
         QColor accent_color = QColor::fromHsvF(rainbow_hue, 0.8f, 1.0f);
         accent_color_str = accent_color.name(QColor::HexRgb);
-
         if (!rainbow_timer->isActive()) {
-            // Optimized timer interval for better performance
-            rainbow_timer->start(150); // Increased from 100ms to 150ms
+            rainbow_timer->start(150);
         }
     } else {
         if (rainbow_timer->isActive()) {
@@ -194,24 +199,45 @@ void ConfigureDialog::UpdateTheme() {
         accent_color_str = Theme::GetAccentColor();
     }
 
-    // Cache color operations to avoid repeated calculations
     QColor accent_color(accent_color_str);
     const QString accent_color_hover = accent_color.lighter(115).name(QColor::HexRgb);
     const QString accent_color_pressed = accent_color.darker(120).name(QColor::HexRgb);
 
-    // Get template stylesheet once and cache it
+    const bool is_dark = IsDarkMode();
+    const QString bg_color = is_dark ? QStringLiteral("#2b2b2b") : QStringLiteral("#ffffff");
+    const QString text_color = is_dark ? QStringLiteral("#ffffff") : QStringLiteral("#000000");
+    const QString secondary_bg_color = is_dark ? QStringLiteral("#3d3d3d") : QStringLiteral("#f0f0f0");
+    const QString tertiary_bg_color = is_dark ? QStringLiteral("#5d5d5d") : QStringLiteral("#d3d3d3");
+    const QString button_bg_color = is_dark ? QStringLiteral("#383838") : QStringLiteral("#e1e1e1");
+    const QString hover_bg_color = is_dark ? QStringLiteral("#4d4d4d") : QStringLiteral("#e8f0fe");
+    const QString focus_bg_color = is_dark ? QStringLiteral("#404040") : QStringLiteral("#e8f0fe");
+    const QString disabled_text_color = is_dark ? QStringLiteral("#8d8d8d") : QStringLiteral("#a0a0a0");
+
     static QString cached_template_style_sheet;
     if (cached_template_style_sheet.isEmpty()) {
         cached_template_style_sheet = property("templateStyleSheet").toString();
     }
 
     QString style_sheet = cached_template_style_sheet;
+
+    // Replace accent colors (existing logic)
     style_sheet.replace(QStringLiteral("%%ACCENT_COLOR%%"), accent_color_str);
     style_sheet.replace(QStringLiteral("%%ACCENT_COLOR_HOVER%%"), accent_color_hover);
     style_sheet.replace(QStringLiteral("%%ACCENT_COLOR_PRESSED%%"), accent_color_pressed);
+
+    // Replace base theme colors (new logic)
+    style_sheet.replace(QStringLiteral("%%BACKGROUND_COLOR%%"), bg_color);
+    style_sheet.replace(QStringLiteral("%%TEXT_COLOR%%"), text_color);
+    style_sheet.replace(QStringLiteral("%%SECONDARY_BG_COLOR%%"), secondary_bg_color);
+    style_sheet.replace(QStringLiteral("%%TERTIARY_BG_COLOR%%"), tertiary_bg_color);
+    style_sheet.replace(QStringLiteral("%%BUTTON_BG_COLOR%%"), button_bg_color);
+    style_sheet.replace(QStringLiteral("%%HOVER_BG_COLOR%%"), hover_bg_color);
+    style_sheet.replace(QStringLiteral("%%FOCUS_BG_COLOR%%"), focus_bg_color);
+    style_sheet.replace(QStringLiteral("%%DISABLED_TEXT_COLOR%%"), disabled_text_color);
+
     setStyleSheet(style_sheet);
 
-    // Pass the processed stylesheet to all child tabs that need it.
+    // This part is crucial to pass the theme to child tabs
     graphics_tab->SetTemplateStyleSheet(style_sheet);
     system_tab->SetTemplateStyleSheet(style_sheet);
     audio_tab->SetTemplateStyleSheet(style_sheet);
diff --git a/src/citron/configuration/configure_per_game.cpp b/src/citron/configuration/configure_per_game.cpp
index dc732c8b3..1647cec03 100644
--- a/src/citron/configuration/configure_per_game.cpp
+++ b/src/citron/configuration/configure_per_game.cpp
@@ -64,6 +64,15 @@
 #include "common/string_util.h"
 #include "common/xci_trimmer.h"
 
+// Helper function to detect if the application is using a dark theme
+static bool IsDarkMode() {
+    const QPalette palette = qApp->palette();
+    const QColor text_color = palette.color(QPalette::WindowText);
+    const QColor base_color = palette.color(QPalette::Window);
+    // A common heuristic for dark mode is that the text color is brighter than the background
+    return text_color.value() > base_color.value();
+}
+
 ConfigurePerGame::ConfigurePerGame(QWidget* parent, u64 title_id_, const std::string& file_name_,
                                    std::vector<VkDeviceInfo::Record>& vk_device_records,
                                    Core::System& system_)
@@ -228,18 +237,41 @@ void ConfigurePerGame::UpdateTheme() {
     const QString accent_color_hover = accent_color.lighter(115).name(QColor::HexRgb);
     const QString accent_color_pressed = accent_color.darker(120).name(QColor::HexRgb);
 
+    const bool is_dark = IsDarkMode();
+    const QString bg_color = is_dark ? QStringLiteral("#2b2b2b") : QStringLiteral("#ffffff");
+    const QString text_color = is_dark ? QStringLiteral("#ffffff") : QStringLiteral("#000000");
+    const QString secondary_bg_color = is_dark ? QStringLiteral("#3d3d3d") : QStringLiteral("#f0f0f0");
+    const QString tertiary_bg_color = is_dark ? QStringLiteral("#5d5d5d") : QStringLiteral("#d3d3d3");
+    const QString button_bg_color = is_dark ? QStringLiteral("#383838") : QStringLiteral("#e1e1e1");
+    const QString hover_bg_color = is_dark ? QStringLiteral("#4d4d4d") : QStringLiteral("#e8f0fe");
+    const QString focus_bg_color = is_dark ? QStringLiteral("#404040") : QStringLiteral("#e8f0fe");
+    const QString disabled_text_color = is_dark ? QStringLiteral("#8d8d8d") : QStringLiteral("#a0a0a0");
+
     static QString cached_template_style_sheet;
     if (cached_template_style_sheet.isEmpty()) {
         cached_template_style_sheet = property("templateStyleSheet").toString();
     }
 
     QString style_sheet = cached_template_style_sheet;
+
+    // Replace accent colors (existing logic)
     style_sheet.replace(QStringLiteral("%%ACCENT_COLOR%%"), accent_color_str);
     style_sheet.replace(QStringLiteral("%%ACCENT_COLOR_HOVER%%"), accent_color_hover);
     style_sheet.replace(QStringLiteral("%%ACCENT_COLOR_PRESSED%%"), accent_color_pressed);
+
+    // Replace base theme colors (new logic)
+    style_sheet.replace(QStringLiteral("%%BACKGROUND_COLOR%%"), bg_color);
+    style_sheet.replace(QStringLiteral("%%TEXT_COLOR%%"), text_color);
+    style_sheet.replace(QStringLiteral("%%SECONDARY_BG_COLOR%%"), secondary_bg_color);
+    style_sheet.replace(QStringLiteral("%%TERTIARY_BG_COLOR%%"), tertiary_bg_color);
+    style_sheet.replace(QStringLiteral("%%BUTTON_BG_COLOR%%"), button_bg_color);
+    style_sheet.replace(QStringLiteral("%%HOVER_BG_COLOR%%"), hover_bg_color);
+    style_sheet.replace(QStringLiteral("%%FOCUS_BG_COLOR%%"), focus_bg_color);
+    style_sheet.replace(QStringLiteral("%%DISABLED_TEXT_COLOR%%"), disabled_text_color);
+
     setStyleSheet(style_sheet);
 
-    // This is the crucial part that passes the theme to the child tabs
+    // This part is crucial to pass the theme to child tabs
     graphics_tab->SetTemplateStyleSheet(style_sheet);
     system_tab->SetTemplateStyleSheet(style_sheet);
     audio_tab->SetTemplateStyleSheet(style_sheet);
diff --git a/src/citron/configuration/configure_per_game.ui b/src/citron/configuration/configure_per_game.ui
index 73501c5d7..af1acd59a 100644
--- a/src/citron/configuration/configure_per_game.ui
+++ b/src/citron/configuration/configure_per_game.ui
@@ -21,42 +21,42 @@
   </property>
   <property name="templateStyleSheet" stdset="0">
    <string>QDialog {
-    background-color: #2b2b2b;
-    color: #ffffff;
+    background-color: %%BACKGROUND_COLOR%%;
+    color: %%TEXT_COLOR%%;
     }
 
     QWidget {
-    background-color: #2b2b2b;
-    color: #ffffff;
+    background-color: %%BACKGROUND_COLOR%%;
+    color: %%TEXT_COLOR%%;
     }
 
     QStackedWidget {
-    background-color: #2b2b2b;
-    border: 1px solid #3d3d3d;
+    background-color: %%BACKGROUND_COLOR%%;
+    border: 1px solid %%SECONDARY_BG_COLOR%%;
     border-radius: 8px;
     margin: 0px;
     padding: 0px;
     }
 
     QScrollArea {
-    background-color: #2b2b2b;
+    background-color: %%BACKGROUND_COLOR%%;
     border: none;
     border-radius: 8px;
     }
 
     QScrollArea > QWidget > QWidget {
-    background-color: #2b2b2b;
+    background-color: %%BACKGROUND_COLOR%%;
     }
 
     QScrollBar:vertical {
-    background-color: #3d3d3d;
+    background-color: %%SECONDARY_BG_COLOR%%;
     width: 14px;
     border-radius: 7px;
     margin: 2px;
     }
 
     QScrollBar::handle:vertical {
-    background-color: #5d5d5d;
+    background-color: %%TERTIARY_BG_COLOR%%;
     border-radius: 6px;
     min-height: 30px;
     margin: 1px;
@@ -73,14 +73,14 @@
     }
 
     QScrollBar:horizontal {
-    background-color: #3d3d3d;
+    background-color: %%SECONDARY_BG_COLOR%%;
     height: 14px;
     border-radius: 7px;
     margin: 2px;
     }
 
     QScrollBar::handle:horizontal {
-    background-color: #5d5d5d;
+    background-color: %%TERTIARY_BG_COLOR%%;
     border-radius: 6px;
     min-width: 30px;
     margin: 1px;
@@ -97,8 +97,8 @@
     }
 
     QPushButton#tabButton {
-        background-color: #383838;
-        color: #ffffff;
+        background-color: %%BUTTON_BG_COLOR%%;
+        color: %%TEXT_COLOR%%;
         padding: 8px 18px;
         margin-right: 2px;
         border-top-left-radius: 8px;
@@ -107,7 +107,7 @@
         min-width: 100px;
         font-weight: bold;
         font-size: 10pt;
-        border: 1px solid #3d3d3d;
+        border: 1px solid %%SECONDARY_BG_COLOR%%;
     }
 
     QPushButton#tabButton:checked {
@@ -118,8 +118,8 @@
     }
 
     QPushButton#tabButton:hover:!checked {
-        background-color: #4d4d4d;
-        border-color: #5d5d5d;
+        background-color: %%HOVER_BG_COLOR%%;
+        border-color: %%TERTIARY_BG_COLOR%%;
     }
 
     QPushButton#tabButton:pressed {
@@ -128,24 +128,24 @@
 
     QGroupBox {
     font-weight: bold;
-    border: 1px solid #3d3d3d;
+    border: 1px solid %%SECONDARY_BG_COLOR%%;
     border-radius: 8px;
     margin-top: 12px;
     padding-top: 12px;
-    background-color: #2b2b2b;
-    color: #ffffff;
+    background-color: %%BACKGROUND_COLOR%%;
+    color: %%TEXT_COLOR%%;
     }
 
     QGroupBox::title {
     subcontrol-origin: margin;
     left: 12px;
     padding: 0 8px 0 8px;
-    color: #ffffff;
+    color: %%TEXT_COLOR%%;
     font-weight: bold;
     }
 
     QCheckBox {
-    color: #ffffff;
+    color: %%TEXT_COLOR%%;
     spacing: 10px;
     padding: 4px;
     background-color: transparent;
@@ -154,9 +154,9 @@
     QCheckBox::indicator {
     width: 18px;
     height: 18px;
-    border: 2px solid #5d5d5d;
+    border: 2px solid %%TERTIARY_BG_COLOR%%;
     border-radius: 4px;
-    background-color: #3d3d3d;
+    background-color: %%SECONDARY_BG_COLOR%%;
     }
 
     QCheckBox::indicator:checked {
@@ -169,11 +169,11 @@
     }
 
     QComboBox {
-    background-color: #3d3d3d;
-    border: 1px solid #5d5d5d;
+    background-color: %%SECONDARY_BG_COLOR%%;
+    border: 1px solid %%TERTIARY_BG_COLOR%%;
     border-radius: 6px;
     padding: 8px 12px;
-    color: #ffffff;
+    color: %%TEXT_COLOR%%;
     min-width: 120px;
     min-height: 28px;
     selection-background-color: %%ACCENT_COLOR%%;
@@ -181,12 +181,12 @@
 
     QComboBox:hover {
     border-color: %%ACCENT_COLOR%%;
-    background-color: #404040;
+    background-color: %%HOVER_BG_COLOR%%;
     }
 
     QComboBox:focus {
     border-color: %%ACCENT_COLOR%%;
-    background-color: #404040;
+    background-color: %%FOCUS_BG_COLOR%%;
     }
 
     QComboBox::drop-down {
@@ -198,10 +198,10 @@
     }
 
     QComboBox QAbstractItemView {
-    background-color: #3d3d3d;
+    background-color: %%SECONDARY_BG_COLOR%%;
     border: 1px solid %%ACCENT_COLOR%%;
     selection-background-color: %%ACCENT_COLOR%%;
-    color: #ffffff;
+    color: %%TEXT_COLOR%%;
     outline: none;
     }
 
@@ -222,18 +222,18 @@
     }
 
     QLineEdit {
-    background-color: #3d3d3d;
-    border: 1px solid #5d5d5d;
+    background-color: %%SECONDARY_BG_COLOR%%;
+    border: 1px solid %%TERTIARY_BG_COLOR%%;
     border-radius: 6px;
     padding: 8px 12px;
-    color: #ffffff;
+    color: %%TEXT_COLOR%%;
     min-height: 20px;
     selection-background-color: %%ACCENT_COLOR%%;
     }
 
     QLineEdit:focus {
     border-color: %%ACCENT_COLOR%%;
-    background-color: #404040;
+    background-color: %%FOCUS_BG_COLOR%%;
     }
 
     QPushButton {
@@ -255,8 +255,8 @@
     }
 
     QPushButton:disabled {
-    background-color: #5d5d5d;
-    color: #8d8d8d;
+    background-color: %%TERTIARY_BG_COLOR%%;
+    color: %%DISABLED_TEXT_COLOR%%;
     }
 
     QToolButton {
@@ -279,16 +279,16 @@
     }
 
     QLabel {
-    color: #ffffff;
+    color: %%TEXT_COLOR%%;
     background-color: transparent;
     padding: 2px;
     }
 
     QListWidget {
-    background-color: #3d3d3d;
-    border: 1px solid #5d5d5d;
+    background-color: %%SECONDARY_BG_COLOR%%;
+    border: 1px solid %%TERTIARY_BG_COLOR%%;
     border-radius: 6px;
-    color: #ffffff;
+    color: %%TEXT_COLOR%%;
     padding: 4px;
     }
 
@@ -304,14 +304,14 @@
     }
 
     QListWidget::item:hover:!selected {
-    background-color: #4d4d4d;
+    background-color: %%HOVER_BG_COLOR%%;
     }
 
     QSlider::groove:horizontal {
         height: 8px;
-        background: #3d3d3d;
+        background: %%SECONDARY_BG_COLOR%%;
         border-radius: 4px;
-        border: 1px solid #5d5d5d;
+        border: 1px solid %%TERTIARY_BG_COLOR%%;
     }
 
     QSlider::sub-page:horizontal {
@@ -320,7 +320,7 @@
     }
 
     QSlider::add-page:horizontal {
-        background: #3d3d3d;
+        background: %%SECONDARY_BG_COLOR%%;
         border-radius: 4px;
     }
 
@@ -337,21 +337,21 @@
     }
 
     QSpinBox, QDoubleSpinBox {
-    background-color: #3d3d3d;
-    border: 1px solid #5d5d5d;
+    background-color: %%SECONDARY_BG_COLOR%%;
+    border: 1px solid %%TERTIARY_BG_COLOR%%;
     border-radius: 6px;
     padding: 6px;
-    color: #ffffff;
+    color: %%TEXT_COLOR%%;
     min-height: 20px;
     }
 
     QSpinBox:focus, QDoubleSpinBox:focus {
     border-color: %%ACCENT_COLOR%%;
-    background-color: #404040;
+    background-color: %%FOCUS_BG_COLOR%%;
     }
 
     QRadioButton {
-    color: #ffffff;
+    color: %%TEXT_COLOR%%;
     spacing: 8px;
     padding: 4px;
     }
@@ -359,9 +359,9 @@
     QRadioButton::indicator {
     width: 16px;
     height: 16px;
-    border: 2px solid #5d5d5d;
+    border: 2px solid %%TERTIARY_BG_COLOR%%;
     border-radius: 8px;
-    background-color: #3d3d3d;
+    background-color: %%SECONDARY_BG_COLOR%%;
     }
 
     QRadioButton::indicator:checked {