Hartmut/CapaKraken
1
0
Fork 0
Code Issues 10 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(ui): unify dark theme — replace hardcoded hex with CSS variables

Browse Source 
- Replace sidebar #0d0e22 hardcoded hex with .sidebar-panel class backed by
  --surface-card CSS variable so all three sidebar elements (desktop, mobile,
  mobile header) share the same neutral-dark color as the main content
- Remove purple logo gradient (dark:from-[#0d0e22] dark:to-[#13162a]) — now uses
  --surface-elevated for a neutral, unified look
- Add .dark slate-*/gray-900 overrides: bg-slate-700/800/900, border-slate-800,
  hover:bg-slate-800 all map to --surface-elevated/--surface-card/--border-subtle
- Remove dead hardcoded rgb(45 51 71) rule for dark bg-gray-100 (was overridden
  further down anyway; now consistently uses --surface-elevated)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Hartmut Nörenberg
2026-04-09 22:25:10 +02:00
parent 1a2f7de5bd
commit 13262b5cec
2 changed files with 29 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/globals.css
+25 -1
View File
@@ -217,7 +217,7 @@
}
.dark .bg-gray-100 {
background-color: rgb(45 51 71) !important;
background-color: rgb(var(--surface-elevated)) !important;
}
.dark .border-gray-100 {
@@ -345,6 +345,30 @@
color: rgb(196 181 253) !important;
}
/* Slate-* normalization — map to CSS variable surfaces */
.dark .bg-slate-700,
.dark .bg-slate-800 {
background-color: rgb(var(--surface-elevated)) !important;
}
.dark .bg-slate-900,
.dark .bg-gray-900 {
background-color: rgb(var(--surface-card)) !important;
}
.dark .border-slate-800,
.dark .border-slate-700 {
border-color: rgb(var(--border-subtle)) !important;
}
.dark .hover\:bg-slate-800:hover {
background-color: rgb(var(--surface-elevated)) !important;
}
/* Sidebar panel — overrides the hardcoded hex values in AppShell */
:is(.dark) .sidebar-panel {
background-color: rgb(var(--surface-card) / 0.92) !important;
border-right-color: rgb(var(--border-subtle)) !important;
border-bottom-color: rgb(var(--border-subtle)) !important;
}
/* Modal / overlay */
.dark .shadow-2xl {
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.6) !important;