fix: Issue #2 - [BUG] Sidebar header text unreadable with certain theme lightness settings #21
+16
−4
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…s-#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.
PrayagCodes
changed the title
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
PrayagCodes
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR fixes sidebar text contrast issues in the
Explorerwhen users adjust theme lightness settings. Sidebar header and item text colors are now dynamic and adapt to the current theme lightness, ensuring readability across all configurations.Before
After
Implementation
Related Issue
Closes Issue #2 - [BUG] Sidebar header text unreadable with certain theme lightness settings #6
Core Functionality
CSS Variables
--primary-color-sidebarvariable for future extensibility--primary-color-sidebar-itemvariable for active item backgrounds--window-sidebar-active-bgvariable to link active items to theme--window-action-btn-filtervariable for window control buttonsTheme Service
reload_()method to dynamically set colors based on lightnesslight_textthreshold (< 60) for consistencyImplementation Details
light_text ? 'white' : '#373e44'light_text ? '#5a5d61aa' : '#fefeff'light_text ? 'invert(1) brightness(2)' : 'none'Testing Performed
Files Modified
src/gui/src/css/style.css- CSS variables and styling for sidebar and window controlssrc/gui/src/services/ThemeService.js- Dynamic color switching logic and initialization fix