Add dark theme + auto accent color overrides

Use off-white backgrounds with dark text for active/selected elements
when using dark theme with 'auto' accent color:
- Tab buttons (active state)
- Sidebar nav items (active state)
- Primary buttons
- Toggle switches
- Badges, checkboxes, input focus states
- Theme settings cards and options

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2025-12-08 22:52:09 +01:00
parent 453ce10494
commit de204ea68c
6 changed files with 268 additions and 0 deletions

View File

@@ -1018,4 +1018,18 @@
transform-origin: bottom center;
animation: slideUpFade 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
}
/* ========== DARK THEME + AUTO ACCENT OVERRIDES ========== */
/* Nav items with auto accent in dark mode: use off-white background with dark text */
[data-theme='dark'][data-accent='auto'] .nav-item.active {
background: #e5e7eb;
color: #111827 !important;
box-shadow: var(--shadow-md);
}
[data-theme='dark'][data-accent='auto'] .nav-item.active .nav-icon,
[data-theme='dark'][data-accent='auto'] .nav-item.active .nav-label {
color: #111827 !important;
}