add some color values + remove ones i can't find lol

src/components/ColorChanger.module.css

@@ -1,4 +1,4 @@
-.color-changer {
+.colorChanger {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -9,6 +9,6 @@
   transition: opacity 0.25s ease-in-out;
 }
 
-.color-changer:hover {
+.colorChanger:hover {
   opacity: 100%;
 }

src/components/ColorChanger.tsx

@@ -21,6 +21,7 @@ type ColorScheme = {
 
 const colors: ColorScheme[] = [
   {
+    // https://monokai.pro
     name: "Monokai Pro",
     bg: "#2d2a2e",
     bgDark: "#403e41",
@@ -32,46 +33,46 @@ const colors: ColorScheme[] = [
     warning: "#ffd866"
   },
   {
+    // https://github.com/morhetz/gruvbox
     name: "Gruvbox Dark",
     bg: "#282828",
     bgDark: "#3c3836",
+    bgDarker: "#1d2021",
     fg: "#ebdbb2",
-    fgDark: "#a89984"
+    fgDark: "#a89984",
+    fgDarker: "#928374",
+    error: "#fb4934",
+    warning: "#fabd2f"
   },
   {
-    name: "Amora",
+    // https://github.com/owozsh/amora
+    name: "Amora Focus",
     bg: "#1a1a1a",
     bgDark: "#171717",
+    bgDarker: "#141414",
     fg: "#DEDBEB",
-    fgDark: "#5c5c5c"
+    fgDark: "#5c5c5c",
-  },
+    fgDarker: "#292929"
-  {
-    name: "Amora Focus",
-    bg: "#302838",
-    bgDark: "#2a2331",
-    fg: "#dedbeb",
-    fgDark: "#5c5c5c"
   },
   {
+    // https://rosepinetheme.com/palette
     name: "Rosé Pine",
     bg: "#191724",
     bgDark: "#26233a",
+    bgDarker: "#1f1d2e",
     fg: "#e0def4",
-    fgDark: "#908caa"
+    fgDark: "#908caa",
-  },
+    fgDarker: "#6e6a86"
-  {
-    name: "Rosé Pine Moon",
-    bg: "#232136",
-    bgDark: "#393552",
-    fg: "#e0def4",
-    fgDark: "#908caa"
   },
   {
+    // https://www.nordtheme.com/docs/colors-and-palettes
     name: "Nord",
     bg: "#2e3440",
     bgDark: "#3b4252",
+    bgDarker: "#2E3440",
     fg: "#eceff4",
-    fgDark: "#d8dee9"
+    fgDark: "#d8dee9",
+    fgDarker: "#E5E9F0"
   },
   {
     name: "lovelace",
@@ -112,8 +113,36 @@ const colors: ColorScheme[] = [
 
 const fallback = colors[0];
 
+function getFromLocalStorage() {
+  let color = localStorage.getItem("colorscheme");
+  if (!color) localStorage.setItem("colorscheme", fallback.name);
+  return color ?? fallback.name;
+}
+
+function set(colorScheme: ColorScheme) {
+  const fixedColors = {
+    "--bg": colorScheme.bg,
+    "--bg-dark": colorScheme.bgDark,
+    "--fg": colorScheme.fg,
+    "--fg-dark": colorScheme.fgDark,
+    "--error": colorScheme.error ?? fallback.error!,
+    "--warning": colorScheme.warning ?? fallback.warning!
+  };
+
+  for (const [k, v] of Object.entries(fixedColors)) {
+    document.documentElement.style.setProperty(k, v);
+  }
+}
+
 export default function ColorChanger() {
-  const [current, setCurrent] = React.useState<string>("Monokai Pro");
+  const [current, setCurrent] = React.useState<string>(fallback.name);
+
+  // this is a FOUC, but it's fine, right? right?
+  React.useEffect(() => {
+    const color = getFromLocalStorage();
+    setCurrent(color);
+    set(colors.find((x) => x.name === color)!);
+  }, []);
 
   return (
     <Image
@@ -127,22 +156,11 @@ export default function ColorChanger() {
         const idx = Math.floor(Math.random() * pool.length);
         const colorScheme = pool[idx];
 
-        const fixedColors = {
+        set(colorScheme);
-          "--bg": colorScheme.bg,
-          "--bg-dark": colorScheme.bgDark,
-          "--fg": colorScheme.fg,
-          "--fg-dark": colorScheme.fgDark,
-          "--error": colorScheme.error ?? fallback.error!,
-          "--warning": colorScheme.warning ?? fallback.warning!
-        };
-
-        for (const [k, v] of Object.entries(fixedColors)) {
-          document.documentElement.style.setProperty(k, v);
-        }
-
         setCurrent(colorScheme.name);
+        localStorage.setItem("colorscheme", colorScheme.name);
       }}
-      className={styles["color-changer"]}
+      className={styles["colorChanger"]}
     />
   );
 }