From 33c304879a5fe4db6f0be10fce87629d40db31b1 Mon Sep 17 00:00:00 2001
From: Andy Cordero <86756607+acordero4852@users.noreply.github.com>
Date: Sun, 9 Mar 2025 13:30:16 -0700
Subject: [PATCH] fix(gui): color of the UI on dark mode (e.g. windows control,
 active sidebar) (#1161)

* update theme service to improve color handling and SVG icon styling

* enhance sidebar item colors for better visibility

* Fix the whitespace
---
 src/gui/src/css/style.css            | 9 ++++++---
 src/gui/src/services/ThemeService.js | 2 ++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/gui/src/css/style.css b/src/gui/src/css/style.css
index 86b177305..67a3c02ac 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-icon: invert(0);
+    --primary-color-sidebar-item: #fefeff;
 
     --window-head-hue: var(--primary-hue);
     --window-head-saturation: var(--primary-saturation);
@@ -1235,7 +1237,7 @@ span.header-sort-icon img {
 }
 
 .window-sidebar-item:hover, .window-sidebar-item.has-open-contextmenu {
-    background-color: rgba(243, 243, 243, 0.8);
+    background-color: #5a5d6155;
     cursor: pointer;
 }
 
@@ -1244,7 +1246,7 @@ span.header-sort-icon img {
     margin-top: 2px;
     padding: 4px;
     border-radius: 3px;
-    color: #444444;
+    color: var(--primary-color);
     font-size: 13px;
     cursor: pointer;
     transition: 0.15s background-color;
@@ -1256,7 +1258,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(--primary-color-sidebar-item);
 }
 
 .window-sidebar-item-placeholder {
@@ -1404,6 +1406,7 @@ span.header-sort-icon img {
     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
+    filter: var(--primary-color-icon);
 }
 
 .window-action-btn:hover>img {
diff --git a/src/gui/src/services/ThemeService.js b/src/gui/src/services/ThemeService.js
index ff5fc0f37..11731abdb 100644
--- a/src/gui/src/services/ThemeService.js
+++ b/src/gui/src/services/ThemeService.js
@@ -121,6 +121,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-icon', s.light_text ? 'invert(1)' : 'invert(0)');
+        this.root.style.setProperty('--primary-color-sidebar-item', s.light_text ? '#5a5d61aa' : '#fefeff');
 
         // TODO: Should we debounce this to reduce traffic?
         this.#broadcastService.sendBroadcast('themeChanged', {