feat: persist complete multitheme palettes

src/app/admin/theme/page.tsx

@@ -53,7 +53,7 @@ function toHex(value: string | null, def: string): string {
   return value && /^#[0-9a-fA-F]{6}$/.test(value) ? value : def;
 }
 
-function colorGrid(fields: { key: string; label: string; def: string }[], current: Record<string, string>) {
+function colorGrid(fields: { key: string; label: string; def: string }[], current: Record<string, string>, suffix = "") {
   return (
     <div
       style={{
@@ -66,7 +66,7 @@ function colorGrid(fields: { key: string; label: string; def: string }[], curren
         <label key={f.key} style={{ display: "flex", alignItems: "center", gap: "0.6rem" }}>
           <input
             type="color"
-            name={f.key}
+            name={`${f.key}${suffix}`}
             defaultValue={toHex(current[f.key], f.def)}
             style={{ width: 40, height: 30, padding: 0, border: "none", background: "none" }}
           />
@@ -91,6 +91,15 @@ export default async function AdminTheme({
       ALL_COLORS.map(async (f) => [f.key, (await siteSettings.get(f.key, f.def)) ?? f.def] as const),
     ),
   ) as Record<string, string>;
+  const defaultPreset = PRESETS["Atom (golden)"];
+  const currentDark = Object.fromEntries(
+    await Promise.all(
+      ALL_COLORS.map(async (f) => [
+        f.key,
+        (await siteSettings.get(`${f.key}_dark`, defaultPreset.dark[f.key as keyof typeof defaultPreset.dark])) ?? defaultPreset.dark[f.key as keyof typeof defaultPreset.dark],
+      ] as const),
+    ),
+  ) as Record<string, string>;
   const radius = (await siteSettings.get("border_radius", "12")) ?? "12";
   const fontKey = (await siteSettings.get("font_family", "nunito")) ?? "nunito";
   const headings = Object.fromEntries(
@@ -141,7 +150,7 @@ export default async function AdminTheme({
                         height: 14,
                         borderRadius: 3,
                         // eslint-disable-next-line security/detect-object-injection -- k from hardcoded array
-                        background: palette[k],
+                        background: palette.light[k as keyof typeof palette.light],
                         boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.15)",
                         marginLeft: -3,
                       }}
@@ -156,6 +165,7 @@ export default async function AdminTheme({
       </section>
 
       <form action={saveTheme}>
+        <h2 className="mt-6 text-lg font-extrabold">Light mode</h2>
         <section className="mt-6">
           <h2 className="admin-section-title">{t("colours")}</h2>
           <div className="admin-card">{colorGrid(COLOR_FIELDS, current)}</div>
@@ -174,6 +184,20 @@ export default async function AdminTheme({
           <div className="admin-card">{colorGrid(GRADIENT_FIELDS, current)}</div>
         </section>
 
+        <h2 className="mt-8 text-lg font-extrabold">Dark mode</h2>
+        <section className="mt-4">
+          <h3 className="admin-section-title">{t("colours")}</h3>
+          <div className="admin-card">{colorGrid(COLOR_FIELDS, currentDark, "_dark")}</div>
+        </section>
+        <section className="mt-6">
+          <h3 className="admin-section-title">{t("buttonsLinks")}</h3>
+          <div className="admin-card">{colorGrid(BUTTON_FIELDS, currentDark, "_dark")}</div>
+        </section>
+        <section className="mt-6">
+          <h3 className="admin-section-title">Gradient mix</h3>
+          <div className="admin-card">{colorGrid(GRADIENT_FIELDS, currentDark, "_dark")}</div>
+        </section>
+
         <section className="mt-6">
           <h2 className="admin-section-title">{t("typographyLayout")}</h2>
           <div className="admin-card">