fix: reset theme to default if unknown theme is detected

sunaurus · Mar 31, 2024 · 7dec24d · 7dec24d
1 parent ab365d2
commit 7dec24d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/src/app/(theme)/themes.ts b/src/app/(theme)/themes.ts
@@ -1,8 +1,6 @@
-export type ThemeName = "red" | "green" | "blue";
-
 export const THEME_COOKIE_NAME = "theme";
 
-export const themes: Record<ThemeName, Theme> = {
+export const themes: Record<"red" | "green" | "blue", Theme> = {
   red: {
     "--color-primary-50": "250 246 246",
     "--color-primary-100": "246 237 237",
@@ -44,6 +42,10 @@ export const themes: Record<ThemeName, Theme> = {
   },
 };
 
+export type ThemeName = keyof typeof themes;
+
+export const availableThemes = Object.keys(themes) as ThemeName[];
+
 type Theme = {
   "--color-primary-50": string;
   "--color-primary-100": string;

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -8,7 +8,11 @@ import { ReactNode } from "react";
 import { StyledLink } from "@/app/(ui)/StyledLink";
 import { TopLoader } from "@/app/(ui)/TopLoader";
 import { ThemePicker } from "@/app/(theme)/ThemePicker";
-import { THEME_COOKIE_NAME, ThemeName } from "@/app/(theme)/themes";
+import {
+  availableThemes,
+  THEME_COOKIE_NAME,
+  ThemeName,
+} from "@/app/(theme)/themes";
 import { cookies } from "next/headers";
 
 export const generateMetadata = async (): Promise<Metadata> => {
@@ -97,8 +101,13 @@ const RootLayout = (props: Props) => {
 
 const Footer = async () => {
   const site = await apiClient.getSite();
-  const themeName =
-    (cookies().get(THEME_COOKIE_NAME)?.value as ThemeName) ?? "blue";
+  let themeName = cookies().get(THEME_COOKIE_NAME)?.value as
+    | ThemeName
+    | undefined;
+
+  if (!themeName || !availableThemes.includes(themeName)) {
+    themeName = "blue";
+  }
 
   return (
     <footer