diff --git a/src/gui/src/css/style.css b/src/gui/src/css/style.css
index 4c7d1637e2..c86c2ff462 100644
--- a/src/gui/src/css/style.css
+++ b/src/gui/src/css/style.css
@@ -89,6 +89,8 @@ pre {
     --primary-lightness: 93.33%;
     --primary-alpha: 0.8;
     --primary-color: #373e44;
+    --primary-color-sidebar: #fefeff;
+    --primary-color-sidebar-item: #5a5d61aa;
 
     --window-head-hue: var(--primary-hue);
     --window-head-saturation: var(--primary-saturation);
@@ -101,6 +103,9 @@ pre {
     --window-sidebar-lightness: var(--primary-lightness);
     --window-sidebar-alpha: calc(min(1, 0.11 + var(--primary-alpha)));
     --window-sidebar-color: var(--primary-color);
+    --window-sidebar-active-bg: var(--primary-color-sidebar-item);
+    --window-action-btn-filter: none;
+    
 
     --taskbar-hue: var(--primary-hue);
     --taskbar-saturation: var(--primary-saturation);
@@ -1218,7 +1223,7 @@ span.header-sort-icon img {
     margin: 0;
     font-weight: bold;
     font-size: 13px;
-    color: #8f96a3;
+    color: var(--window-sidebar-color);
     text-shadow: 1px 1px rgb(247 247 247 / 15%);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -1243,7 +1248,7 @@ span.header-sort-icon img {
     margin-top: 2px;
     padding: 4px;
     border-radius: 3px;
-    color: #444444;
+    color: var(--window-sidebar-color);
     font-size: 13px;
     cursor: pointer;
     transition: 0.15s background-color;
@@ -1255,7 +1260,7 @@ span.header-sort-icon img {
 }
 
 .window-sidebar-item-active, .window-sidebar-item-drag-active, .window-sidebar-item-active:hover {
-    background-color: #fefeff;
+    background-color: var(--window-sidebar-active-bg);
 }
 
 .window-sidebar-item-placeholder {
@@ -1398,6 +1403,7 @@ span.header-sort-icon img {
     margin-right: 4px;
     margin-left: 4px;
     opacity: 0.5;
+    filter: var(--window-action-btn-filter);
     -webkit-user-drag: none;
     user-select: none;
     -moz-user-select: none;
@@ -1412,7 +1418,8 @@ span.header-sort-icon img {
 .window-scale-btn>img {
     width: 15px;
     height: 15px;
-    margin-top: 7px
+    margin-top: 7px;
+    filter: var(--window-action-btn-filter);
 }
 
 .window-app-iframe {
diff --git a/src/gui/src/services/ThemeService.js b/src/gui/src/services/ThemeService.js
index b49d41e684..dc946be836 100644
--- a/src/gui/src/services/ThemeService.js
+++ b/src/gui/src/services/ThemeService.js
@@ -87,6 +87,9 @@ export class ThemeService extends Service {
                 ...data.colors,
             };
             this.reload_();
+        } else {
+            // Initialize CSS variables with default values
+            this.reload_();
         }
     }
 
@@ -121,6 +124,8 @@ export class ThemeService extends Service {
         this.root.style.setProperty('--primary-lightness', s.lig + '%');
         this.root.style.setProperty('--primary-alpha', s.alpha);
         this.root.style.setProperty('--primary-color', s.light_text ? 'white' : '#373e44');
+        this.root.style.setProperty('--primary-color-sidebar-item', s.light_text ? '#5a5d61aa' : '#fefeff');
+        this.root.style.setProperty('--window-action-btn-filter', s.light_text ? 'invert(1) brightness(2)' : 'none');
 
         // TODO: Should we debounce this to reduce traffic?
         this.#broadcastService.sendBroadcast('themeChanged', {