simoleo89
1199176883
- 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.
109 lines
3.1 KiB
TypeScript
109 lines
3.1 KiB
TypeScript
// 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",
|
|
},
|
|
};
|