/* Sidebar theme tokens */ :root { --sidebar-bg: #1e293b; /* slate-800 */ --sidebar-bg-active: #0f172a; /* slate-900 */ --sidebar-bg-hover: #334155; /* slate-700 */ --sidebar-text: #cbd5e1; /* slate-300 */ --sidebar-text-active: #ffffff; --sidebar-text-muted: #94a3b8; /* slate-400 */ --sidebar-border: #334155; /* slate-700 */ --sidebar-accent: #ef4444; /* red-500 */ --sidebar-avatar-bg: #475569; /* slate-600 */ } [data-sidebar-theme="red"] { --sidebar-bg: #7f1d1d; /* red-900 */ --sidebar-bg-active: #450a0a; /* red-950 */ --sidebar-bg-hover: #991b1b; /* red-800 */ --sidebar-text: #fecaca; /* red-200 */ --sidebar-text-active: #ffffff; --sidebar-text-muted: #fca5a5; /* red-300 */ --sidebar-border: #991b1b; /* red-800 */ --sidebar-accent: #fbbf24; /* amber-400 */ --sidebar-avatar-bg: #b91c1c; /* red-700 */ } /* ======================================================= Sitewide dark mode overrides ======================================================= These are unlayered CSS rules that override Tailwind utility classes when dark mode is active. They provide sitewide dark mode coverage without requiring dark: classes on every element in every view. ======================================================= */ /* Base setup on */ html[data-color-scheme="dark"] { background-color: #111827; /* gray-900 — page background */ color: #e5e7eb; /* gray-200 — base inherited text */ color-scheme: dark; } /* --- Backgrounds --- */ [data-color-scheme="dark"] .bg-zinc-100 { background-color: #1f2937; /* gray-800 — card sections */ } [data-color-scheme="dark"] .bg-white { background-color: #374151; /* gray-700 — elevated surfaces */ } [data-color-scheme="dark"] .bg-gray-50 { background-color: #1f2937; /* gray-800 */ } /* --- Text --- */ [data-color-scheme="dark"] .text-gray-900 { color: #f3f4f6; /* gray-100 */ } [data-color-scheme="dark"] .text-gray-700 { color: #d1d5db; /* gray-300 */ } [data-color-scheme="dark"] .text-gray-600 { color: #9ca3af; /* gray-400 */ } [data-color-scheme="dark"] .text-gray-500 { color: #9ca3af; /* gray-400 */ } /* --- Borders --- */ [data-color-scheme="dark"] .border-gray-100 { border-color: #374151; /* gray-700 */ } [data-color-scheme="dark"] .border-gray-200 { border-color: #374151; /* gray-700 */ } [data-color-scheme="dark"] .border-gray-300 { border-color: #4b5563; /* gray-600 */ } /* --- Outlines (form inputs without .form-input) --- */ [data-color-scheme="dark"] .outline-gray-300 { outline-color: #4b5563; /* gray-600 */ } /* --- Rings (buttons with ring-gray-*) --- */ [data-color-scheme="dark"] .ring-gray-200 { --tw-ring-color: #374151; /* gray-700 */ } [data-color-scheme="dark"] .ring-gray-300 { --tw-ring-color: #4b5563; /* gray-600 */ } /* --- Additional gray backgrounds --- */ [data-color-scheme="dark"] .bg-gray-100 { background-color: #1f2937; /* gray-800 */ } [data-color-scheme="dark"] .bg-gray-200 { background-color: #374151; /* gray-700 */ } /* --- Colored light backgrounds → dark tinted backgrounds --- */ [data-color-scheme="dark"] .bg-blue-50 { background-color: #172554; /* blue-950 */ } [data-color-scheme="dark"] .bg-blue-50\/50 { background-color: rgb(23 37 84 / 0.5); /* blue-950 at 50% */ } [data-color-scheme="dark"] .bg-blue-100 { background-color: #1e3a8a; /* blue-900 */ } [data-color-scheme="dark"] .bg-red-50 { background-color: #450a0a; /* red-950 */ } [data-color-scheme="dark"] .bg-red-100 { background-color: #7f1d1d; /* red-900 */ } [data-color-scheme="dark"] .bg-green-50 { background-color: #052e16; /* green-950 */ } [data-color-scheme="dark"] .bg-green-100 { background-color: #14532d; /* green-900 */ } [data-color-scheme="dark"] .bg-yellow-50 { background-color: #422006; /* yellow-950 */ } [data-color-scheme="dark"] .bg-yellow-100 { background-color: #713f12; /* yellow-900 */ } [data-color-scheme="dark"] .bg-amber-50 { background-color: #451a03; /* amber-950 */ } [data-color-scheme="dark"] .bg-amber-100 { background-color: #78350f; /* amber-900 */ } [data-color-scheme="dark"] .bg-purple-50 { background-color: #3b0764; /* purple-950 */ } [data-color-scheme="dark"] .bg-purple-100 { background-color: #581c87; /* purple-900 */ } [data-color-scheme="dark"] .bg-indigo-50 { background-color: #1e1b4b; /* indigo-950 */ } [data-color-scheme="dark"] .bg-indigo-100 { background-color: #312e81; /* indigo-900 */ } [data-color-scheme="dark"] .bg-teal-50 { background-color: #042f2e; /* teal-950 */ } [data-color-scheme="dark"] .bg-teal-100 { background-color: #134e4a; /* teal-900 */ } [data-color-scheme="dark"] .bg-orange-50 { background-color: #431407; /* orange-950 */ } [data-color-scheme="dark"] .bg-orange-100 { background-color: #7c2d12; /* orange-900 */ } [data-color-scheme="dark"] .bg-emerald-50 { background-color: #022c22; /* emerald-950 */ } [data-color-scheme="dark"] .bg-emerald-100 { background-color: #064e3b; /* emerald-900 */ } /* --- Colored text → lighter for readability on dark backgrounds --- */ [data-color-scheme="dark"] .text-blue-700, [data-color-scheme="dark"] .text-blue-600 { color: #93c5fd; /* blue-300 */ } [data-color-scheme="dark"] .text-blue-800 { color: #60a5fa; /* blue-400 */ } [data-color-scheme="dark"] .text-red-700, [data-color-scheme="dark"] .text-red-600 { color: #fca5a5; /* red-300 */ } [data-color-scheme="dark"] .text-red-800 { color: #f87171; /* red-400 */ } [data-color-scheme="dark"] .text-green-700, [data-color-scheme="dark"] .text-green-600 { color: #86efac; /* green-300 */ } [data-color-scheme="dark"] .text-green-800 { color: #4ade80; /* green-400 */ } [data-color-scheme="dark"] .text-yellow-700, [data-color-scheme="dark"] .text-yellow-600 { color: #fde047; /* yellow-300 */ } [data-color-scheme="dark"] .text-yellow-800 { color: #facc15; /* yellow-400 */ } [data-color-scheme="dark"] .text-amber-700, [data-color-scheme="dark"] .text-amber-600 { color: #fcd34d; /* amber-300 */ } [data-color-scheme="dark"] .text-amber-800 { color: #fbbf24; /* amber-400 */ } [data-color-scheme="dark"] .text-purple-700, [data-color-scheme="dark"] .text-purple-600 { color: #d8b4fe; /* purple-300 */ } [data-color-scheme="dark"] .text-purple-800 { color: #c084fc; /* purple-400 */ } [data-color-scheme="dark"] .text-indigo-700, [data-color-scheme="dark"] .text-indigo-600 { color: #a5b4fc; /* indigo-300 */ } [data-color-scheme="dark"] .text-indigo-800 { color: #818cf8; /* indigo-400 */ } [data-color-scheme="dark"] .text-teal-700, [data-color-scheme="dark"] .text-teal-600 { color: #5eead4; /* teal-300 */ } [data-color-scheme="dark"] .text-teal-800 { color: #2dd4bf; /* teal-400 */ } [data-color-scheme="dark"] .text-orange-700, [data-color-scheme="dark"] .text-orange-600 { color: #fdba74; /* orange-300 */ } [data-color-scheme="dark"] .text-orange-800 { color: #fb923c; /* orange-400 */ } [data-color-scheme="dark"] .text-emerald-700, [data-color-scheme="dark"] .text-emerald-600 { color: #6ee7b7; /* emerald-300 */ } [data-color-scheme="dark"] .text-emerald-800 { color: #34d399; /* emerald-400 */ } /* --- Colored borders → darker for dark mode --- */ [data-color-scheme="dark"] .border-blue-200 { border-color: #1e3a8a; /* blue-900 */ } [data-color-scheme="dark"] .border-blue-300 { border-color: #1d4ed8; /* blue-700 */ } [data-color-scheme="dark"] .border-red-200 { border-color: #7f1d1d; /* red-900 */ } [data-color-scheme="dark"] .border-red-300 { border-color: #b91c1c; /* red-700 */ } [data-color-scheme="dark"] .border-green-200 { border-color: #14532d; /* green-900 */ } [data-color-scheme="dark"] .border-green-300 { border-color: #15803d; /* green-700 */ } [data-color-scheme="dark"] .border-yellow-200 { border-color: #713f12; /* yellow-900 */ } [data-color-scheme="dark"] .border-yellow-300 { border-color: #a16207; /* yellow-700 */ } [data-color-scheme="dark"] .border-amber-200 { border-color: #78350f; /* amber-900 */ } [data-color-scheme="dark"] .border-amber-300 { border-color: #b45309; /* amber-700 */ } [data-color-scheme="dark"] .border-purple-200 { border-color: #581c87; /* purple-900 */ } [data-color-scheme="dark"] .border-purple-300 { border-color: #7e22ce; /* purple-700 */ } [data-color-scheme="dark"] .border-indigo-200 { border-color: #312e81; /* indigo-900 */ } [data-color-scheme="dark"] .border-indigo-300 { border-color: #4338ca; /* indigo-700 */ } [data-color-scheme="dark"] .border-teal-200 { border-color: #134e4a; /* teal-900 */ } [data-color-scheme="dark"] .border-teal-300 { border-color: #0f766e; /* teal-700 */ } [data-color-scheme="dark"] .border-orange-200 { border-color: #7c2d12; /* orange-900 */ } [data-color-scheme="dark"] .border-orange-300 { border-color: #c2410c; /* orange-700 */ } [data-color-scheme="dark"] .border-emerald-200 { border-color: #064e3b; /* emerald-900 */ } /* --- Dividers --- */ [data-color-scheme="dark"] .divide-gray-200 > * + * { border-color: #374151; /* gray-700 */ } [data-color-scheme="dark"] .divide-gray-100 > * + * { border-color: #374151; /* gray-700 */ } /* --- Hover states --- */ [data-color-scheme="dark"] .hover\:bg-gray-50:hover { background-color: #4b5563; /* gray-600 — lighter than bg-white */ } [data-color-scheme="dark"] .hover\:bg-gray-100:hover { background-color: #374151; /* gray-700 */ } [data-color-scheme="dark"] .hover\:bg-blue-50:hover { background-color: #172554; /* blue-950 */ } [data-color-scheme="dark"] .hover\:bg-blue-100:hover { background-color: #1e3a8a; /* blue-900 */ } [data-color-scheme="dark"] .hover\:bg-red-100:hover { background-color: #7f1d1d; /* red-900 */ } [data-color-scheme="dark"] .hover\:bg-green-100:hover { background-color: #14532d; /* green-900 */ } [data-color-scheme="dark"] .hover\:bg-yellow-100:hover { background-color: #713f12; /* yellow-900 */ } [data-color-scheme="dark"] .hover\:bg-amber-100:hover { background-color: #78350f; /* amber-900 */ } [data-color-scheme="dark"] .hover\:bg-purple-100:hover { background-color: #581c87; /* purple-900 */ }