/* * WattSwap — Light / Dark theme. * The site markup uses Tailwind utility classes (bg-white, text-neutral-900, ...). * Rather than add `dark:` variants to thousands of elements, we remap the common * light utilities to dark equivalents under `html.dark`. The active theme is set * on before paint by an inline script and toggled by js/theme-toggle.js. */ :root { --ws-bg: #ffffff; --ws-surface: #ffffff; } html.dark { color-scheme: dark; /* dark palette (Tailwind slate) */ --ws-bg: #0f172a; /* page background */ --ws-surface: #1e293b; /* cards / panels / nav */ --ws-surface-2: #334155; /* chips / hovers */ --ws-text: #f1f5f9; /* primary text */ --ws-text-2: #cbd5e1; /* secondary text */ --ws-muted: #94a3b8; /* muted text */ --ws-border: #334155; /* borders */ background-color: var(--ws-bg); } /* Smooth, subtle transition when switching (no animation on first paint, since the class is applied before render). */ body, .bg-white, .bg-neutral-50, .bg-neutral-100, .bg-gray-50, .bg-gray-100, .border-neutral-200, .border-neutral-100, .border-gray-200, .border-gray-100, .text-neutral-900, .text-neutral-800, .text-neutral-700, .text-neutral-600, .text-neutral-500, .text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500 { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } /* ---- Base surfaces ---- */ html.dark body { background-color: var(--ws-bg) !important; color: var(--ws-text); } html.dark .bg-white { background-color: var(--ws-surface) !important; } html.dark .bg-neutral-50, html.dark .bg-gray-50 { background-color: var(--ws-bg) !important; } html.dark .bg-neutral-100, html.dark .bg-gray-100 { background-color: var(--ws-surface-2) !important; } /* translucent nav bar (bg-white/80, bg-white/90, bg-white/95) */ html.dark .bg-white\/80, html.dark .bg-white\/90, html.dark .bg-white\/95 { background-color: rgba(15, 23, 42, 0.85) !important; } /* ---- Text ---- */ html.dark .text-neutral-900, html.dark .text-gray-900 { color: var(--ws-text) !important; } html.dark .text-neutral-800, html.dark .text-gray-800 { color: #e2e8f0 !important; } html.dark .text-neutral-700, html.dark .text-gray-700 { color: var(--ws-text-2) !important; } html.dark .text-neutral-600, html.dark .text-neutral-500, html.dark .text-gray-600, html.dark .text-gray-500 { color: var(--ws-muted) !important; } /* ---- Borders ---- */ html.dark .border-neutral-200, html.dark .border-gray-200 { border-color: var(--ws-border) !important; } html.dark .border-neutral-100, html.dark .border-gray-100 { border-color: var(--ws-surface) !important; } html.dark .divide-neutral-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--ws-border) !important; } /* ---- Hover states that flip to light surfaces ---- */ html.dark .hover\:bg-neutral-50:hover, html.dark .hover\:bg-gray-50:hover { background-color: var(--ws-surface) !important; } html.dark .hover\:bg-neutral-100:hover, html.dark .hover\:bg-gray-100:hover { background-color: var(--ws-surface-2) !important; } html.dark .hover\:bg-white:hover { background-color: var(--ws-surface) !important; } html.dark .hover\:text-neutral-900:hover, html.dark .hover\:text-gray-900:hover { color: var(--ws-text) !important; } /* ---- Form controls ---- */ html.dark input, html.dark select, html.dark textarea { background-color: var(--ws-surface) !important; color: var(--ws-text) !important; border-color: var(--ws-border) !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b !important; } html.dark select option { background-color: var(--ws-surface); color: var(--ws-text); } /* ---- Depth: white shadows are invisible on dark, add real ones ---- */ html.dark .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.4) !important; } html.dark .shadow, html.dark .shadow-md { box-shadow: 0 4px 12px rgba(0,0,0,.45) !important; } html.dark .shadow-lg { box-shadow: 0 10px 24px rgba(0,0,0,.5) !important; } html.dark .shadow-xl, html.dark .shadow-2xl { box-shadow: 0 20px 45px rgba(0,0,0,.55) !important; } /* ---- Theme toggle button (injected by js/theme-toggle.js) ---- */ .ws-theme-toggle { position: fixed; left: 20px; bottom: 20px; z-index: 60; width: 46px; height: 46px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: #ffffff; color: #0f172a; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); cursor: pointer; transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease; } .ws-theme-toggle:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25); } .ws-theme-toggle:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; } .ws-theme-toggle svg { width: 22px; height: 22px; } html.dark .ws-theme-toggle { background: #1e293b; color: #fbbf24; border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); } @media print { .ws-theme-toggle { display: none !important; } }