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:
1 parent
6f15e0c8a3
commit
1199176883
6 files changed
+322
-10
No files matched your search
@@ -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",
|
||||
},
|
||||
};
|
||||
Reference in new issue
Block a user