fix: revert to default theme if saved theme is invalid

CHANGELOG.md

@@ -1,16 +0,0 @@
-# v0.0.13
-
-## Features
-
-## Enhancements
-- Track durations will now be updated using MusicBrainz data where possible, if the duration was not provided by the request. (#27)
-- You can now search and merge items by their ID! Just preface the id with `id:`. E.g. `id:123` (#26)
-- Hovering over any "hours listened" statistic will now also show the minutes listened.
-- An experiemental ARM docker image has been added. (#51)
-
-## Fixes
-- Navigating from one page directly to another and then changing the image via drag-and-drop now works as expected. (#25)
-- Fixed a bug that caused updated usernames with uppercase letters to create login failures.
-
-## Updates
-- Migrations are now embedded to allow for a community AUR package. (#37)

client/app/providers/ThemeProvider.tsx

@@ -53,7 +53,9 @@ function getStoredCustomTheme(): Theme | undefined {
 export function ThemeProvider({ children }: { children: ReactNode }) {
   let defaultTheme = useAppContext().defaultTheme;
   let initialTheme = localStorage.getItem("theme") ?? defaultTheme;
-  const [themeName, setThemeName] = useState(initialTheme);
+  const [themeName, setThemeName] = useState(
+    themes[initialTheme] ? initialTheme : defaultTheme
+  );
   const [currentTheme, setCurrentTheme] = useState<Theme>(() => {
     if (initialTheme === "custom") {
       const customTheme = getStoredCustomTheme();
@@ -78,6 +80,8 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
       if (foundTheme) {
         localStorage.setItem("theme", newThemeName);
         setCurrentTheme(foundTheme);
+      } else {
+        setTheme(defaultTheme);
       }
     }
   };

client/app/styles/themes.css.ts

@@ -1,26 +1,24 @@
-import { globalStyle } from "@vanilla-extract/css"
-import { themeVars } from "./vars.css"
+import { globalStyle } from "@vanilla-extract/css";
+import { themeVars } from "./vars.css";
 
 export type Theme = {
-    bg: string
-    bgSecondary: string
-    bgTertiary: string
-    fg: string
-    fgSecondary: string
-    fgTertiary: string
-    primary: string
-    primaryDim: string
-    accent: string
-    accentDim: string
-    error: string
-    warning: string
-    info: string
-    success: string
-}
+  bg: string;
+  bgSecondary: string;
+  bgTertiary: string;
+  fg: string;
+  fgSecondary: string;
+  fgTertiary: string;
+  primary: string;
+  primaryDim: string;
+  accent: string;
+  accentDim: string;
+  error: string;
+  warning: string;
+  info: string;
+  success: string;
+};
 
-export const THEME_KEYS = [
-    '--color'
-]
+export const THEME_KEYS = ["--color"];
 
 export const themes: Record<string, Theme> = {
   yuu: {
@@ -151,21 +149,21 @@ export const themes: Record<string, Theme> = {
     success: "#28A745",
     info: "#17A2B8",
   },
-    asuka: {
-        bg: "#3B1212",
-        bgSecondary: "#471B1B",
-        bgTertiary: "#020202",
-        fg: "#F1E9E6",
-        fgSecondary: "#CCB6AE",
-        fgTertiary: "#9F8176",
-        primary: "#F1E9E6",
-        primaryDim: "#CCB6AE",
-        accent: "#41CE41",
-        accentDim: "#3BA03B",
-        error: "#DC143C",
-        warning: "#FFD700",
-        success: "#32CD32",
-        info: "#1E90FF",
+  rosebud: {
+    bg: "#260d19",
+    bgSecondary: "#3A1325",
+    bgTertiary: "#45182D",
+    fg: "#F3CAD8",
+    fgSecondary: "#C88B99",
+    fgTertiary: "#B2677D",
+    primary: "#d76fa2",
+    primaryDim: "#b06687",
+    accent: "#e79cb8",
+    accentDim: "#c27d8c",
+    error: "#e84b73",
+    warning: "#f2b38c",
+    success: "#6FC4A6",
+    info: "#6BAEDC",
   },
   urim: {
     bg: "#101713",
@@ -214,13 +212,13 @@ export const themes: Record<string, Theme> = {
     warning: "#FFC107",
     success: "#28A745",
     info: "#17A2B8",
-    }
+  },
 };
 
-export default themes
+export default themes;
 
 Object.entries(themes).forEach(([name, theme]) => {
-    const selector = `[data-theme="${name}"]`
+  const selector = `[data-theme="${name}"]`;
 
   globalStyle(selector, {
     vars: {
@@ -238,6 +236,6 @@ Object.entries(themes).forEach(([name, theme]) => {
       [themeVars.warning]: theme.warning,
       [themeVars.success]: theme.success,
       [themeVars.info]: theme.info,
-        }
-    })
-})
+    },
+  });
+});