/* * 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 ---------- We use [class*="bg-white/"] as a catch-all so ANY opacity variant (`bg-white/60`, `/70`, `/75`, `/80`, `/90`, etc.) goes dark in one sweep. Tailwind generates a separate class for each opacity step, and the storefront uses several (header is /75, brand marquee is /60) — listing each one is brittle, the substring selector covers all of them. */ html.dark .bg-white { background-color: #1a1a2e !important; } html.dark [class*="bg-white/"] { 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 [class*="bg-ink-50/"] { background-color: rgba(20, 20, 43, 0.5) !important; } html.dark [class*="bg-ink-100/"] { background-color: rgba(31, 31, 58, 0.6) !important; } /* ---------- Gradients ---------- Tailwind gradients (`bg-gradient-to-b`, `bg-gradient-to-br`, etc.) use CSS custom properties internally — `--tw-gradient-from` and `--tw-gradient-to`. Overriding `background-color` doesn't touch them. The testimonials section uses `from-ink-50 to-white`; below we remap those stops so the gradient itself goes dark instead of staying light. The `--tw-gradient-stops` reset is needed because Tailwind's `from-*` utilities also write to it; without resetting we'd inherit the light-theme stop list. */ html.dark .from-ink-50 { --tw-gradient-from: #14142b var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(20, 20, 43, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } html.dark .from-ink-100 { --tw-gradient-from: #1f1f3a var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(31, 31, 58, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } html.dark .to-white { --tw-gradient-to: #1a1a2e var(--tw-gradient-to-position) !important; } html.dark .to-ink-50 { --tw-gradient-to: #14142b var(--tw-gradient-to-position) !important; } html.dark .to-ink-100 { --tw-gradient-to: #1f1f3a var(--tw-gradient-to-position) !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; } html.dark .text-ink-800 { color: #d8d8e6 !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; }