feat(dashboard): add light theme CSS overrides and align @theme defaults

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lum1104
2026-03-27 09:56:15 +08:00
Unverified
parent 17330081ab
commit b4d541b312
@@ -1,26 +1,39 @@
@import "tailwindcss";
@theme {
/* Dark luxury color palette */
/* Base */
--color-root: #0a0a0a;
--color-surface: #111111;
--color-elevated: #1a1a1a;
--color-panel: #141414;
/* Accent spectrum */
/* Accent */
--color-accent: #d4a574;
--color-accent-dim: #c9a96e;
--color-accent-bright: #e8c49a;
/* Text hierarchy */
/* Text */
--color-text-primary: #f5f0eb;
--color-text-secondary: #a39787;
--color-text-muted: #6b5f53;
/* Border tokens */
/* Borders */
--color-border-subtle: rgba(212, 165, 116, 0.12);
--color-border-medium: rgba(212, 165, 116, 0.25);
/* Node types */
--color-node-file: #4a7c9b;
--color-node-function: #5a9e6f;
--color-node-class: #8b6fb0;
--color-node-module: #c9a06c;
--color-node-concept: #b07a8a;
/* Diff */
--color-diff-changed: #e05252;
--color-diff-affected: #d4a030;
--color-diff-changed-dim: rgba(224, 82, 82, 0.25);
--color-diff-affected-dim: rgba(212, 160, 48, 0.25);
/* Glass */
--glass-bg: rgba(20, 20, 20, 0.8);
--glass-bg-heavy: rgba(20, 20, 20, 0.95);
@@ -41,33 +54,24 @@
--color-edge-dim: rgba(212, 165, 116, 0.08);
--color-edge-dot: rgba(212, 165, 116, 0.15);
/* Layer group (accent-based overlays) */
/* Accent overlays */
--color-accent-overlay-bg: rgba(212, 165, 116, 0.05);
--color-accent-overlay-border: rgba(212, 165, 116, 0.25);
/* kbd */
/* Kbd */
--kbd-bg: rgba(212, 165, 116, 0.1);
/* Node type colors (muted, refined) */
--color-node-file: #4a7c9b;
--color-node-function: #5a9e6f;
--color-node-class: #8b6fb0;
--color-node-module: #c9a06c;
--color-node-concept: #b07a8a;
/* Diff overlay colors */
--color-diff-changed: #e05252;
--color-diff-affected: #d4a030;
--color-diff-changed-dim: rgba(224, 82, 82, 0.25);
--color-diff-affected-dim: rgba(212, 160, 48, 0.25);
/* Fonts */
/* Typography */
--font-serif: 'DM Serif Display', Georgia, serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
--font-sans: 'Inter', system-ui, sans-serif;
}
/* Base styles */
html {
transition: background-color 0.2s ease, color 0.2s ease;
}
body {
font-family: var(--font-sans);
background-color: var(--color-root);
@@ -207,3 +211,26 @@ body {
.react-flow__background {
background-color: var(--color-root) !important;
}
/* Light theme overrides */
[data-theme="light"] {
color-scheme: light;
}
[data-theme="light"] .diff-faded {
opacity: 0.35;
}
[data-theme="light"] ::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .warning-banner {
background: rgba(180, 130, 30, 0.1);
border-color: rgba(180, 130, 30, 0.3);
color: #92600a;
}
[data-theme="dark"] {
color-scheme: dark;
}