/* SolarSim dark mode — scoped via [data-theme="dark"] on */ [data-theme="dark"] { color-scheme: dark; --ss-bg-page: #0f172a; --ss-bg-card: #1e293b; --ss-bg-sunken: #0b1222; --ss-bg-elevated: #273449; --ss-text-primary: #e2e8f0; --ss-text-secondary: #94a3b8; --ss-text-muted: #64748b; --ss-border: #334155; --ss-border-subtle: #1f2a3d; } /* Page background */ [data-theme="dark"] body { background: linear-gradient(180deg, #0f172a 0%, #020617 100%) !important; color: var(--ss-text-primary) !important; } /* Cards / panels */ [data-theme="dark"] .premium-card, [data-theme="dark"] .plan-card, [data-theme="dark"] .bg-white { background-color: var(--ss-bg-card) !important; border-color: var(--ss-border) !important; color: var(--ss-text-primary) !important; } [data-theme="dark"] .premium-card { border-color: var(--ss-border) !important; } /* Tailwind neutrals */ [data-theme="dark"] .bg-gray-50 { background-color: var(--ss-bg-sunken) !important; } [data-theme="dark"] .bg-gray-100 { background-color: var(--ss-bg-sunken) !important; } [data-theme="dark"] .bg-gray-200 { background-color: var(--ss-bg-elevated) !important; } [data-theme="dark"] .bg-slate-50 { background-color: var(--ss-bg-sunken) !important; } [data-theme="dark"] .bg-slate-100 { background-color: var(--ss-bg-sunken) !important; } [data-theme="dark"] .text-gray-900, [data-theme="dark"] .text-gray-800, [data-theme="dark"] .text-slate-900, [data-theme="dark"] .text-black { color: var(--ss-text-primary) !important; } [data-theme="dark"] .text-gray-700, [data-theme="dark"] .text-gray-600, [data-theme="dark"] .text-slate-700, [data-theme="dark"] .text-slate-600 { color: var(--ss-text-secondary) !important; } [data-theme="dark"] .text-gray-500, [data-theme="dark"] .text-gray-400, [data-theme="dark"] .text-slate-500 { color: var(--ss-text-muted) !important; } [data-theme="dark"] .border, [data-theme="dark"] .border-t, [data-theme="dark"] .border-r, [data-theme="dark"] .border-b, [data-theme="dark"] .border-l, [data-theme="dark"] .border-gray-200, [data-theme="dark"] .border-gray-300, [data-theme="dark"] .border-slate-200 { border-color: var(--ss-border) !important; } [data-theme="dark"] .border-gray-100, [data-theme="dark"] .border-slate-100 { border-color: var(--ss-border-subtle) !important; } /* Accent-tinted backgrounds (lightly tinted panels) — tone down */ [data-theme="dark"] .bg-blue-50 { background-color: rgba(37, 99, 235, 0.12) !important; } [data-theme="dark"] .bg-sky-50 { background-color: rgba(14, 165, 233, 0.12) !important; } [data-theme="dark"] .bg-green-50 { background-color: rgba(16, 185, 129, 0.12) !important; } [data-theme="dark"] .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.12) !important; } [data-theme="dark"] .bg-amber-50 { background-color: rgba(245, 158, 11, 0.12) !important; } [data-theme="dark"] .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.12) !important; } [data-theme="dark"] .bg-rose-50, [data-theme="dark"] .bg-red-50 { background-color: rgba(239, 68, 68, 0.12) !important; } /* Text contrast for accent-on-dark: brighten accent text so it reads on tinted card backgrounds */ [data-theme="dark"] .text-blue-700 { color: #93c5fd !important; } [data-theme="dark"] .text-blue-800 { color: #bfdbfe !important; } [data-theme="dark"] .text-blue-900, [data-theme="dark"] .text-sky-900 { color: #dbeafe !important; } [data-theme="dark"] .text-green-700 { color: #86efac !important; } [data-theme="dark"] .text-green-800 { color: #bbf7d0 !important; } [data-theme="dark"] .text-green-900, [data-theme="dark"] .text-emerald-900 { color: #dcfce7 !important; } [data-theme="dark"] .text-amber-700 { color: #fcd34d !important; } [data-theme="dark"] .text-amber-800 { color: #fde68a !important; } [data-theme="dark"] .text-amber-900, [data-theme="dark"] .text-yellow-900 { color: #fef3c7 !important; } [data-theme="dark"] .text-amber-600 { color: #fbbf24 !important; } [data-theme="dark"] .text-red-700 { color: #fca5a5 !important; } [data-theme="dark"] .text-red-800, [data-theme="dark"] .text-rose-800 { color: #fecaca !important; } [data-theme="dark"] .text-red-900, [data-theme="dark"] .text-rose-900 { color: #fee2e2 !important; } [data-theme="dark"] .text-slate-800 { color: var(--ss-text-primary) !important; } [data-theme="dark"] .bg-blue-100 { background-color: rgba(37, 99, 235, 0.18) !important; } /* Remove semi-transparent white borders that become visible on dark */ [data-theme="dark"] .premium-card { border-color: var(--ss-border) !important; } /* index.html has a global `label { color: #1e293b }` rule that becomes invisible on dark backgrounds. Force labels back to readable on dark. */ [data-theme="dark"] label { color: var(--ss-text-primary) !important; } /* Consumption grid cell inputs use hardcoded #1e293b text on #f8fafc bg */ [data-theme="dark"] #consumption_grid input.consumption-input { background: var(--ss-bg-sunken) !important; color: var(--ss-text-primary) !important; } /* Form controls */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="url"], [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: var(--ss-bg-sunken) !important; color: var(--ss-text-primary) !important; border-color: var(--ss-border) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--ss-text-muted) !important; } [data-theme="dark"] input[type="checkbox"], [data-theme="dark"] input[type="radio"] { accent-color: #3b82f6; } /* Tables */ [data-theme="dark"] table { color: var(--ss-text-primary) !important; } [data-theme="dark"] thead, [data-theme="dark"] th { background-color: var(--ss-bg-elevated) !important; color: var(--ss-text-secondary) !important; } [data-theme="dark"] tr { border-color: var(--ss-border) !important; } [data-theme="dark"] tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.02) !important; } /* Links (keep brand blue but slightly brighter) */ [data-theme="dark"] a { color: #60a5fa; } [data-theme="dark"] a:hover { color: #93c5fd; } /* Floating theme toggle button */ .ss-theme-toggle { position: fixed; bottom: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(30, 41, 59, 0.85); color: #fbbf24; font-size: 20px; cursor: pointer; z-index: 9998; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; transition: transform 0.15s ease, background 0.15s ease; } .ss-theme-toggle:hover { transform: scale(1.08); } [data-theme="dark"] .ss-theme-toggle { background: rgba(203, 213, 225, 0.9); color: #1e293b; } /* Hide PRO badges when the user has pro (badge toggled via class) */ html.user-is-pro .pro-badge, html.user-is-pro .plan-badge.pro { display: none !important; }