feat: generate preset-aware dark theme variables

src/components/theme-vars.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { themePaletteCss } from "@/lib/theme-css";
+import { PRESETS } from "@/lib/theme-presets";
+
+describe("themePaletteCss", () => {
+  it("emits separate preset-specific light and dark scopes", () => {
+    const ocean = PRESETS.Ocean;
+    const css = `${themePaletteCss(":root", ocean.light)}${themePaletteCss("html.dark", ocean.dark)}`;
+
+    expect(css).toContain(":root{");
+    expect(css).toContain("html.dark{");
+    expect(css).toContain(`--color-primary:${ocean.light.color_primary}`);
+    expect(css).toContain(`--color-background:${ocean.light.color_background}`);
+    expect(css).toContain(`--color-background:${ocean.dark.color_background}`);
+    expect(ocean.dark.color_primary).toBe(ocean.light.color_primary);
+  });
+});

src/components/theme-vars.tsx

@@ -1,5 +1,6 @@
 import { siteSettings } from "@/lib/services/site-settings";
-import { FONTS } from "@/lib/theme-presets";
+import { themePaletteCss } from "@/lib/theme-css";
+import { FONTS, PRESETS, THEME_COLOR_KEYS, type ThemePalette } from "@/lib/theme-presets";
 import { derivePublicForegrounds, readableColor } from "@/lib/theme-contrast";
 
 // Injects the DB-driven CSS custom properties into :root, exactly like
@@ -124,6 +125,18 @@ export async function ThemeVars() {
 
   const font = FONTS[fontKey ?? "nunito"] ?? FONTS.nunito;
 
+  const presetName = (await g("theme_preset", "Atom (golden)")) ?? "Atom (golden)";
+  const preset = PRESETS[presetName] ?? PRESETS["Atom (golden)"];
+  const darkPalette = Object.fromEntries(
+    await Promise.all(
+      THEME_COLOR_KEYS.map(async (key) => [
+        key,
+        safe(await g(`${key}_dark`, preset.dark[key]), preset.dark[key]),
+      ] as const),
+    ),
+  ) as ThemePalette;
+  const darkCss = themePaletteCss("html.dark", darkPalette);
+
   const css = `:root{
 --color-primary:${safe(primary, "#f59e0b")};
 --color-background:${safeBackground};
@@ -174,7 +187,7 @@ export async function ThemeVars() {
 --size-heading-h1:${px(h1, "30")}px;
 --size-heading-h2:${px(h2, "22")}px;
 --size-heading-h3:${px(h3, "18")}px;
-}`;
+}${darkCss}`;
 
   const googleHref = font.google
     ? `https://fonts.googleapis.com/css2?family=${font.google}&display=swap`