schalli/tessera-ctl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 14 Wiki Activity

fix(dashboard): sidebar active-item text unreadable in light mode with custom accent

Browse Source 
applyAccentColor() forced --sidebar-accent-foreground to the raw accent
color regardless of theme. Works in dark mode (bright text on dark-tinted
bg) but in light mode the tinted bg is near-white, so full-saturation
yellow text on pale-yellow bg was nearly invisible. Now only overrides
the foreground in dark mode; light mode keeps the theme's default
high-contrast foreground token.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Schalli
2026-07-07 08:58:32 +02:00
parent e07af71f9e
commit b03441da59
1 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/lib/stores/auth-store.ts
+16 -8
View File
@@ -20,17 +20,25 @@ interface AuthState {
function applyAccentColor(color: string | null | undefined) { function applyAccentColor(color: string | null | undefined) {
if (typeof document === 'undefined') return; if (typeof document === 'undefined') return;
const root = document.documentElement;
if (color) { if (color) {
document.documentElement.style.setProperty('--primary', color); root.style.setProperty('--primary', color);
document.documentElement.style.setProperty('--ring', color); root.style.setProperty('--ring', color);
// Sidebar active state: accent color with 15% opacity (#rrggbbaa, 0x26 ≈ 15%) // Sidebar active state: accent color with 15% opacity (#rrggbbaa, 0x26 ≈ 15%)
document.documentElement.style.setProperty('--sidebar-accent', `${color}26`); root.style.setProperty('--sidebar-accent', `${color}26`);
document.documentElement.style.setProperty('--sidebar-accent-foreground', color); // Full-saturation accent text only reads well against the dark-mode sidebar's
// tinted-dark background; in light mode it's near-white behind it, so keep
// the theme's default (dark, high-contrast) foreground there instead.
if (root.classList.contains('dark')) {
root.style.setProperty('--sidebar-accent-foreground', color);
} else { } else {
document.documentElement.style.removeProperty('--primary'); root.style.removeProperty('--sidebar-accent-foreground');
document.documentElement.style.removeProperty('--ring'); }
document.documentElement.style.removeProperty('--sidebar-accent'); } else {
document.documentElement.style.removeProperty('--sidebar-accent-foreground'); root.style.removeProperty('--primary');
root.style.removeProperty('--ring');
root.style.removeProperty('--sidebar-accent');
root.style.removeProperty('--sidebar-accent-foreground');
} }
} }