From 23b29542eb22ff5d654d322f4b03b0fb1a77eaf0 Mon Sep 17 00:00:00 2001 From: PrayagCodes Date: Sun, 19 Oct 2025 19:11:55 -0500 Subject: [PATCH 1/3] fix(ui): improve sidebar text contrast across theme lightness settings-#issue-2 ## Problem When adjusting the lightness level of screen themes, sidebar header texts and item labels in the explorer become unreadable due to poor contrast between text and background colors. ## Root Cause - Sidebar title and item text colors were hardcoded (#8f96a3 and #444444) - Active item backgrounds were fixed to white (#fefeff) - No dynamic color adjustment based on theme lightness ## Solution Implement dynamic contrast adjustment for sidebar text and backgrounds: ### Changes: - style.css (lines 1225, 1250): Use var(--window-sidebar-color) for text - style.css (lines 92-93, 106, 1262): Add dynamic active item backgrounds - ThemeService.js (line 124): Switch colors based on lightness threshold ### Behavior: - Lightness < 60: White text on dark backgrounds - Lightness >= 60: Dark text (#373e44) on light backgrounds - Active items: Contrasting backgrounds in all themes ## Testing - Verified readability at lightness values: 0, 30, 60, 90, 100 - Tested with 'Favorites' header and all sidebar items - Confirmed WCAG accessibility compliance Resolves sidebar readability issues across theme configurations. --- src/gui/src/css/style.css | 10 +++++++--- src/gui/src/services/ThemeService.js | 1 + 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/gui/src/css/style.css b/src/gui/src/css/style.css index 4c7d1637e2..74f8c3831b 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,8 @@ 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); + --taskbar-hue: var(--primary-hue); --taskbar-saturation: var(--primary-saturation); @@ -1218,7 +1222,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 +1247,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 +1259,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 { diff --git a/src/gui/src/services/ThemeService.js b/src/gui/src/services/ThemeService.js index b49d41e684..2f82754096 100644 --- a/src/gui/src/services/ThemeService.js +++ b/src/gui/src/services/ThemeService.js @@ -121,6 +121,7 @@ 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'); // TODO: Should we debounce this to reduce traffic? this.#broadcastService.sendBroadcast('themeChanged', { From 22d494049c588a5da93c0334a7d7b9ae8daf5b3e Mon Sep 17 00:00:00 2001 From: PrayagCodes Date: Sun, 19 Oct 2025 20:27:08 -0500 Subject: [PATCH 2/3] fix(ui): improve text icon contrast across theme lightness settings Implement dynamic contrast adjustment for window controls that adapts to theme lightness settings. Changes: - Window action buttons (minimize, maximize, close) icons adapt to theme - CSS variables initialized properly on app startup --- src/gui/src/css/style.css | 5 ++++- src/gui/src/services/ThemeService.js | 4 ++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/gui/src/css/style.css b/src/gui/src/css/style.css index 74f8c3831b..c86c2ff462 100644 --- a/src/gui/src/css/style.css +++ b/src/gui/src/css/style.css @@ -104,6 +104,7 @@ pre { --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); @@ -1402,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; @@ -1416,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 2f82754096..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_(); } } @@ -122,6 +125,7 @@ export class ThemeService extends Service { 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', { From 31bf8abb2c8e1c70910d8cc5d703056e9167566d Mon Sep 17 00:00:00 2001 From: PrayagCodes Date: Sat, 25 Oct 2025 14:21:25 -0500 Subject: [PATCH 3/3] refactor: remove redundant else block in ThemeService Move this.reload_() outside if/else block since it runs in both branches. This follows DRY principle and simplifies the code logic. Addresses reviewer nit https://github.com/codepath/puter/pull/21/files/22d494049c588a5da93c0334a7d7b9ae8daf5b3e#r2451999665 --- src/gui/src/services/ThemeService.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/gui/src/services/ThemeService.js b/src/gui/src/services/ThemeService.js index dc946be836..2ffa5585df 100644 --- a/src/gui/src/services/ThemeService.js +++ b/src/gui/src/services/ThemeService.js @@ -86,11 +86,8 @@ export class ThemeService extends Service { ...this.state, ...data.colors, }; + } this.reload_(); - } else { - // Initialize CSS variables with default values - this.reload_(); - } } reset () {