matteoscrugli/app-service
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dark theme + auto accent color overrides

Browse Source 
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:
matteoscrugli
2025-12-08 22:52:09 +01:00
parent 453ce10494
commit de204ea68c
6 changed files with 268 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
frontend/src/styles/AdminPanel.css
View File

@@ -2257,4 +2257,101 @@
border: 1px solid var(--color-border);
pointer-events: none;
}
}
/* ========== DARK THEME + AUTO ACCENT OVERRIDES ========== */
/* Primary buttons with auto accent in dark mode: use off-white background with dark text */
[data-theme='dark'][data-accent='auto'] .btn-primary,
[data-theme='dark'][data-accent='auto'] .btn-primary-modern {
background: #e5e7eb;
color: #111827;
}
[data-theme='dark'][data-accent='auto'] .btn-primary:hover,
[data-theme='dark'][data-accent='auto'] .btn-primary-modern:hover {
background: #f3f4f6;
color: #111827;
}
/* Icon action buttons (edit) hover state with auto accent in dark mode */
[data-theme='dark'][data-accent='auto'] .btn-icon-action.btn-edit:hover,
[data-theme='dark'][data-accent='auto'] .btn-icon-modern.btn-edit:hover {
background: #e5e7eb;
border-color: #e5e7eb;
}
[data-theme='dark'][data-accent='auto'] .btn-icon-action.btn-edit:hover .material-symbols-outlined,
[data-theme='dark'][data-accent='auto'] .btn-icon-modern.btn-edit:hover .material-symbols-outlined {
color: #111827;
}
/* Toggle switch checked state */
[data-theme='dark'][data-accent='auto'] .toggle-modern input:checked+.toggle-slider-modern {
background: #e5e7eb;
}
[data-theme='dark'][data-accent='auto'] .toggle-modern input:checked+.toggle-slider-modern:before {
background: #111827;
}
/* Badge accent */
[data-theme='dark'][data-accent='auto'] .badge-accent {
background: rgba(229, 231, 235, 0.15);
color: #e5e7eb;
border-color: rgba(229, 231, 235, 0.3);
}
/* User avatar gradient */
[data-theme='dark'][data-accent='auto'] .modern-table .user-avatar-modern {
background: linear-gradient(135deg, #d1d5db, #e5e7eb);
color: #111827;
}
/* Sidebar mode option active state */
[data-theme='dark'][data-accent='auto'] .sidebar-mode-option.active {
border-color: #e5e7eb;
background: rgba(229, 231, 235, 0.1);
}
[data-theme='dark'][data-accent='auto'] .sidebar-mode-option.active .material-symbols-outlined,
[data-theme='dark'][data-accent='auto'] .sidebar-mode-option.active span:last-child {
color: #e5e7eb;
}
/* Feature status badge active */
[data-theme='dark'][data-accent='auto'] .feature-status-badge.active {
background: rgba(229, 231, 235, 0.1);
color: #e5e7eb;
border-color: rgba(229, 231, 235, 0.2);
}
/* Focus states */
[data-theme='dark'][data-accent='auto'] .input-group-modern:focus-within {
border-color: #e5e7eb;
box-shadow: 0 0 0 3px rgba(229, 231, 235, 0.15);
}
[data-theme='dark'][data-accent='auto'] .form-field input:focus {
border-color: #e5e7eb;
box-shadow: 0 0 0 3px rgba(229, 231, 235, 0.1);
}
/* Checkbox checked state in modals */
[data-theme='dark'][data-accent='auto'] .users-modal .checkbox-row input[type="checkbox"]:checked {
background: #e5e7eb;
border-color: #e5e7eb;
}
[data-theme='dark'][data-accent='auto'] .users-modal .checkbox-row input[type="checkbox"]:checked::after {
border-color: #111827;
}
/* Modal toggle checked */
[data-theme='dark'][data-accent='auto'] .users-modal .toggle-inline input:checked+.toggle-slider-sm {
background: #e5e7eb;
}
[data-theme='dark'][data-accent='auto'] .users-modal .toggle-inline input:checked+.toggle-slider-sm::before {
background: #111827;
}