/* Theme presets — layered on top of Tailwind's generated utility classes. The "Default" theme (data-theme unset or "default") is the app's original slate/indigo palette and is intentionally left untouched by this file. Other presets override the same utility classes Tailwind already generated (bg-white, dark:bg-slate-800, text-indigo-600, ...) with !important, keyed by a `data-theme="..."` attribute on that's set by the theme picker in Settings and persisted in localStorage, same as the existing light/dark toggle. This means zero changes were needed to any template — every page painted with these classes gets re-themed automatically. */ /* ---------------------------------------------------------------------- */ /* Catppuccin (Latte for light mode, Mocha for dark mode) */ /* ---------------------------------------------------------------------- */ html[data-theme="catppuccin"] { --cp-accent: #8839ef; /* mauve */ --cp-accent-fg: #ffffff; } html[data-theme="catppuccin"].dark { --cp-accent: #cba6f7; /* mauve (mocha) */ --cp-accent-fg: #1e1e2e; } /* Light (Latte) surfaces */ html[data-theme="catppuccin"] body, html[data-theme="catppuccin"] .bg-slate-50 { background-color: #eff1f5 !important; } html[data-theme="catppuccin"] .bg-white { background-color: #ffffff !important; } html[data-theme="catppuccin"] .bg-slate-100 { background-color: #e6e9ef !important; } html[data-theme="catppuccin"] .bg-slate-700 { background-color: #ccd0da !important; } html[data-theme="catppuccin"] .border-slate-50, html[data-theme="catppuccin"] .border-slate-100, html[data-theme="catppuccin"] .border-slate-200, html[data-theme="catppuccin"] .border-slate-300 { border-color: #ccd0da !important; } html[data-theme="catppuccin"] .text-slate-400, html[data-theme="catppuccin"] .text-slate-500 { color: #8c8fa1 !important; } html[data-theme="catppuccin"] .text-slate-600, html[data-theme="catppuccin"] .text-slate-700, html[data-theme="catppuccin"] .text-slate-900, html[data-theme="catppuccin"] .text-slate-200, html[data-theme="catppuccin"] .text-slate-300 { color: #4c4f69 !important; } html[data-theme="catppuccin"] .bg-slate-900 { background-color: var(--cp-accent) !important; } /* Dark (Mocha) surfaces */ html[data-theme="catppuccin"].dark body, html[data-theme="catppuccin"].dark .dark\:bg-slate-900 { background-color: #1e1e2e !important; } html[data-theme="catppuccin"].dark .dark\:bg-slate-800 { background-color: #313244 !important; } html[data-theme="catppuccin"].dark .dark\:bg-slate-700, html[data-theme="catppuccin"].dark .dark\:hover\:bg-slate-700:hover { background-color: #45475a !important; } html[data-theme="catppuccin"].dark .dark\:border-slate-600, html[data-theme="catppuccin"].dark .dark\:border-slate-700 { border-color: #45475a !important; } html[data-theme="catppuccin"].dark .dark\:text-slate-400, html[data-theme="catppuccin"].dark .dark\:text-slate-600 { color: #a6adc8 !important; } html[data-theme="catppuccin"].dark .dark\:text-slate-300, html[data-theme="catppuccin"].dark .dark\:text-slate-100 { color: #cdd6f4 !important; } html[data-theme="catppuccin"].dark .dark\:bg-slate-100 { background-color: var(--cp-accent) !important; } html[data-theme="catppuccin"].dark .dark\:text-slate-900 { color: var(--cp-accent-fg) !important; } html[data-theme="catppuccin"] .text-white { color: var(--cp-accent-fg) !important; } /* Accent (indigo -> mauve) in both modes */ html[data-theme="catppuccin"] .text-indigo-500, html[data-theme="catppuccin"] .text-indigo-600, html[data-theme="catppuccin"] .text-indigo-700, html[data-theme="catppuccin"].dark .dark\:text-indigo-300 { color: var(--cp-accent) !important; } html[data-theme="catppuccin"] .bg-indigo-50, html[data-theme="catppuccin"] .bg-indigo-100 { background-color: #dc8a7822 !important; } html[data-theme="catppuccin"].dark .dark\:bg-indigo-500\/20 { background-color: #cba6f733 !important; } html[data-theme="catppuccin"] .ring-indigo-300, html[data-theme="catppuccin"] .focus\:ring-indigo-300:focus { --tw-ring-color: var(--cp-accent) !important; } /* Points/rewards amber -> peach, kept warm and distinct from the accent */ html[data-theme="catppuccin"] .text-amber-400, html[data-theme="catppuccin"] .text-amber-500, html[data-theme="catppuccin"] .text-amber-600, html[data-theme="catppuccin"] .text-amber-700, html[data-theme="catppuccin"].dark .dark\:text-amber-300, html[data-theme="catppuccin"].dark .dark\:text-amber-400 { color: #fe640b !important; } html[data-theme="catppuccin"] .bg-amber-50 { background-color: #fe640b1a !important; } html[data-theme="catppuccin"].dark .dark\:bg-amber-500\/20 { background-color: #fab3871a !important; } html[data-theme="catppuccin"] input[type="checkbox"] { accent-color: var(--cp-accent) !important; } /* ---------------------------------------------------------------------- */ /* Nord */ /* ---------------------------------------------------------------------- */ html[data-theme="nord"] { --nd-accent: #5e81ac; --nd-accent-fg: #eceff4; } html[data-theme="nord"].dark { --nd-accent: #88c0d0; --nd-accent-fg: #2e3440; } /* Light surfaces */ html[data-theme="nord"] body, html[data-theme="nord"] .bg-slate-50 { background-color: #eceff4 !important; } html[data-theme="nord"] .bg-white { background-color: #ffffff !important; } html[data-theme="nord"] .bg-slate-100 { background-color: #e5e9f0 !important; } html[data-theme="nord"] .bg-slate-700 { background-color: #d8dee9 !important; } html[data-theme="nord"] .border-slate-50, html[data-theme="nord"] .border-slate-100, html[data-theme="nord"] .border-slate-200, html[data-theme="nord"] .border-slate-300 { border-color: #d8dee9 !important; } html[data-theme="nord"] .text-slate-400, html[data-theme="nord"] .text-slate-500 { color: #7b88a1 !important; } html[data-theme="nord"] .text-slate-600, html[data-theme="nord"] .text-slate-700, html[data-theme="nord"] .text-slate-900, html[data-theme="nord"] .text-slate-200, html[data-theme="nord"] .text-slate-300 { color: #2e3440 !important; } html[data-theme="nord"] .bg-slate-900 { background-color: var(--nd-accent) !important; } /* Dark surfaces (Polar Night) */ html[data-theme="nord"].dark body, html[data-theme="nord"].dark .dark\:bg-slate-900 { background-color: #2e3440 !important; } html[data-theme="nord"].dark .dark\:bg-slate-800 { background-color: #3b4252 !important; } html[data-theme="nord"].dark .dark\:bg-slate-700, html[data-theme="nord"].dark .dark\:hover\:bg-slate-700:hover { background-color: #434c5e !important; } html[data-theme="nord"].dark .dark\:border-slate-600, html[data-theme="nord"].dark .dark\:border-slate-700 { border-color: #4c566a !important; } html[data-theme="nord"].dark .dark\:text-slate-400, html[data-theme="nord"].dark .dark\:text-slate-600 { color: #9aa5b5 !important; } html[data-theme="nord"].dark .dark\:text-slate-300, html[data-theme="nord"].dark .dark\:text-slate-100 { color: #eceff4 !important; } html[data-theme="nord"].dark .dark\:bg-slate-100 { background-color: var(--nd-accent) !important; } html[data-theme="nord"].dark .dark\:text-slate-900 { color: var(--nd-accent-fg) !important; } html[data-theme="nord"] .text-white { color: var(--nd-accent-fg) !important; } /* Accent (indigo -> frost blue) in both modes */ html[data-theme="nord"] .text-indigo-500, html[data-theme="nord"] .text-indigo-600, html[data-theme="nord"] .text-indigo-700, html[data-theme="nord"].dark .dark\:text-indigo-300 { color: var(--nd-accent) !important; } html[data-theme="nord"] .bg-indigo-50, html[data-theme="nord"] .bg-indigo-100 { background-color: #5e81ac22 !important; } html[data-theme="nord"].dark .dark\:bg-indigo-500\/20 { background-color: #88c0d033 !important; } html[data-theme="nord"] .ring-indigo-300, html[data-theme="nord"] .focus\:ring-indigo-300:focus { --tw-ring-color: var(--nd-accent) !important; } /* Points/rewards amber -> aurora yellow/orange */ html[data-theme="nord"] .text-amber-400, html[data-theme="nord"] .text-amber-500, html[data-theme="nord"] .text-amber-600, html[data-theme="nord"] .text-amber-700, html[data-theme="nord"].dark .dark\:text-amber-300, html[data-theme="nord"].dark .dark\:text-amber-400 { color: #d08770 !important; } html[data-theme="nord"] .bg-amber-50 { background-color: #d087701a !important; } html[data-theme="nord"].dark .dark\:bg-amber-500\/20 { background-color: #ebcb8b1a !important; } html[data-theme="nord"] input[type="checkbox"] { accent-color: var(--nd-accent) !important; }