:root, [data-theme='light'] { --color-bg-gradient-start: #f3f4f6; --color-bg-gradient-end: #e5e7eb; --color-text-primary: #1f2937; --color-text-muted: #6b7280; --color-card-bg: #ffffff; --color-card-footer-bg: #f9fafb; --color-card-shadow-strong: rgba(15, 23, 42, 0.25); --color-card-shadow-soft: rgba(15, 23, 42, 0.08); --color-border-muted: #e5e7eb; --color-accent: #111827; --color-sidebar-bg: #ffffff; --color-sidebar-text: #1f2937; --color-header-bg: #ffffff; --color-header-border: #e5e7eb; --color-main-bg: #f9fafb; --color-logout-red: #dc3545; --color-logout-red-hover: #c82333; --color-icon-gray: #9ca3af; } [data-theme='dark'] { --color-bg-gradient-start: #0f172a; --color-bg-gradient-end: #111827; --color-text-primary: #e2e8f0; --color-text-muted: #94a3b8; --color-card-bg: #1e293b; --color-card-footer-bg: #0f172a; --color-card-shadow-strong: rgba(0, 0, 0, 0.45); --color-card-shadow-soft: rgba(15, 23, 42, 0.35); --color-border-muted: #1f2937; --color-accent: #f8fafc; --color-sidebar-bg: #1e293b; --color-sidebar-text: #e2e8f0; --color-header-bg: #1e293b; --color-header-border: #1f2937; --color-main-bg: #0f172a; --color-logout-red: #dc3545; --color-logout-red-hover: #c82333; --color-icon-gray: #94a3b8; } /* Apply `data-theme="dark"` to or to switch palettes. */