/* * Nova / Digistorax — dark-mode color overlay. * * Strategy: keep the existing light theme intact and only ADD rules that * fire when has class="dark" (set synchronously by js/theme.js). * We target the Tailwind utility classes the storefront actually uses * — body / .bg-white / .bg-ink-50 / etc. — so we don't have to retouch * every component. * * Brand color stays the same in both themes (purple still reads well on * both light and dark surfaces). Images, gradients, and product cards * are intentionally not inverted. * * If a component looks wrong in dark mode, fix it here with a more * specific selector instead of editing the component's HTML. */ html.dark { color-scheme: dark; background: #0e0e1a; } html.dark body { background: #0e0e1a; color: #eeeef5; } /* ---------- Surfaces ---------- */ html.dark .bg-white { background-color: #1a1a2e !important; } html.dark .bg-white\/80 { background-color: rgba(26, 26, 46, 0.85) !important; } html.dark .bg-ink-50 { background-color: #14142b !important; } html.dark .bg-ink-100 { background-color: #1f1f3a !important; } html.dark .bg-ink-50\/50 { background-color: rgba(20, 20, 43, 0.5) !important; } /* ---------- Borders ---------- */ html.dark .border-ink-100 { border-color: #28284a !important; } html.dark .border-ink-200 { border-color: #34345a !important; } html.dark .border-ink-100\/60 { border-color: rgba(40, 40, 74, 0.6) !important; } html.dark .divide-ink-100 > * + * { border-color: #28284a !important; } /* ---------- Text ---------- */ html.dark .text-ink-900 { color: #eeeef5 !important; } html.dark .text-ink-700 { color: #d8d8e6 !important; } html.dark .text-ink-600 { color: #b4b4cc !important; } html.dark .text-ink-500 { color: #9090a8 !important; } html.dark .text-ink-400 { color: #7a7a98 !important; } html.dark .text-ink-300 { color: #5a5a78 !important; } /* Headings + bold labels — keep them crisp on dark surfaces */ html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark .font-black, html.dark .font-extrabold { color: #eeeef5; } /* ---------- Inputs / form controls ---------- */ html.dark input, html.dark select, html.dark textarea { background-color: #14142b !important; border-color: #34345a !important; color: #eeeef5; } html.dark input::placeholder, html.dark textarea::placeholder { color: #6a6a88; } html.dark input:focus, html.dark select:focus, html.dark textarea:focus { border-color: #7c4dff !important; } /* ---------- Code / pre ---------- */ html.dark code { background: #28284a; color: #eeeef5; } html.dark pre { background: #0a0a18; color: #eeeef5; } /* ---------- Mesh / hero gradient backdrops ---------- The storefront uses a soft .mesh-bg behind hero sections; in dark mode the radial gradients clip too brightly so we tone them down. */ html.dark .mesh-bg { background: radial-gradient(800px 400px at 10% -10%, rgba(124, 77, 255, 0.18), transparent 60%), radial-gradient(700px 350px at 90% 0%, rgba(56, 189, 248, 0.10), transparent 60%), #0e0e1a !important; } /* ---------- Cart drawer line items ---------- Drawer rows use bg-ink-50 — already covered above. The cart total chip and remove button text need a tiny bump of contrast. */ html.dark .text-rose-500 { color: #ff8da4 !important; } html.dark .text-emerald-700 { color: #6fe5b6 !important; } /* ---------- Blog prose body ---------- blog.html ships its own .blog-prose rules with hardcoded ink colors; override in dark mode so the article body stays readable. */ html.dark .blog-prose p, html.dark .blog-prose ul, html.dark .blog-prose ol { color: #d8d8e6; } html.dark .blog-prose blockquote { color: #b4b4cc; border-left-color: #34345a; } html.dark .blog-prose code { background: #28284a; } /* ---------- Theme toggle button ---------- The icon swaps via [data-icon] attributes, but the colors we want the click target itself to glow up slightly in dark. */ html.dark .theme-toggle:hover { background-color: #28284a !important; }