Add Theme Settings tool + polish remaining radio detail pages

- New /admin/theme: recolour the whole site from housekeeping. 6 atom-
  faithful presets (Atom/Midnight/Ocean/Forest/Sunset/Candy) + per-colour
  pickers for the 12 settings ThemeVars injects + border radius. Writes to
  website_settings, busts the siteSettings cache, and revalidates the
  layout so the new palette applies live with no rebuild. Constants live
  in src/lib/theme-presets.ts (a "use server" file can't export objects).
  Added to the admin sidebar (System).
- radio/contests/[id] + giveaways/[id] wrapped in ContentCard to match
  the public design system.
- Skipped a separate VPN page: /admin/ip already manages the IP
  white/blacklist, so it would only duplicate it.

Verified live (prod, amx_test): applied the Ocean preset → home renders
--color-primary #0ea5e9 site-wide; reverted the test rows. tsc 0,
vitest 49/49, next build 0.
This commit is contained in:
Simo committed 2026-06-28 20:20:38 +02:00
1 parent 6f15e0c8a3
commit 1199176883
6 files changed
+322 -10

No files matched your search

+108
View File
@@ -0,0 +1,108 @@
// Theme constants shared by the admin Theme page and its server action. Kept in
// a plain module because a "use server" file may only export async functions.
// The colour settings ThemeVars injects into :root. Editing these recolours the
// whole site live (ThemeVars reads them on every request).
export const THEME_COLOR_KEYS = [
"color_primary",
"color_background",
"color_surface",
"color_dropdown",
"color_navbar",
"color_navbar_text",
"color_text",
"color_text_muted",
"color_accent",
"button_primary_color",
"button_text_color",
"border_color",
] as const;
// Curated palettes (faithful to the atom theme presets). Each is a full set of
// the colour keys above so applying one fully reskins the site.
export const PRESETS: Record<string, Record<string, string>> = {
"Atom (golden)": {
color_primary: "#f59e0b",
color_background: "#f8fafc",
color_surface: "#ffffff",
color_dropdown: "#ffffff",
color_navbar: "#ffffff",
color_navbar_text: "#1e293b",
color_text: "#0f172a",
color_text_muted: "#64748b",
color_accent: "#10b981",
button_primary_color: "#f59e0b",
button_text_color: "#1e293b",
border_color: "#eeb425",
},
Midnight: {
color_primary: "#eeb425",
color_background: "#0f1117",
color_surface: "#171a21",
color_dropdown: "#1f242d",
color_navbar: "#171a21",
color_navbar_text: "#e5e7eb",
color_text: "#e5e7eb",
color_text_muted: "#9ca3af",
color_accent: "#22c55e",
button_primary_color: "#eeb425",
button_text_color: "#1a1a2e",
border_color: "#eeb425",
},
Ocean: {
color_primary: "#0ea5e9",
color_background: "#f0f9ff",
color_surface: "#ffffff",
color_dropdown: "#ffffff",
color_navbar: "#ffffff",
color_navbar_text: "#0c4a6e",
color_text: "#082f49",
color_text_muted: "#64748b",
color_accent: "#14b8a6",
button_primary_color: "#0ea5e9",
button_text_color: "#ffffff",
border_color: "#38bdf8",
},
Forest: {
color_primary: "#16a34a",
color_background: "#f3faf4",
color_surface: "#ffffff",
color_dropdown: "#ffffff",
color_navbar: "#ffffff",
color_navbar_text: "#14532d",
color_text: "#052e16",
color_text_muted: "#5f6b63",
color_accent: "#84cc16",
button_primary_color: "#16a34a",
button_text_color: "#ffffff",
border_color: "#22c55e",
},
Sunset: {
color_primary: "#f97316",
color_background: "#fff7ed",
color_surface: "#ffffff",
color_dropdown: "#ffffff",
color_navbar: "#ffffff",
color_navbar_text: "#7c2d12",
color_text: "#431407",
color_text_muted: "#78716c",
color_accent: "#ec4899",
button_primary_color: "#f97316",
button_text_color: "#ffffff",
border_color: "#fb923c",
},
Candy: {
color_primary: "#ec4899",
color_background: "#fdf2f8",
color_surface: "#ffffff",
color_dropdown: "#ffffff",
color_navbar: "#ffffff",
color_navbar_text: "#831843",
color_text: "#500724",
color_text_muted: "#9d6b80",
color_accent: "#a855f7",
button_primary_color: "#ec4899",
button_text_color: "#ffffff",
border_color: "#f472b6",
},
};