From ccd04390a3cdab0122b604defae1d3dc1f246ca8 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Wed, 14 Jan 2026 22:52:07 +0100
Subject: [PATCH 01/51] the big rename

---
 frontend/src/ts/commandline/commandline.ts    |   10 +-
 frontend/src/ts/commandline/lists/themes.ts   |   10 +-
 frontend/src/ts/constants/themes.ts           | 1514 +++++++++--------
 .../src/ts/controllers/theme-controller.ts    |   10 +-
 .../src/ts/elements/settings/theme-picker.ts  |   38 +-
 frontend/static/themes/dots.css               |   13 -
 6 files changed, 788 insertions(+), 807 deletions(-)

diff --git a/frontend/src/ts/commandline/commandline.ts b/frontend/src/ts/commandline/commandline.ts
index ebd41a7fabee..7ff92dffa98f 100644
--- a/frontend/src/ts/commandline/commandline.ts
+++ b/frontend/src/ts/commandline/commandline.ts
@@ -531,16 +531,16 @@ async function showCommands(): Promise<void> {
         <i class="fas fa-star"></i>
       </div>
       <div class="themeBubbles" style="background: ${
-        command.customData["bgColor"]
-      };outline: 0.25rem solid ${command.customData["bgColor"]};">
+        command.customData["bg"]
+      };outline: 0.25rem solid ${command.customData["bg"]};">
         <div class="themeBubble" style="background: ${
-          command.customData["mainColor"]
+          command.customData["main"]
         }"></div>
         <div class="themeBubble" style="background: ${
-          command.customData["subColor"]
+          command.customData["sub"]
         }"></div>
         <div class="themeBubble" style="background: ${
-          command.customData["textColor"]
+          command.customData["text"]
         }"></div>
       </div>
       </div>`;
diff --git a/frontend/src/ts/commandline/lists/themes.ts b/frontend/src/ts/commandline/lists/themes.ts
index 1300b1356b02..3d6f4b152e3f 100644
--- a/frontend/src/ts/commandline/lists/themes.ts
+++ b/frontend/src/ts/commandline/lists/themes.ts
@@ -20,12 +20,12 @@ const createThemeCommand = (theme: Theme): Command => {
     id: "changeTheme" + capitalizeFirstLetterOfEachWord(theme.name),
     display: theme.name.replace(/_/g, " "),
     configValue: theme.name,
-    // customStyle: `color:${theme.mainColor};background:${theme.bgColor};`,
+    // customStyle: `color:${theme.main};background:${theme.bg};`,
     customData: {
-      mainColor: theme.mainColor,
-      bgColor: theme.bgColor,
-      subColor: theme.subColor,
-      textColor: theme.textColor,
+      main: theme.main,
+      bg: theme.bg,
+      sub: theme.sub,
+      text: theme.text,
       isFavorite: isFavorite(theme),
     },
     hover: (): void => {
diff --git a/frontend/src/ts/constants/themes.ts b/frontend/src/ts/constants/themes.ts
index 9a67df9430de..cc82a58a7687 100644
--- a/frontend/src/ts/constants/themes.ts
+++ b/frontend/src/ts/constants/themes.ts
@@ -1,1136 +1,1140 @@
 import { ThemeName } from "@monkeytype/schemas/configs";
 import { hexToHSL } from "../utils/colors";
+import { ThemeColors } from "../signals/theme";
 
 export type Theme = {
   name: ThemeName;
-  bgColor: string;
-  mainColor: string;
-  subColor: string;
-  textColor: string;
-};
+} & Pick<ThemeColors, "bg" | "main" | "sub" | "text"> &
+  Partial<Omit<ThemeColors, "bg" | "main" | "sub" | "text">>;
 
 export const themes: Record<ThemeName, Omit<Theme, "name">> = {
   "8008": {
-    bgColor: "#333a45",
-    mainColor: "#f44c7f",
-    subColor: "#939eae",
-    textColor: "#e9ecf0",
+    bg: "#333a45",
+    main: "#f44c7f",
+    sub: "#939eae",
+    text: "#e9ecf0",
   },
   "9009": {
-    bgColor: "#eeebe2",
-    mainColor: "#080909",
-    subColor: "#99947f",
-    textColor: "#080909",
+    bg: "#eeebe2",
+    main: "#080909",
+    sub: "#99947f",
+    text: "#080909",
   },
   dark_note: {
-    bgColor: "#1f1f1f",
-    mainColor: "#f2c17b",
-    subColor: "#768f95",
-    textColor: "#d2dff4",
+    bg: "#1f1f1f",
+    main: "#f2c17b",
+    sub: "#768f95",
+    text: "#d2dff4",
   },
   viridescent: {
-    bgColor: "#2c3333",
-    mainColor: "#95d5b2",
-    subColor: "#84a98c",
-    textColor: "#e9f5db",
+    bg: "#2c3333",
+    main: "#95d5b2",
+    sub: "#84a98c",
+    text: "#e9f5db",
   },
   dark: {
-    bgColor: "#111",
-    mainColor: "#eee",
-    subColor: "#444",
-    textColor: "#eee",
+    bg: "#111",
+    main: "#eee",
+    sub: "#444",
+    text: "#eee",
   },
   phantom: {
-    bgColor: "#1a1b26",
-    mainColor: "#7aa2f7",
-    subColor: "#414868",
-    textColor: "#c0caf5",
+    bg: "#1a1b26",
+    main: "#7aa2f7",
+    sub: "#414868",
+    text: "#c0caf5",
   },
   muted: {
-    bgColor: "#525252",
-    mainColor: "#c5b4e3",
-    subColor: "#939eae",
-    textColor: "#b1e4e3",
+    bg: "#525252",
+    main: "#c5b4e3",
+    sub: "#939eae",
+    text: "#b1e4e3",
   },
   dark_magic_girl: {
-    bgColor: "#091f2c",
-    mainColor: "#f5b1cc",
-    subColor: "#93e8d3",
-    textColor: "#a288d9",
+    bg: "#091f2c",
+    main: "#f5b1cc",
+    sub: "#93e8d3",
+    text: "#a288d9",
   },
   carbon: {
-    bgColor: "#313131",
-    mainColor: "#f66e0d",
-    subColor: "#616161",
-    textColor: "#f5e6c8",
+    bg: "#313131",
+    main: "#f66e0d",
+    sub: "#616161",
+    text: "#f5e6c8",
   },
   vesper: {
-    bgColor: "#101010",
-    mainColor: "#ffc799",
-    subColor: "#99ffe4",
-    textColor: "#ffffff",
+    bg: "#101010",
+    main: "#ffc799",
+    sub: "#99ffe4",
+    text: "#ffffff",
   },
   our_theme: {
-    bgColor: "#ce1226",
-    mainColor: "#fcd116",
-    subColor: "#6d0f19",
-    textColor: "#ffffff",
+    bg: "#ce1226",
+    main: "#fcd116",
+    sub: "#6d0f19",
+    text: "#ffffff",
   },
   dots: {
-    bgColor: "#121520",
-    mainColor: "#fff",
-    subColor: "#676e8a",
-    textColor: "#fff",
+    bg: " #121520",
+    caret: " #fff",
+    main: " #fff",
+    sub: " #676e8a",
+    subAlt: " #1b1e2c",
+    text: " #fff",
+    error: " #da3333",
+    errorExtra: " #791717",
+    colorfulError: " #da3333",
+    colorfulErrorExtra: " #791717",
   },
   nautilus: {
-    bgColor: "#132237",
-    mainColor: "#ebb723",
-    subColor: "#0b4c6c",
-    textColor: "#1cbaac",
+    bg: "#132237",
+    main: "#ebb723",
+    sub: "#0b4c6c",
+    text: "#1cbaac",
   },
   serika: {
-    bgColor: "#e1e1e3",
-    mainColor: "#e2b714",
-    subColor: "#aaaeb3",
-    textColor: "#323437",
+    bg: "#e1e1e3",
+    main: "#e2b714",
+    sub: "#aaaeb3",
+    text: "#323437",
   },
   serika_dark: {
-    bgColor: "#323437",
-    mainColor: "#e2b714",
-    subColor: "#646669",
-    textColor: "#d1d0c5",
+    bg: "#323437",
+    main: "#e2b714",
+    sub: "#646669",
+    text: "#d1d0c5",
   },
   bushido: {
-    bgColor: "#242933",
-    mainColor: "#ec4c56",
-    subColor: "#596172",
-    textColor: "#f6f0e9",
+    bg: "#242933",
+    main: "#ec4c56",
+    sub: "#596172",
+    text: "#f6f0e9",
   },
   red_samurai: {
-    bgColor: "#84202c",
-    mainColor: "#c79e6e",
-    subColor: "#55131b",
-    textColor: "#e2dad0",
+    bg: "#84202c",
+    main: "#c79e6e",
+    sub: "#55131b",
+    text: "#e2dad0",
   },
   rgb: {
-    bgColor: "#111",
-    mainColor: "#eee",
-    subColor: "#444",
-    textColor: "#eee",
+    bg: "#111",
+    main: "#eee",
+    sub: "#444",
+    text: "#eee",
   },
   oblivion: {
-    bgColor: "#313231",
-    mainColor: "#a5a096",
-    subColor: "#5d6263",
-    textColor: "#f7f5f1",
+    bg: "#313231",
+    main: "#a5a096",
+    sub: "#5d6263",
+    text: "#f7f5f1",
   },
   magic_girl: {
-    bgColor: "#ffffff",
-    mainColor: "#f5b1cc",
-    subColor: "#93e8d3",
-    textColor: "#00ac8c",
+    bg: "#ffffff",
+    main: "#f5b1cc",
+    sub: "#93e8d3",
+    text: "#00ac8c",
   },
   metropolis: {
-    bgColor: "#0f1f2c",
-    mainColor: "#56c3b7",
-    subColor: "#326984",
-    textColor: "#e4edf1",
+    bg: "#0f1f2c",
+    main: "#56c3b7",
+    sub: "#326984",
+    text: "#e4edf1",
   },
   mountain: {
-    bgColor: "#0f0f0f",
-    mainColor: "#e7e7e7",
-    subColor: "#4c4c4c",
-    textColor: "#e7e7e7",
+    bg: "#0f0f0f",
+    main: "#e7e7e7",
+    sub: "#4c4c4c",
+    text: "#e7e7e7",
   },
   laser: {
-    bgColor: "#221b44",
-    mainColor: "#009eaf",
-    subColor: "#b82356",
-    textColor: "#dbe7e8",
+    bg: "#221b44",
+    main: "#009eaf",
+    sub: "#b82356",
+    text: "#dbe7e8",
   },
   retro: {
-    bgColor: "#dad3c1",
-    mainColor: "#1d1b17",
-    subColor: "#918b7d",
-    textColor: "#1d1b17",
+    bg: "#dad3c1",
+    main: "#1d1b17",
+    sub: "#918b7d",
+    text: "#1d1b17",
   },
   dracula: {
-    bgColor: "#282a36",
-    mainColor: "#bd93f9",
-    subColor: "#6272a4",
-    textColor: "#f8f8f2",
+    bg: "#282a36",
+    main: "#bd93f9",
+    sub: "#6272a4",
+    text: "#f8f8f2",
   },
   nord: {
-    bgColor: "#242933",
-    mainColor: "#88C0D0",
-    subColor: "#2E3440",
-    textColor: "#88C0D0",
+    bg: "#242933",
+    main: "#88C0D0",
+    sub: "#2E3440",
+    text: "#88C0D0",
   },
   mr_sleeves: {
-    bgColor: "#d1d7da",
-    mainColor: "#daa99b",
-    subColor: "#9a9fa1",
-    textColor: "#1d1d1d",
+    bg: "#d1d7da",
+    main: "#daa99b",
+    sub: "#9a9fa1",
+    text: "#1d1d1d",
   },
   olivia: {
-    bgColor: "#1c1b1d",
-    mainColor: "#deaf9d",
-    subColor: "#4e3e3e",
-    textColor: "#f2efed",
+    bg: "#1c1b1d",
+    main: "#deaf9d",
+    sub: "#4e3e3e",
+    text: "#f2efed",
   },
   bliss: {
-    bgColor: "#262727",
-    mainColor: "#f0d3c9",
-    subColor: "#665957",
-    textColor: "#fff",
+    bg: "#262727",
+    main: "#f0d3c9",
+    sub: "#665957",
+    text: "#fff",
   },
   mizu: {
-    bgColor: "#afcbdd",
-    mainColor: "#fcfbf6",
-    subColor: "#85a5bb",
-    textColor: "#1a2633",
+    bg: "#afcbdd",
+    main: "#fcfbf6",
+    sub: "#85a5bb",
+    text: "#1a2633",
   },
   metaverse: {
-    bgColor: "#232323",
-    mainColor: "#d82934",
-    subColor: "#5e5e5e",
-    textColor: "#e8e8e8",
+    bg: "#232323",
+    main: "#d82934",
+    sub: "#5e5e5e",
+    text: "#e8e8e8",
   },
   shadow: {
-    bgColor: "#000",
-    mainColor: "#eee",
-    subColor: "#444",
-    textColor: "#eee",
+    bg: "#000",
+    main: "#eee",
+    sub: "#444",
+    text: "#eee",
   },
   mint: {
-    bgColor: "#05385b",
-    mainColor: "#5cdb95",
-    subColor: "#20688a",
-    textColor: "#edf5e1",
+    bg: "#05385b",
+    main: "#5cdb95",
+    sub: "#20688a",
+    text: "#edf5e1",
   },
   miami: {
-    bgColor: "#f35588",
-    mainColor: "#05dfd7",
-    subColor: "#94294c",
-    textColor: "#f0e9ec",
+    bg: "#f35588",
+    main: "#05dfd7",
+    sub: "#94294c",
+    text: "#f0e9ec",
   },
   miami_nights: {
-    bgColor: "#18181a",
-    mainColor: "#e4609b",
-    subColor: "#47bac0",
-    textColor: "#fff",
+    bg: "#18181a",
+    main: "#e4609b",
+    sub: "#47bac0",
+    text: "#fff",
   },
   modern_dolch: {
-    bgColor: "#2d2e30",
-    mainColor: "#7eddd3",
-    subColor: "#54585c",
-    textColor: "#e3e6eb",
+    bg: "#2d2e30",
+    main: "#7eddd3",
+    sub: "#54585c",
+    text: "#e3e6eb",
   },
   botanical: {
-    bgColor: "#7b9c98",
-    mainColor: "#eaf1f3",
-    subColor: "#495755",
-    textColor: "#eaf1f3",
+    bg: "#7b9c98",
+    main: "#eaf1f3",
+    sub: "#495755",
+    text: "#eaf1f3",
   },
   bingsu: {
-    bgColor: "#b8a7aa",
-    mainColor: "#83616e",
-    subColor: "#48373d",
-    textColor: "#ebe6ea",
+    bg: "#b8a7aa",
+    main: "#83616e",
+    sub: "#48373d",
+    text: "#ebe6ea",
   },
   terminal: {
-    bgColor: "#191a1b",
-    mainColor: "#79a617",
-    subColor: "#48494b",
-    textColor: "#e7eae0",
+    bg: "#191a1b",
+    main: "#79a617",
+    sub: "#48494b",
+    text: "#e7eae0",
   },
   lavender: {
-    bgColor: "#ada6c2",
-    mainColor: "#e4e3e9",
-    subColor: "#e4e3e9",
-    textColor: "#2f2a41",
+    bg: "#ada6c2",
+    main: "#e4e3e9",
+    sub: "#e4e3e9",
+    text: "#2f2a41",
   },
   taro: {
-    bgColor: "#b3baff",
-    mainColor: "#130f1a",
-    subColor: "#6f6c91",
-    textColor: "#130f1a",
+    bg: "#b3baff",
+    main: "#130f1a",
+    sub: "#6f6c91",
+    text: "#130f1a",
   },
   striker: {
-    bgColor: "#124883",
-    mainColor: "#d7dcda",
-    subColor: "#0f2d4e",
-    textColor: "#d6dbd9",
+    bg: "#124883",
+    main: "#d7dcda",
+    sub: "#0f2d4e",
+    text: "#d6dbd9",
   },
   gruvbox_dark: {
-    bgColor: "#282828",
-    mainColor: "#d79921",
-    subColor: "#665c54",
-    textColor: "#ebdbb2",
+    bg: "#282828",
+    main: "#d79921",
+    sub: "#665c54",
+    text: "#ebdbb2",
   },
   gruvbox_light: {
-    bgColor: "#fbf1c7",
-    mainColor: "#689d6a",
-    subColor: "#a89984",
-    textColor: "#3c3836",
+    bg: "#fbf1c7",
+    main: "#689d6a",
+    sub: "#a89984",
+    text: "#3c3836",
   },
   monokai: {
-    bgColor: "#272822",
-    mainColor: "#a6e22e",
-    subColor: "#e6db74",
-    textColor: "#e2e2dc",
+    bg: "#272822",
+    main: "#a6e22e",
+    sub: "#e6db74",
+    text: "#e2e2dc",
   },
   sonokai: {
-    bgColor: "#2c2e34",
-    mainColor: "#9ed072",
-    subColor: "#e7c664",
-    textColor: "#e2e2e3",
+    bg: "#2c2e34",
+    main: "#9ed072",
+    sub: "#e7c664",
+    text: "#e2e2e3",
   },
   camping: {
-    bgColor: "#faf1e4",
-    mainColor: "#618c56",
-    subColor: "#c2b8aa",
-    textColor: "#3c403b",
+    bg: "#faf1e4",
+    main: "#618c56",
+    sub: "#c2b8aa",
+    text: "#3c403b",
   },
   voc: {
-    bgColor: "#190618",
-    mainColor: "#e0caac",
-    subColor: "#4c1e48",
-    textColor: "#eeeae4",
+    bg: "#190618",
+    main: "#e0caac",
+    sub: "#4c1e48",
+    text: "#eeeae4",
   },
   vaporwave: {
-    bgColor: "#a4a7ea",
-    mainColor: "#e368da",
-    subColor: "#7c7faf",
-    textColor: "#f1ebf1",
+    bg: "#a4a7ea",
+    main: "#e368da",
+    sub: "#7c7faf",
+    text: "#f1ebf1",
   },
   pulse: {
-    bgColor: "#181818",
-    mainColor: "#17b8bd",
-    subColor: "#53565a",
-    textColor: "#e5f4f4",
+    bg: "#181818",
+    main: "#17b8bd",
+    sub: "#53565a",
+    text: "#e5f4f4",
   },
   matrix: {
-    bgColor: "#000000",
-    mainColor: "#15ff00",
-    subColor: "#006500",
-    textColor: "#d1ffcd",
+    bg: "#000000",
+    main: "#15ff00",
+    sub: "#006500",
+    text: "#d1ffcd",
   },
   olive: {
-    bgColor: "#e9e5cc",
-    mainColor: "#92946f",
-    subColor: "#b7b39e",
-    textColor: "#373731",
+    bg: "#e9e5cc",
+    main: "#92946f",
+    sub: "#b7b39e",
+    text: "#373731",
   },
   strawberry: {
-    bgColor: "#f37f83",
-    mainColor: "#fcfcf8",
-    subColor: "#e53c58",
-    textColor: "#fcfcf8",
+    bg: "#f37f83",
+    main: "#fcfcf8",
+    sub: "#e53c58",
+    text: "#fcfcf8",
   },
   night_runner: {
-    bgColor: "#212121",
-    mainColor: "#feff04",
-    subColor: "#5c4a9c",
-    textColor: "#e8e8e8",
+    bg: "#212121",
+    main: "#feff04",
+    sub: "#5c4a9c",
+    text: "#e8e8e8",
   },
   cyberspace: {
-    bgColor: "#181c18",
-    mainColor: "#00ce7c",
-    subColor: "#9578d3",
-    textColor: "#c2fbe1",
+    bg: "#181c18",
+    main: "#00ce7c",
+    sub: "#9578d3",
+    text: "#c2fbe1",
   },
   joker: {
-    bgColor: "#1a0e25",
-    mainColor: "#99de1e",
-    subColor: "#7554a3",
-    textColor: "#e9e2f5",
+    bg: "#1a0e25",
+    main: "#99de1e",
+    sub: "#7554a3",
+    text: "#e9e2f5",
   },
   dualshot: {
-    bgColor: "#737373",
-    mainColor: "#212222",
-    subColor: "#aaaaaa",
-    textColor: "#212222",
+    bg: "#737373",
+    main: "#212222",
+    sub: "#aaaaaa",
+    text: "#212222",
   },
   solarized_dark: {
-    bgColor: "#002b36",
-    mainColor: "#859900",
-    subColor: "#2aa198",
-    textColor: "#268bd2",
+    bg: "#002b36",
+    main: "#859900",
+    sub: "#2aa198",
+    text: "#268bd2",
   },
   solarized_light: {
-    bgColor: "#fdf6e3",
-    mainColor: "#859900",
-    subColor: "#2aa198",
-    textColor: "#181819",
+    bg: "#fdf6e3",
+    main: "#859900",
+    sub: "#2aa198",
+    text: "#181819",
   },
   solarized_osaka: {
-    bgColor: "#00141a",
-    mainColor: "#859900",
-    subColor: "#2aa198",
-    textColor: "#b58900",
+    bg: "#00141a",
+    main: "#859900",
+    sub: "#2aa198",
+    text: "#b58900",
   },
   terra: {
-    bgColor: "#0c100e",
-    mainColor: "#89c559",
-    subColor: "#436029",
-    textColor: "#f0edd1",
+    bg: "#0c100e",
+    main: "#89c559",
+    sub: "#436029",
+    text: "#f0edd1",
   },
   red_dragon: {
-    bgColor: "#1a0b0c",
-    mainColor: "#ff3a32",
-    subColor: "#e2a528",
-    textColor: "#4a4d4e",
+    bg: "#1a0b0c",
+    main: "#ff3a32",
+    sub: "#e2a528",
+    text: "#4a4d4e",
   },
   hammerhead: {
-    bgColor: "#030613",
-    mainColor: "#4fcdb9",
-    subColor: "#213c53",
-    textColor: "#e2f1f5",
+    bg: "#030613",
+    main: "#4fcdb9",
+    sub: "#213c53",
+    text: "#e2f1f5",
   },
   future_funk: {
-    bgColor: "#2e1a47",
-    mainColor: "#f7f2ea",
-    subColor: "#c18fff",
-    textColor: "#f7f2ea",
+    bg: "#2e1a47",
+    main: "#f7f2ea",
+    sub: "#c18fff",
+    text: "#f7f2ea",
   },
   milkshake: {
-    bgColor: "#ffffff",
-    mainColor: "#212b43",
-    subColor: "#62cfe6",
-    textColor: "#212b43",
+    bg: "#ffffff",
+    main: "#212b43",
+    sub: "#62cfe6",
+    text: "#212b43",
   },
   aether: {
-    bgColor: "#101820",
-    mainColor: "#eedaea",
-    subColor: "#cf6bdd",
-    textColor: "#eedaea",
+    bg: "#101820",
+    main: "#eedaea",
+    sub: "#cf6bdd",
+    text: "#eedaea",
   },
   froyo: {
-    bgColor: "#e1dacb",
-    mainColor: "#7b7d7d",
-    subColor: "#b29c5e",
-    textColor: "#7b7d7d",
+    bg: "#e1dacb",
+    main: "#7b7d7d",
+    sub: "#b29c5e",
+    text: "#7b7d7d",
   },
   retrocast: {
-    bgColor: "#07737a",
-    mainColor: "#88dbdf",
-    subColor: "#f3e03b",
-    textColor: "#ffffff",
+    bg: "#07737a",
+    main: "#88dbdf",
+    sub: "#f3e03b",
+    text: "#ffffff",
   },
   luna: {
-    bgColor: "#221c35",
-    mainColor: "#f67599",
-    subColor: "#5a3a7e",
-    textColor: "#ffe3eb",
+    bg: "#221c35",
+    main: "#f67599",
+    sub: "#5a3a7e",
+    text: "#ffe3eb",
   },
   graen: {
-    bgColor: "#303c36",
-    mainColor: "#a59682",
-    subColor: "#181d1a",
-    textColor: "#a59682",
+    bg: "#303c36",
+    main: "#a59682",
+    sub: "#181d1a",
+    text: "#a59682",
   },
   bento: {
-    bgColor: "#2d394d",
-    mainColor: "#ff7a90",
-    subColor: "#4a768d",
-    textColor: "#fffaf8",
+    bg: "#2d394d",
+    main: "#ff7a90",
+    sub: "#4a768d",
+    text: "#fffaf8",
   },
   watermelon: {
-    bgColor: "#1f4437",
-    mainColor: "#d6686f",
-    subColor: "#3e7a65",
-    textColor: "#cdc6bc",
+    bg: "#1f4437",
+    main: "#d6686f",
+    sub: "#3e7a65",
+    text: "#cdc6bc",
   },
   menthol: {
-    bgColor: "#00c18c",
-    mainColor: "#ffffff",
-    subColor: "#186544",
-    textColor: "#ffffff",
+    bg: "#00c18c",
+    main: "#ffffff",
+    sub: "#186544",
+    text: "#ffffff",
   },
   ishtar: {
-    bgColor: "#202020",
-    mainColor: "#91170c",
-    subColor: "#847869",
-    textColor: "#fae1c3",
+    bg: "#202020",
+    main: "#91170c",
+    sub: "#847869",
+    text: "#fae1c3",
   },
   mashu: {
-    bgColor: "#2b2b2c",
-    mainColor: "#76689a",
-    subColor: "#d8a0a6",
-    textColor: "#f1e2e4",
+    bg: "#2b2b2c",
+    main: "#76689a",
+    sub: "#d8a0a6",
+    text: "#f1e2e4",
   },
   deku: {
-    bgColor: "#058b8c",
-    mainColor: "#b63530",
-    subColor: "#255458",
-    textColor: "#f7f2ea",
+    bg: "#058b8c",
+    main: "#b63530",
+    sub: "#255458",
+    text: "#f7f2ea",
   },
   honey: {
-    bgColor: "#f2aa00",
-    mainColor: "#fff546",
-    subColor: "#a66b00",
-    textColor: "#f3eecb",
+    bg: "#f2aa00",
+    main: "#fff546",
+    sub: "#a66b00",
+    text: "#f3eecb",
   },
   shoko: {
-    bgColor: "#ced7e0",
-    mainColor: "#81c4dd",
-    subColor: "#7599b1",
-    textColor: "#3b4c58",
+    bg: "#ced7e0",
+    main: "#81c4dd",
+    sub: "#7599b1",
+    text: "#3b4c58",
   },
   norse: {
-    bgColor: "#242425",
-    mainColor: "#2b5f6d",
-    subColor: "#505b5e",
-    textColor: "#ccc2b1",
+    bg: "#242425",
+    main: "#2b5f6d",
+    sub: "#505b5e",
+    text: "#ccc2b1",
   },
   matcha_moccha: {
-    bgColor: "#523525",
-    mainColor: "#7ec160",
-    subColor: "#9e6749",
-    textColor: "#ecddcc",
+    bg: "#523525",
+    main: "#7ec160",
+    sub: "#9e6749",
+    text: "#ecddcc",
   },
   cafe: {
-    bgColor: "#ceb18d",
-    mainColor: "#14120f",
-    subColor: "#d4d2d1",
-    textColor: "#14120f",
+    bg: "#ceb18d",
+    main: "#14120f",
+    sub: "#d4d2d1",
+    text: "#14120f",
   },
   alpine: {
-    bgColor: "#6c687f",
-    mainColor: "#ffffff",
-    subColor: "#9994b8",
-    textColor: "#ffffff",
+    bg: "#6c687f",
+    main: "#ffffff",
+    sub: "#9994b8",
+    text: "#ffffff",
   },
   superuser: {
-    bgColor: "#262a33",
-    mainColor: "#43ffaf",
-    subColor: "#526777",
-    textColor: "#e5f7ef",
+    bg: "#262a33",
+    main: "#43ffaf",
+    sub: "#526777",
+    text: "#e5f7ef",
   },
   ms_cupcakes: {
-    bgColor: "#ffffff",
-    mainColor: "#5ed5f3",
-    subColor: "#d64090",
-    textColor: "#0a282f",
+    bg: "#ffffff",
+    main: "#5ed5f3",
+    sub: "#d64090",
+    text: "#0a282f",
   },
   dollar: {
-    bgColor: "#e4e4d4",
-    mainColor: "#6b886b",
-    subColor: "#8a9b69",
-    textColor: "#555a56",
+    bg: "#e4e4d4",
+    main: "#6b886b",
+    sub: "#8a9b69",
+    text: "#555a56",
   },
   lime: {
-    bgColor: "#7c878e",
-    mainColor: "#93c247",
-    subColor: "#4b5257",
-    textColor: "#bfcfdc",
+    bg: "#7c878e",
+    main: "#93c247",
+    sub: "#4b5257",
+    text: "#bfcfdc",
   },
   sweden: {
-    bgColor: "#0058a3",
-    mainColor: "#ffcc02",
-    subColor: "#57abdb",
-    textColor: "#ffffff",
+    bg: "#0058a3",
+    main: "#ffcc02",
+    sub: "#57abdb",
+    text: "#ffffff",
   },
   wavez: {
-    bgColor: "#1c292f",
-    mainColor: "#6bde3b",
-    subColor: "#1f5e6b",
-    textColor: "#e9efe6",
+    bg: "#1c292f",
+    main: "#6bde3b",
+    sub: "#1f5e6b",
+    text: "#e9efe6",
   },
   nebula: {
-    bgColor: "#212135",
-    mainColor: "#be3c88",
-    subColor: "#19b3b8",
-    textColor: "#838686",
+    bg: "#212135",
+    main: "#be3c88",
+    sub: "#19b3b8",
+    text: "#838686",
   },
   lil_dragon: {
-    bgColor: "#ebe1ef",
-    mainColor: "#8a5bd6",
-    subColor: "#a28db8",
-    textColor: "#212b43",
+    bg: "#ebe1ef",
+    main: "#8a5bd6",
+    sub: "#a28db8",
+    text: "#212b43",
   },
   pastel: {
-    bgColor: "#e0b2bd",
-    mainColor: "#fbf4b6",
-    subColor: "#b4e9ff",
-    textColor: "#6d5c6f",
+    bg: "#e0b2bd",
+    main: "#fbf4b6",
+    sub: "#b4e9ff",
+    text: "#6d5c6f",
   },
   alduin: {
-    bgColor: "#1c1c1c",
-    mainColor: "#dfd7af",
-    subColor: "#444444",
-    textColor: "#f5f3ed",
+    bg: "#1c1c1c",
+    main: "#dfd7af",
+    sub: "#444444",
+    text: "#f5f3ed",
   },
   paper: {
-    bgColor: "#eeeeee",
-    mainColor: "#444444",
-    subColor: "#b2b2b2",
-    textColor: "#444444",
+    bg: "#eeeeee",
+    main: "#444444",
+    sub: "#b2b2b2",
+    text: "#444444",
   },
   fundamentals: {
-    bgColor: "#727474",
-    mainColor: "#7fa482",
-    subColor: "#cac4be",
-    textColor: "#131313",
+    bg: "#727474",
+    main: "#7fa482",
+    sub: "#cac4be",
+    text: "#131313",
   },
   drowning: {
-    bgColor: "#191826",
-    mainColor: "#4a6fb5",
-    subColor: "#50688c",
-    textColor: "#9393a7",
+    bg: "#191826",
+    main: "#4a6fb5",
+    sub: "#50688c",
+    text: "#9393a7",
   },
   iceberg_dark: {
-    bgColor: "#161821",
-    mainColor: "#84a0c6",
-    subColor: "#595e76",
-    textColor: "#c6c8d1",
+    bg: "#161821",
+    main: "#84a0c6",
+    sub: "#595e76",
+    text: "#c6c8d1",
   },
   iceberg_light: {
-    bgColor: "#e8e9ec",
-    mainColor: "#2d539e",
-    subColor: "#adb1c4",
-    textColor: "#33374c",
+    bg: "#e8e9ec",
+    main: "#2d539e",
+    sub: "#adb1c4",
+    text: "#33374c",
   },
   onedark: {
-    bgColor: "#2f343f",
-    mainColor: "#61afef",
-    subColor: "#eceff4",
-    textColor: "#98c379",
+    bg: "#2f343f",
+    main: "#61afef",
+    sub: "#eceff4",
+    text: "#98c379",
   },
   darling: {
-    bgColor: "#fec8cd",
-    mainColor: "#ffffff",
-    subColor: "#a30000",
-    textColor: "#ffffff",
+    bg: "#fec8cd",
+    main: "#ffffff",
+    sub: "#a30000",
+    text: "#ffffff",
   },
   repose_dark: {
-    bgColor: "#2f3338",
-    mainColor: "#d6d2bc",
-    subColor: "#8f8e84",
-    textColor: "#d6d2bc",
+    bg: "#2f3338",
+    main: "#d6d2bc",
+    sub: "#8f8e84",
+    text: "#d6d2bc",
   },
   repose_light: {
-    bgColor: "#efead0",
-    mainColor: "#5f605e",
-    subColor: "#8f8e84",
-    textColor: "#333538",
+    bg: "#efead0",
+    main: "#5f605e",
+    sub: "#8f8e84",
+    text: "#333538",
   },
   horizon: {
-    bgColor: "#1c1e26",
-    mainColor: "#c4a88a",
-    subColor: "#db886f",
-    textColor: "#bbbbbb",
+    bg: "#1c1e26",
+    main: "#c4a88a",
+    sub: "#db886f",
+    text: "#bbbbbb",
   },
   rudy: {
-    bgColor: "#1a2b3e",
-    mainColor: "#af8f5c",
-    subColor: "#3a506c",
-    textColor: "#c9c8bf",
+    bg: "#1a2b3e",
+    main: "#af8f5c",
+    sub: "#3a506c",
+    text: "#c9c8bf",
   },
   stealth: {
-    bgColor: "#010203",
-    mainColor: "#383e42",
-    subColor: "#5e676e",
-    textColor: "#383e42",
+    bg: "#010203",
+    main: "#383e42",
+    sub: "#5e676e",
+    text: "#383e42",
   },
   "80s_after_dark": {
-    bgColor: "#1b1d36",
-    mainColor: "#fca6d1",
-    subColor: "#99d6ea",
-    textColor: "#e1e7ec",
+    bg: "#1b1d36",
+    main: "#fca6d1",
+    sub: "#99d6ea",
+    text: "#e1e7ec",
   },
   arch: {
-    bgColor: "#0c0d11",
-    mainColor: "#7ebab5",
-    subColor: "#454864",
-    textColor: "#f6f5f5",
+    bg: "#0c0d11",
+    main: "#7ebab5",
+    sub: "#454864",
+    text: "#f6f5f5",
   },
   rose_pine: {
-    bgColor: "#1f1d27",
-    mainColor: "#9ccfd8",
-    subColor: "#c4a7e7",
-    textColor: "#e0def4",
+    bg: "#1f1d27",
+    main: "#9ccfd8",
+    sub: "#c4a7e7",
+    text: "#e0def4",
   },
   rose_pine_moon: {
-    bgColor: "#2a273f",
-    mainColor: "#9ccfd8",
-    subColor: "#c4a7e7",
-    textColor: "#e0def4",
+    bg: "#2a273f",
+    main: "#9ccfd8",
+    sub: "#c4a7e7",
+    text: "#e0def4",
   },
   rose_pine_dawn: {
-    bgColor: "#fffaf3",
-    mainColor: "#56949f",
-    subColor: "#c4a7e7",
-    textColor: "#286983",
+    bg: "#fffaf3",
+    main: "#56949f",
+    sub: "#c4a7e7",
+    text: "#286983",
   },
   copper: {
-    bgColor: "#442f29",
-    mainColor: "#b46a55",
-    subColor: "#7ebab5",
-    textColor: "#e7e0de",
+    bg: "#442f29",
+    main: "#b46a55",
+    sub: "#7ebab5",
+    text: "#e7e0de",
   },
   grand_prix: {
-    bgColor: "#36475c",
-    mainColor: "#c0d036",
-    subColor: "#5c6c80",
-    textColor: "#c1c7d7",
+    bg: "#36475c",
+    main: "#c0d036",
+    sub: "#5c6c80",
+    text: "#c1c7d7",
   },
   peaches: {
-    bgColor: "#e0d7c1",
-    mainColor: "#dd7a5f",
-    subColor: "#e7b28e",
-    textColor: "#5f4c41",
+    bg: "#e0d7c1",
+    main: "#dd7a5f",
+    sub: "#e7b28e",
+    text: "#5f4c41",
   },
   bouquet: {
-    bgColor: "#173f35",
-    mainColor: "#eaa09c",
-    subColor: "#408e7b",
-    textColor: "#e9e0d2",
+    bg: "#173f35",
+    main: "#eaa09c",
+    sub: "#408e7b",
+    text: "#e9e0d2",
   },
   midnight: {
-    bgColor: "#0b0e13",
-    mainColor: "#60759f",
-    subColor: "#394760",
-    textColor: "#9fadc6",
+    bg: "#0b0e13",
+    main: "#60759f",
+    sub: "#394760",
+    text: "#9fadc6",
   },
   blueberry_light: {
-    bgColor: "#dae0f5",
-    mainColor: "#506477",
-    subColor: "#92a4be",
-    textColor: "#678198",
+    bg: "#dae0f5",
+    main: "#506477",
+    sub: "#92a4be",
+    text: "#678198",
   },
   blueberry_dark: {
-    bgColor: "#212b42",
-    mainColor: "#add7ff",
-    subColor: "#5c7da5",
-    textColor: "#91b4d5",
+    bg: "#212b42",
+    main: "#add7ff",
+    sub: "#5c7da5",
+    text: "#91b4d5",
   },
   fledgling: {
-    bgColor: "#3b363f",
-    mainColor: "#fc6e83",
-    subColor: "#8e5568",
-    textColor: "#e6d5d3",
+    bg: "#3b363f",
+    main: "#fc6e83",
+    sub: "#8e5568",
+    text: "#e6d5d3",
   },
   ez_mode: {
-    bgColor: "#0068c6",
-    mainColor: "#fa62d5",
-    subColor: "#138bf7",
-    textColor: "#ffffff",
+    bg: "#0068c6",
+    main: "#fa62d5",
+    sub: "#138bf7",
+    text: "#ffffff",
   },
   vscode: {
-    bgColor: "#1e1e1e",
-    mainColor: "#007acc",
-    subColor: "#4d4d4d",
-    textColor: "#d4d4d4",
+    bg: "#1e1e1e",
+    main: "#007acc",
+    sub: "#4d4d4d",
+    text: "#d4d4d4",
   },
   material: {
-    bgColor: "#263238",
-    mainColor: "#80cbc4",
-    subColor: "#4c6772",
-    textColor: "#e6edf3",
+    bg: "#263238",
+    main: "#80cbc4",
+    sub: "#4c6772",
+    text: "#e6edf3",
   },
   godspeed: {
-    bgColor: "#eae4cf",
-    mainColor: "#9abbcd",
-    subColor: "#ada998",
-    textColor: "#646669",
+    bg: "#eae4cf",
+    main: "#9abbcd",
+    sub: "#ada998",
+    text: "#646669",
   },
   witch_girl: {
-    bgColor: "#f3dbda",
-    mainColor: "#56786a",
-    subColor: "#ddb4a7",
-    textColor: "#56786a",
+    bg: "#f3dbda",
+    main: "#56786a",
+    sub: "#ddb4a7",
+    text: "#56786a",
   },
   terror_below: {
-    bgColor: "#0b1e1a",
-    mainColor: "#66ac92",
-    subColor: "#015c53",
-    textColor: "#dceae5",
+    bg: "#0b1e1a",
+    main: "#66ac92",
+    sub: "#015c53",
+    text: "#dceae5",
   },
   sewing_tin: {
-    bgColor: "#241963",
-    mainColor: "#f2ce83",
-    subColor: "#446ad5",
-    textColor: "#ffffff",
+    bg: "#241963",
+    main: "#f2ce83",
+    sub: "#446ad5",
+    text: "#ffffff",
   },
   soaring_skies: {
-    bgColor: "#fff9f2",
-    mainColor: "#55c6f0",
-    subColor: "#1e107a",
-    textColor: "#1d1e1e",
+    bg: "#fff9f2",
+    main: "#55c6f0",
+    sub: "#1e107a",
+    text: "#1d1e1e",
   },
   sewing_tin_light: {
-    bgColor: "#ffffff",
-    mainColor: "#2d2076",
-    subColor: "#385eca",
-    textColor: "#2d2076",
+    bg: "#ffffff",
+    main: "#2d2076",
+    sub: "#385eca",
+    text: "#2d2076",
   },
   chaos_theory: {
-    bgColor: "#141221",
-    mainColor: "#fd77d7",
-    subColor: "#676e8a",
-    textColor: "#dde5ed",
+    bg: "#141221",
+    main: "#fd77d7",
+    sub: "#676e8a",
+    text: "#dde5ed",
   },
   hanok: {
-    bgColor: "#d8d2c3",
-    mainColor: "#513a2a",
-    subColor: "#8b6f5c",
-    textColor: "#393b3b",
+    bg: "#d8d2c3",
+    main: "#513a2a",
+    sub: "#8b6f5c",
+    text: "#393b3b",
   },
   comfy: {
-    bgColor: "#4a5b6e",
-    mainColor: "#f8cdc6",
-    subColor: "#9ec1cc",
-    textColor: "#f5efee",
+    bg: "#4a5b6e",
+    main: "#f8cdc6",
+    sub: "#9ec1cc",
+    text: "#f5efee",
   },
   tiramisu: {
-    bgColor: "#cfc6b9",
-    mainColor: "#c0976f",
-    subColor: "#c0976f",
-    textColor: "#7d5448",
+    bg: "#cfc6b9",
+    main: "#c0976f",
+    sub: "#c0976f",
+    text: "#7d5448",
   },
   diner: {
-    bgColor: "#537997",
-    mainColor: "#c3af5b",
-    subColor: "#445c7f",
-    textColor: "#dfdbc8",
+    bg: "#537997",
+    main: "#c3af5b",
+    sub: "#445c7f",
+    text: "#dfdbc8",
   },
   modern_ink: {
-    bgColor: "#ffffff",
-    mainColor: "#ff360d",
-    subColor: "#b7b7b7",
-    textColor: "#000000",
+    bg: "#ffffff",
+    main: "#ff360d",
+    sub: "#b7b7b7",
+    text: "#000000",
   },
   dev: {
-    bgColor: "#1b2028",
-    mainColor: "#23a9d5",
-    subColor: "#4b5975",
-    textColor: "#ccccb5",
+    bg: "#1b2028",
+    main: "#23a9d5",
+    sub: "#4b5975",
+    text: "#ccccb5",
   },
   moonlight: {
-    bgColor: "#191f28",
-    mainColor: "#c69f68",
-    subColor: "#4b5975",
-    textColor: "#ccccb5",
+    bg: "#191f28",
+    main: "#c69f68",
+    sub: "#4b5975",
+    text: "#ccccb5",
   },
   pink_lemonade: {
-    bgColor: "#f6d992",
-    mainColor: "#f6a192",
-    subColor: "#f6b092",
-    textColor: "#fcfcf8",
+    bg: "#f6d992",
+    main: "#f6a192",
+    sub: "#f6b092",
+    text: "#fcfcf8",
   },
   creamsicle: {
-    bgColor: "#ff9869",
-    mainColor: "#fcfcf8",
-    subColor: "#ff661f",
-    textColor: "#fcfcf8",
+    bg: "#ff9869",
+    main: "#fcfcf8",
+    sub: "#ff661f",
+    text: "#fcfcf8",
   },
   beach: {
-    bgColor: "#ffeead",
-    mainColor: "#96ceb4",
-    subColor: "#ffcc5c",
-    textColor: "#5b7869",
+    bg: "#ffeead",
+    main: "#96ceb4",
+    sub: "#ffcc5c",
+    text: "#5b7869",
   },
   desert_oasis: {
-    bgColor: "#fff2d5",
-    mainColor: "#d19d01",
-    subColor: "#0061fe",
-    textColor: "#332800",
+    bg: "#fff2d5",
+    main: "#d19d01",
+    sub: "#0061fe",
+    text: "#332800",
   },
   frozen_llama: {
-    bgColor: "#9bf2ea",
-    mainColor: "#6d44a6",
-    subColor: "#b690fd",
-    textColor: "#ffffff",
+    bg: "#9bf2ea",
+    main: "#6d44a6",
+    sub: "#b690fd",
+    text: "#ffffff",
   },
   ryujinscales: {
-    bgColor: "#081426",
-    mainColor: "#f17754",
-    subColor: "#ffbc90",
-    textColor: "#ffe4bc",
+    bg: "#081426",
+    main: "#f17754",
+    sub: "#ffbc90",
+    text: "#ffe4bc",
   },
   trackday: {
-    bgColor: "#464d66",
-    mainColor: "#e0513e",
-    subColor: "#5c7eb9",
-    textColor: "#cfcfcf",
+    bg: "#464d66",
+    main: "#e0513e",
+    sub: "#5c7eb9",
+    text: "#cfcfcf",
   },
   fruit_chew: {
-    bgColor: "#d6d3d6",
-    mainColor: "#5c1e5f",
-    subColor: "#b49cb5",
-    textColor: "#282528",
+    bg: "#d6d3d6",
+    main: "#5c1e5f",
+    sub: "#b49cb5",
+    text: "#282528",
   },
   evil_eye: {
-    bgColor: "#0084c2",
-    mainColor: "#f7f2ea",
-    subColor: "#01589f",
-    textColor: "#171718",
+    bg: "#0084c2",
+    main: "#f7f2ea",
+    sub: "#01589f",
+    text: "#171718",
   },
   trance: {
-    bgColor: "#00021b",
-    mainColor: "#e51376",
-    subColor: "#3c4c79",
-    textColor: "#fff",
+    bg: "#00021b",
+    main: "#e51376",
+    sub: "#3c4c79",
+    text: "#fff",
   },
   fire: {
-    bgColor: "#0f0000",
-    mainColor: "#b31313",
-    subColor: "#683434",
-    textColor: "#ffffff",
+    bg: "#0f0000",
+    main: "#b31313",
+    sub: "#683434",
+    text: "#ffffff",
   },
   aurora: {
-    bgColor: "#011926",
-    mainColor: "#00e980",
-    subColor: "#245c69",
-    textColor: "#fff",
+    bg: "#011926",
+    main: "#00e980",
+    sub: "#245c69",
+    text: "#fff",
   },
   leather: {
-    bgColor: "#a86948",
-    mainColor: "#ffe4bc",
-    subColor: "#81482b",
-    textColor: "#ffe4bc",
+    bg: "#a86948",
+    main: "#ffe4bc",
+    sub: "#81482b",
+    text: "#ffe4bc",
   },
   fleuriste: {
-    bgColor: "#c6b294",
-    mainColor: "#405a52",
-    subColor: "#64374d",
-    textColor: "#091914",
+    bg: "#c6b294",
+    main: "#405a52",
+    sub: "#64374d",
+    text: "#091914",
   },
   dmg: {
-    bgColor: "#dadbdc",
-    mainColor: "#ae185e",
-    subColor: "#3846b1",
-    textColor: "#414141",
+    bg: "#dadbdc",
+    main: "#ae185e",
+    sub: "#3846b1",
+    text: "#414141",
   },
   catppuccin: {
-    bgColor: "#1e1e2e",
-    mainColor: "#cba6f7",
-    subColor: "#7f849c",
-    textColor: "#cdd6f4",
+    bg: "#1e1e2e",
+    main: "#cba6f7",
+    sub: "#7f849c",
+    text: "#cdd6f4",
   },
   snes: {
-    bgColor: "#bfbec2",
-    mainColor: "#553d94",
-    subColor: "#9f8ad4",
-    textColor: "#2e2e2e",
+    bg: "#bfbec2",
+    main: "#553d94",
+    sub: "#9f8ad4",
+    text: "#2e2e2e",
   },
   passion_fruit: {
-    bgColor: "#7c2142",
-    mainColor: "#f4a3b4",
-    subColor: "#9994b8",
-    textColor: "#ffffff",
+    bg: "#7c2142",
+    main: "#f4a3b4",
+    sub: "#9994b8",
+    text: "#ffffff",
   },
   blue_dolphin: {
-    bgColor: "#003950",
-    mainColor: "#ffcefb",
-    subColor: "#00e4ff",
-    textColor: "#82eaff",
+    bg: "#003950",
+    main: "#ffcefb",
+    sub: "#00e4ff",
+    text: "#82eaff",
   },
   mexican: {
-    bgColor: "#f8ad34",
-    mainColor: "#b12189",
-    subColor: "#333",
-    textColor: "#eee",
+    bg: "#f8ad34",
+    main: "#b12189",
+    sub: "#333",
+    text: "#eee",
   },
   husqy: {
-    bgColor: "#000000",
-    mainColor: "#c58aff",
-    subColor: "#972fff",
-    textColor: "#ebd7ff",
+    bg: "#000000",
+    main: "#c58aff",
+    sub: "#972fff",
+    text: "#ebd7ff",
   },
   peach_blossom: {
-    bgColor: "#292929",
-    mainColor: "#99b898",
-    subColor: "#616161",
-    textColor: "#fecea8",
+    bg: "#292929",
+    main: "#99b898",
+    sub: "#616161",
+    text: "#fecea8",
   },
   dino: {
-    bgColor: "#ffffff",
-    mainColor: "#40d672",
-    subColor: "#d5d5d5",
-    textColor: "#1d221f",
+    bg: "#ffffff",
+    main: "#40d672",
+    sub: "#d5d5d5",
+    text: "#1d221f",
   },
   tron_orange: {
-    bgColor: "#0d1c1c",
-    mainColor: "#f0e800",
-    subColor: "#ff6600",
-    textColor: "#ffffff",
+    bg: "#0d1c1c",
+    main: "#f0e800",
+    sub: "#ff6600",
+    text: "#ffffff",
   },
   hedge: {
-    bgColor: "#415e31",
-    mainColor: "#6a994e",
-    subColor: "#ede5b4",
-    textColor: "#f7f1d6",
+    bg: "#415e31",
+    main: "#6a994e",
+    sub: "#ede5b4",
+    text: "#f7f1d6",
   },
   modern_dolch_light: {
-    bgColor: "#dbdbdb",
-    mainColor: "#8fd1c3",
-    subColor: "#acacac",
-    textColor: "#454545",
+    bg: "#dbdbdb",
+    main: "#8fd1c3",
+    sub: "#acacac",
+    text: "#454545",
   },
   iv_spade: {
-    bgColor: "#0c0c0c",
-    mainColor: "#b7976a",
-    subColor: "#404040",
-    textColor: "#d3c2c3",
+    bg: "#0c0c0c",
+    main: "#b7976a",
+    sub: "#404040",
+    text: "#d3c2c3",
   },
   iv_clover: {
-    bgColor: "#a0a0a0",
-    mainColor: "#573e40",
-    subColor: "#353535",
-    textColor: "#3b2d3b",
+    bg: "#a0a0a0",
+    main: "#573e40",
+    sub: "#353535",
+    text: "#3b2d3b",
   },
   cheesecake: {
-    bgColor: "#fdf0d5",
-    mainColor: "#8e2949",
-    subColor: "#d91c81",
-    textColor: "#3a3335",
+    bg: "#fdf0d5",
+    main: "#8e2949",
+    sub: "#d91c81",
+    text: "#3a3335",
   },
   earthsong: {
-    bgColor: "#292521",
-    mainColor: "#509452",
-    subColor: "#f5ae2d",
-    textColor: "#e6c7a8",
+    bg: "#292521",
+    main: "#509452",
+    sub: "#f5ae2d",
+    text: "#e6c7a8",
   },
   purpleish: {
-    bgColor: "#1e1e32",
-    mainColor: "#7a52cc",
-    subColor: "#3d3d66",
-    textColor: "#7a52cc",
+    bg: "#1e1e32",
+    main: "#7a52cc",
+    sub: "#3d3d66",
+    text: "#7a52cc",
   },
   nord_light: {
-    bgColor: "#eceff4",
-    mainColor: "#8fbcbb",
-    subColor: "#6a7791",
-    textColor: "#8fbcbb",
+    bg: "#eceff4",
+    main: "#8fbcbb",
+    sub: "#6a7791",
+    text: "#8fbcbb",
   },
   slambook: {
-    bgColor: "#FFFDDE",
-    mainColor: "#13005A",
-    subColor: "#1c82adc4",
-    textColor: "#125d98",
+    bg: "#FFFDDE",
+    main: "#13005A",
+    sub: "#1c82adc4",
+    text: "#125d98",
   },
   breeze: {
-    bgColor: "#e8d5c4",
-    mainColor: "#7d67a9",
-    subColor: "#3a98b9",
-    textColor: "#1b4c5e",
+    bg: "#e8d5c4",
+    main: "#7d67a9",
+    sub: "#3a98b9",
+    text: "#1b4c5e",
   },
   cherry_blossom: {
-    bgColor: "#323437",
-    mainColor: "#d65ccc",
-    subColor: "#787d82",
-    textColor: "#d1d0c5",
+    bg: "#323437",
+    main: "#d65ccc",
+    sub: "#787d82",
+    text: "#d1d0c5",
   },
   everblush: {
-    bgColor: "#141b1e",
-    mainColor: "#8ccf7e",
-    subColor: "#838887",
-    textColor: "#dadada",
+    bg: "#141b1e",
+    main: "#8ccf7e",
+    sub: "#838887",
+    text: "#dadada",
   },
   grape: {
-    bgColor: "#2c003e",
-    mainColor: "#ff8f00",
-    subColor: "#651e56",
-    textColor: "#fff",
+    bg: "#2c003e",
+    main: "#ff8f00",
+    sub: "#651e56",
+    text: "#fff",
   },
   rainbow_trail: {
-    bgColor: "#f5f5f5",
-    mainColor: "#363636",
-    subColor: "#4f4f4f",
-    textColor: "#1f1f1f",
+    bg: "#f5f5f5",
+    main: "#363636",
+    sub: "#4f4f4f",
+    text: "#1f1f1f",
   },
   tangerine: {
-    bgColor: "#ffede0",
-    mainColor: "#fe5503",
-    subColor: "#ff9562",
-    textColor: "#3d1705",
+    bg: "#ffede0",
+    main: "#fe5503",
+    sub: "#ff9562",
+    text: "#3d1705",
   },
   macroblank: {
-    bgColor: "#b2d2c8",
-    mainColor: "#c13117",
-    subColor: "#717977",
-    textColor: "#490909",
+    bg: "#b2d2c8",
+    main: "#c13117",
+    sub: "#717977",
+    text: "#490909",
   },
   anti_hero: {
-    bgColor: "#00002e",
-    mainColor: "#ffadad",
-    subColor: "#ff3d8b",
-    textColor: "#f1deef",
+    bg: "#00002e",
+    main: "#ffadad",
+    sub: "#ff3d8b",
+    text: "#f1deef",
   },
   incognito: {
-    bgColor: "#0e0e0e",
-    mainColor: "#ff9900",
-    subColor: "#2f2f2f",
-    textColor: "#c6c6c6",
+    bg: "#0e0e0e",
+    main: "#ff9900",
+    sub: "#2f2f2f",
+    text: "#c6c6c6",
   },
   discord: {
-    bgColor: "#313338",
-    mainColor: "#5a65ea",
-    subColor: "#565861",
-    textColor: "#dcdee3",
+    bg: "#313338",
+    main: "#5a65ea",
+    sub: "#565861",
+    text: "#dcdee3",
   },
   cy_red: {
-    bgColor: "#6e2626",
-    mainColor: "#e55050",
-    subColor: "#ff6060",
-    textColor: "#ffaaaa",
+    bg: "#6e2626",
+    main: "#e55050",
+    sub: "#ff6060",
+    text: "#ffaaaa",
   },
   floret: {
-    bgColor: "#00272c",
-    mainColor: " #ffdd6d",
-    subColor: "#779097",
-    textColor: "#E5E5E5",
+    bg: "#00272c",
+    main: " #ffdd6d",
+    sub: "#779097",
+    text: "#E5E5E5",
   },
   lilac_mist: {
-    bgColor: "#fffbfe",
-    mainColor: "#b94189",
-    subColor: "#e094c2",
-    textColor: "#5c2954",
+    bg: "#fffbfe",
+    main: "#b94189",
+    sub: "#e094c2",
+    text: "#5c2954",
   },
   terrazzo: {
-    bgColor: "#f1e5da",
-    mainColor: "#e0794e",
-    subColor: "#688e8f",
-    textColor: "#023e3b",
+    bg: "#f1e5da",
+    main: "#e0794e",
+    sub: "#688e8f",
+    text: "#023e3b",
   },
   suisei: {
-    bgColor: "#3b4a62",
-    mainColor: "#bef0ff",
-    subColor: "#fe9841",
-    textColor: "#dbdeeb",
+    bg: "#3b4a62",
+    main: "#bef0ff",
+    sub: "#fe9841",
+    text: "#dbdeeb",
   },
   github: {
-    bgColor: "#212830",
-    mainColor: "#41ce5c",
-    subColor: "#788386",
-    textColor: "#ccdae6",
+    bg: "#212830",
+    main: "#41ce5c",
+    sub: "#788386",
+    text: "#ccdae6",
   },
   sunset: {
-    bgColor: "#211e24",
-    mainColor: "#f79777",
-    subColor: "#5b578e",
-    textColor: "#f4e0c9",
+    bg: "#211e24",
+    main: "#f79777",
+    sub: "#5b578e",
+    text: "#f4e0c9",
   },
   vesper_light: {
-    bgColor: "#ffffff",
-    mainColor: "#fb7100",
-    subColor: "#067a6e",
-    textColor: "#000000",
+    bg: "#ffffff",
+    main: "#fb7100",
+    sub: "#067a6e",
+    text: "#000000",
   },
   pale_nimbus: {
-    bgColor: "#433e4c",
-    mainColor: "#94ffc2",
-    subColor: "#ffaca3",
-    textColor: "#feffdb",
+    bg: "#433e4c",
+    main: "#94ffc2",
+    sub: "#ffaca3",
+    text: "#feffdb",
   },
   spiderman: {
-    bgColor: "#0d1219",
-    mainColor: "#e23636",
-    subColor: "#0476f2",
-    textColor: "#f0f0f0",
+    bg: "#0d1219",
+    main: "#e23636",
+    sub: "#0476f2",
+    text: "#f0f0f0",
   },
 };
 
@@ -1146,8 +1150,8 @@ export const ThemesList: Theme[] = Object.keys(themes)
 
 export const ThemesListSorted = [
   ...ThemesList.sort((a, b) => {
-    const b1 = hexToHSL(a.bgColor);
-    const b2 = hexToHSL(b.bgColor);
+    const b1 = hexToHSL(a.bg);
+    const b2 = hexToHSL(b.bg);
     return b2.lgt - b1.lgt;
   }),
 ];
diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index 8d0d1e648637..44a6f3f4a99d 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -276,13 +276,9 @@ async function changeThemeList(): Promise<void> {
   if (Config.randomTheme === "fav" && Config.favThemes.length > 0) {
     themesList = Config.favThemes;
   } else if (Config.randomTheme === "light") {
-    themesList = themes
-      .filter((t) => isColorLight(t.bgColor))
-      .map((t) => t.name);
+    themesList = themes.filter((t) => isColorLight(t.bg)).map((t) => t.name);
   } else if (Config.randomTheme === "dark") {
-    themesList = themes
-      .filter((t) => isColorDark(t.bgColor))
-      .map((t) => t.name);
+    themesList = themes.filter((t) => isColorDark(t.bg)).map((t) => t.name);
   } else if (Config.randomTheme === "on" || Config.randomTheme === "auto") {
     themesList = themes.map((t) => {
       return t.name;
@@ -314,7 +310,7 @@ export async function randomizeTheme(): Promise<void> {
       Arrays.shuffle(themesList);
       randomThemeIndex = 0;
     }
-  } while (!filter(nextTheme.bgColor));
+  } while (!filter(nextTheme.bg));
 
   let colorsOverride: string[] | undefined;
 
diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index bcf7d6a419be..76d23a97a803 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -161,23 +161,17 @@ export async function fillPresetButtons(): Promise<void> {
         const activeTheme = activeThemeName === theme.name ? "active" : "";
         favThemesElHTML += `<div class="theme button ${activeTheme}" theme='${
           theme.name
-        }' style="background: ${theme.bgColor}; color: ${
-          theme.mainColor
-        };outline: 0 solid ${theme.mainColor};">
+        }' style="background: ${theme.bg}; color: ${
+          theme.main
+        };outline: 0 solid ${theme.main};">
           <div class="favButton active"><i class="fas fa-star"></i></div>
           <div class="text">${theme.name.replace(/_/g, " ")}</div>
           <div class="themeBubbles" style="background: ${
-            theme.bgColor
-          };outline: 0.25rem solid ${theme.bgColor};">
-            <div class="themeBubble" style="background: ${
-              theme.mainColor
-            }"></div>
-            <div class="themeBubble" style="background: ${
-              theme.subColor
-            }"></div>
-            <div class="themeBubble" style="background: ${
-              theme.textColor
-            }"></div>
+            theme.bg
+          };outline: 0.25rem solid ${theme.bg};">
+            <div class="themeBubble" style="background: ${theme.main}"></div>
+            <div class="themeBubble" style="background: ${theme.sub}"></div>
+            <div class="themeBubble" style="background: ${theme.text}"></div>
           </div>
           </div>
           `;
@@ -196,17 +190,17 @@ export async function fillPresetButtons(): Promise<void> {
     const activeTheme = activeThemeName === theme.name ? "active" : "";
     themesElHTML += `<div class="theme button ${activeTheme}" theme='${
       theme.name
-    }' style="background: ${theme.bgColor}; color: ${
-      theme.mainColor
-    };outline: 0 solid ${theme.mainColor};">
+    }' style="background: ${theme.bg}; color: ${
+      theme.main
+    };outline: 0 solid ${theme.main};">
       <div class="favButton"><i class="far fa-star"></i></div>
       <div class="text">${theme.name.replace(/_/g, " ")}</div>
       <div class="themeBubbles" style="background: ${
-        theme.bgColor
-      };outline: 0.25rem solid ${theme.bgColor};">
-        <div class="themeBubble" style="background: ${theme.mainColor}"></div>
-        <div class="themeBubble" style="background: ${theme.subColor}"></div>
-        <div class="themeBubble" style="background: ${theme.textColor}"></div>
+        theme.bg
+      };outline: 0.25rem solid ${theme.bg};">
+        <div class="themeBubble" style="background: ${theme.main}"></div>
+        <div class="themeBubble" style="background: ${theme.sub}"></div>
+        <div class="themeBubble" style="background: ${theme.text}"></div>
       </div>
       </div>
       `;
diff --git a/frontend/static/themes/dots.css b/frontend/static/themes/dots.css
index fc10096afd99..4c6c27df26a7 100644
--- a/frontend/static/themes/dots.css
+++ b/frontend/static/themes/dots.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #121520;
-  --caret-color: #fff;
-  --main-color: #fff;
-  --sub-color: #676e8a;
-  --sub-alt-color: #1b1e2c;
-  --text-color: #fff;
-  --error-color: #da3333;
-  --error-extra-color: #791717;
-  --colorful-error-color: #da3333;
-  --colorful-error-extra-color: #791717;
-}
-
 nav {
   gap: 0.5rem;
 }

From c043210389f7ca00bddbcb778f54763046df6491 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 15 Jan 2026 00:45:38 +0100
Subject: [PATCH 02/51] wip

---
 frontend/src/html/head.html                   |  15 +-
 frontend/src/index.html                       |   2 +-
 frontend/src/ts/components/common/ChartJs.tsx |   1 +
 .../src/ts/components/layout/ThemeColors.tsx  |  28 ++++
 frontend/src/ts/components/mount.tsx          |   2 +
 frontend/src/ts/constants/themes.ts           |  14 ++
 .../src/ts/controllers/chart-controller.ts    | 138 +++++++++---------
 .../src/ts/controllers/theme-controller.ts    | 125 ++++++++++------
 frontend/src/ts/elements/keymap.ts            |   4 +-
 frontend/src/ts/elements/monkey-power.ts      |   7 +-
 frontend/src/ts/elements/result-batches.ts    |   4 +-
 .../src/ts/elements/settings/theme-picker.ts  |  14 +-
 frontend/src/ts/elements/theme-colors.ts      |  35 -----
 frontend/src/ts/elements/xp-bar.ts            |   4 +-
 frontend/src/ts/test/result.ts                |   8 +-
 frontend/src/ts/test/test-screenshot.ts       |   4 +-
 frontend/src/ts/test/test-ui.ts               |   4 +-
 frontend/static/themes/darling.css            |  12 --
 frontend/static/themes/serika_dark.css        |  12 --
 19 files changed, 220 insertions(+), 213 deletions(-)
 create mode 100644 frontend/src/ts/components/layout/ThemeColors.tsx
 delete mode 100644 frontend/src/ts/elements/theme-colors.ts
 delete mode 100644 frontend/static/themes/darling.css
 delete mode 100644 frontend/static/themes/serika_dark.css

diff --git a/frontend/src/html/head.html b/frontend/src/html/head.html
index 1588dfd003b9..ab1cdd59e2e3 100644
--- a/frontend/src/html/head.html
+++ b/frontend/src/html/head.html
@@ -27,20 +27,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Monkeytype | A minimalistic, customizable typing test</title>
   <!-- default colors in case theme file fails to load -->
-  <style>
-    :root {
-      --bg-color: #323437;
-      --main-color: #e2b714;
-      --caret-color: #e2b714;
-      --sub-color: #646669;
-      --sub-alt-color: #2c2e31;
-      --text-color: #d1d0c5;
-      --error-color: #ca4754;
-      --error-extra-color: #7e2a33;
-      --colorful-error-color: #ca4754;
-      --colorful-error-extra-color: #7e2a33;
-    }
-  </style>
+  <ThemeColors />
   <link
     rel="icon"
     type="image/x-icon"
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 75440c591c7a..c5d6714a978c 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -71,7 +71,7 @@
       async
       defer
     ></script>
-    <link rel="stylesheet" href="/themes/serika_dark.css" id="currentTheme" />
+    <link rel="stylesheet" id="currentTheme" />
     <link rel="stylesheet" href="" id="globalFunBoxTheme" type="text/css" />
     <script type="module" src="ts/index.ts"></script>
   </body>
diff --git a/frontend/src/ts/components/common/ChartJs.tsx b/frontend/src/ts/components/common/ChartJs.tsx
index cdb9108020ed..a91040222aaf 100644
--- a/frontend/src/ts/components/common/ChartJs.tsx
+++ b/frontend/src/ts/components/common/ChartJs.tsx
@@ -54,6 +54,7 @@ export function ChartJs<T extends ChartType, TData = DefaultDataPoint<T>>(
   createEffect(() => {
     //react on theme changes
     const colors = getThemeColors();
+    console.log("#####", { colors });
     if (!chart) return;
 
     void chart.updateColors(colors);
diff --git a/frontend/src/ts/components/layout/ThemeColors.tsx b/frontend/src/ts/components/layout/ThemeColors.tsx
new file mode 100644
index 000000000000..8f537317b7a0
--- /dev/null
+++ b/frontend/src/ts/components/layout/ThemeColors.tsx
@@ -0,0 +1,28 @@
+import { createEffect, JSXElement } from "solid-js";
+import { getThemeColors } from "../../signals/theme";
+import { useRefWithUtils } from "../../hooks/useRefWithUtils";
+
+export function ThemeColors(): JSXElement {
+  // Refs are assigned by SolidJS via the ref attribute
+  const [styleRef, styleEl] = useRefWithUtils<HTMLStyleElement>();
+
+  createEffect(() => {
+    styleEl()?.setHtml(`
+:root {
+
+    --bg-color: ${getThemeColors().bg};
+    --main-color: ${getThemeColors().main};
+    --caret-color: ${getThemeColors().caret};
+    --sub-color: ${getThemeColors().sub};
+    --sub-alt-color: ${getThemeColors().subAlt};
+    --text-color: ${getThemeColors().text};
+    --error-color: ${getThemeColors().error};
+    --error-extra-color:${getThemeColors().errorExtra};
+    --colorful-error-color: ${getThemeColors().colorfulError};
+    --colorful-error-extra-color: ${getThemeColors().colorfulErrorExtra};
+}
+        `);
+  });
+
+  return <style ref={styleRef} />;
+}
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index 83adca3ef98a..9f125cb222ba 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -5,11 +5,13 @@ import { JSXElement } from "solid-js";
 import { Footer } from "./layout/footer/Footer";
 import { Modals } from "./modals/Modals";
 import { AboutPage } from "./pages/AboutPage";
+import { ThemeColors } from "./layout/ThemeColors";
 
 const components: Record<string, () => JSXElement> = {
   Footer: () => <Footer />,
   Modals: () => <Modals />,
   AboutPage: () => <AboutPage />,
+  ThemeColors: () => <ThemeColors />,
 };
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {
diff --git a/frontend/src/ts/constants/themes.ts b/frontend/src/ts/constants/themes.ts
index cc82a58a7687..6c7c5f5fbd5b 100644
--- a/frontend/src/ts/constants/themes.ts
+++ b/frontend/src/ts/constants/themes.ts
@@ -4,6 +4,7 @@ import { ThemeColors } from "../signals/theme";
 
 export type Theme = {
   name: ThemeName;
+  hasCss?: boolean;
 } & Pick<ThemeColors, "bg" | "main" | "sub" | "text"> &
   Partial<Omit<ThemeColors, "bg" | "main" | "sub" | "text">>;
 
@@ -85,6 +86,7 @@ export const themes: Record<ThemeName, Omit<Theme, "name">> = {
     errorExtra: " #791717",
     colorfulError: " #da3333",
     colorfulErrorExtra: " #791717",
+    hasCss: true,
   },
   nautilus: {
     bg: "#132237",
@@ -101,8 +103,14 @@ export const themes: Record<ThemeName, Omit<Theme, "name">> = {
   serika_dark: {
     bg: "#323437",
     main: "#e2b714",
+    caret: "#e2b714",
     sub: "#646669",
+    subAlt: "#2c2e31",
     text: "#d1d0c5",
+    error: "#ca4754",
+    errorExtra: "#7e2a33",
+    colorfulError: "#ca4754",
+    colorfulErrorExtra: "#7e2a33",
   },
   bushido: {
     bg: "#242933",
@@ -605,8 +613,14 @@ export const themes: Record<ThemeName, Omit<Theme, "name">> = {
   darling: {
     bg: "#fec8cd",
     main: "#ffffff",
+    caret: "#ffffff",
     sub: "#a30000",
+    subAlt: "#f2babd",
     text: "#ffffff",
+    error: "#2e7dde",
+    errorExtra: "#2e7dde",
+    colorfulError: "#2e7dde",
+    colorfulErrorExtra: "#2e7dde",
   },
   repose_dark: {
     bg: "#2f3338",
diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
index d11ba983667b..5efe2f79eed2 100644
--- a/frontend/src/ts/controllers/chart-controller.ts
+++ b/frontend/src/ts/controllers/chart-controller.ts
@@ -60,7 +60,6 @@ Chart.defaults.elements.line.fill = "origin";
 import "chartjs-adapter-date-fns";
 import { format } from "date-fns/format";
 import Config from "../config";
-import * as ThemeColors from "../elements/theme-colors";
 import * as ConfigEvent from "../observables/config-event";
 import * as TestInput from "../test/test-input";
 import * as DateTime from "../utils/date-and-time";
@@ -69,7 +68,10 @@ import * as Numbers from "@monkeytype/util/numbers";
 import { blendTwoHexColors } from "../utils/colors";
 import { typedKeys } from "../utils/misc";
 import { qs } from "../utils/dom";
-import { ThemeColors as ThemeColorsType } from "../signals/theme";
+import {
+  getThemeColors,
+  ThemeColors as ThemeColorsType,
+} from "../signals/theme";
 
 export class ChartWithUpdateColors<
   TType extends ChartType = ChartType,
@@ -1121,13 +1123,9 @@ async function updateColors<
   chart: ChartWithUpdateColors<TType, TData, TLabel>,
   colors?: ThemeColorsType,
 ): Promise<void> {
-  const bgcolor = colors?.bg ?? (await ThemeColors.get("bg"));
-  const subcolor = colors?.sub ?? (await ThemeColors.get("sub"));
-  const subaltcolor = colors?.subAlt ?? (await ThemeColors.get("subAlt"));
-  const maincolor = colors?.main ?? (await ThemeColors.get("main"));
-  const errorcolor = colors?.error ?? (await ThemeColors.get("error"));
-  const textcolor = colors?.text ?? (await ThemeColors.get("text"));
-  const gridcolor = subaltcolor;
+  colors ??= getThemeColors();
+
+  const gridcolor = colors.subAlt;
 
   for (const scaleKey of typedKeys(chart.scales)) {
     //@ts-expect-error cant figure out this type but it works fine
@@ -1135,8 +1133,8 @@ async function updateColors<
     scale.grid.color = gridcolor;
     scale.grid.tickColor = gridcolor;
     scale.grid.borderColor = gridcolor;
-    scale.ticks.color = subcolor;
-    scale.title.color = subcolor;
+    scale.ticks.color = colors.sub;
+    scale.title.color = colors.sub;
   }
 
   if (chart.id === result.id) {
@@ -1144,31 +1142,31 @@ async function updateColors<
 
     const wpm = c.getDataset("wpm");
     wpm.backgroundColor = "transparent";
-    wpm.borderColor = maincolor;
-    wpm.pointBackgroundColor = maincolor;
-    wpm.pointBorderColor = maincolor;
+    wpm.borderColor = colors.main;
+    wpm.pointBackgroundColor = colors.main;
+    wpm.pointBorderColor = colors.main;
 
     const raw = c.getDataset("raw");
     raw.backgroundColor = "transparent";
-    raw.borderColor = maincolor + "99";
-    raw.pointBackgroundColor = maincolor + "99";
-    raw.pointBorderColor = maincolor + "99";
+    raw.borderColor = colors.main + "99";
+    raw.pointBackgroundColor = colors.main + "99";
+    raw.pointBorderColor = colors.main + "99";
 
     const error = c.getDataset("error");
-    error.backgroundColor = errorcolor;
-    error.borderColor = errorcolor;
-    error.pointBackgroundColor = errorcolor;
-    error.pointBorderColor = errorcolor;
+    error.backgroundColor = colors.error;
+    error.borderColor = colors.error;
+    error.pointBackgroundColor = colors.error;
+    error.pointBorderColor = colors.error;
 
     const burst = c.getDataset("burst");
     burst.backgroundColor = blendTwoHexColors(
-      subaltcolor,
-      subaltcolor + "00",
+      colors.subAlt,
+      colors.subAlt + "00",
       0.5,
     );
-    burst.borderColor = subcolor;
-    burst.pointBackgroundColor = subcolor;
-    burst.pointBorderColor = subcolor;
+    burst.borderColor = colors.sub;
+    burst.pointBackgroundColor = colors.sub;
+    burst.pointBorderColor = colors.sub;
 
     chart.update("resize");
     return;
@@ -1179,25 +1177,25 @@ async function updateColors<
 
     const wpm = c.getDataset("wpm");
     wpm.backgroundColor = "transparent";
-    wpm.borderColor = maincolor;
-    wpm.pointBackgroundColor = maincolor;
-    wpm.pointBorderColor = maincolor;
+    wpm.borderColor = colors.main;
+    wpm.pointBackgroundColor = colors.main;
+    wpm.pointBorderColor = colors.main;
 
     const error = c.getDataset("error");
-    error.backgroundColor = errorcolor;
-    error.borderColor = errorcolor;
-    error.pointBackgroundColor = errorcolor;
-    error.pointBorderColor = errorcolor;
+    error.backgroundColor = colors.error;
+    error.borderColor = colors.error;
+    error.pointBackgroundColor = colors.error;
+    error.pointBorderColor = colors.error;
 
     const burst = c.getDataset("burst");
     burst.backgroundColor = blendTwoHexColors(
-      subaltcolor,
-      subaltcolor + "00",
+      colors.subAlt,
+      colors.subAlt + "00",
       0.75,
     );
-    burst.borderColor = subcolor;
-    burst.pointBackgroundColor = subcolor;
-    burst.pointBorderColor = subcolor;
+    burst.borderColor = colors.sub;
+    burst.pointBackgroundColor = colors.sub;
+    burst.pointBorderColor = colors.sub;
 
     chart.update("resize");
     return;
@@ -1207,15 +1205,15 @@ async function updateColors<
   chart.data.datasets[0].borderColor = (ctx): string => {
     // oxlint-disable-next-line no-unsafe-member-access
     const isPb = ctx.raw?.isPb as boolean;
-    const color = isPb ? textcolor : maincolor;
+    const color = isPb ? colors.text : colors.main;
     return color;
   };
 
   if (chart.data.datasets[1]) {
-    chart.data.datasets[1].borderColor = subcolor;
+    chart.data.datasets[1].borderColor = colors.sub;
   }
   if (chart.data.datasets[2]) {
-    chart.data.datasets[2].borderColor = errorcolor;
+    chart.data.datasets[2].borderColor = colors.error;
   }
 
   const dataset0 = (
@@ -1227,16 +1225,16 @@ async function updateColors<
       dataset0.pointBackgroundColor = (ctx): string => {
         //@ts-expect-error not sure why raw comes out to unknown, but this works
         const isPb = ctx.raw?.isPb as boolean;
-        const color = isPb ? textcolor : maincolor;
+        const color = isPb ? colors.text : colors.main;
         return color;
       };
     } else if (chart.config.type === "bar") {
-      dataset0.backgroundColor = maincolor;
+      dataset0.backgroundColor = colors.main;
     }
   } else if (chart.data.datasets[0].type === "bar") {
-    chart.data.datasets[0].backgroundColor = maincolor;
+    chart.data.datasets[0].backgroundColor = colors.main;
   } else if (chart.data.datasets[0].type === "line") {
-    dataset0.pointBackgroundColor = maincolor;
+    dataset0.pointBackgroundColor = colors.main;
   }
 
   const dataset1 = chart.data.datasets[1] as ChartDataset<"line", TData>;
@@ -1244,19 +1242,19 @@ async function updateColors<
   if (dataset1 !== undefined) {
     if (dataset1.type === undefined) {
       if (chart.config.type === "line") {
-        dataset1.pointBackgroundColor = subcolor;
+        dataset1.pointBackgroundColor = colors.sub;
       } else if (chart.config.type === "bar") {
-        dataset1.backgroundColor = subcolor;
+        dataset1.backgroundColor = colors.sub;
       }
     } else if ((dataset1?.type as "bar" | "line") === "bar") {
-      dataset1.backgroundColor = subcolor;
+      dataset1.backgroundColor = colors.sub;
     } else if (dataset1.type === "line") {
-      dataset1.pointBackgroundColor = subcolor;
+      dataset1.pointBackgroundColor = colors.sub;
     }
   }
   if (chart.data.datasets.length === 2) {
     dataset1.borderColor = (): string => {
-      const color = subcolor;
+      const color = colors.sub;
       return color;
     };
   }
@@ -1265,18 +1263,18 @@ async function updateColors<
 
   if (chart.data.datasets.length === 7) {
     dataset2.borderColor = (): string => {
-      const color = subcolor;
+      const color = colors.sub;
       return color;
     };
     const avg10On = Config.accountChart[2] === "on";
     const avg100On = Config.accountChart[3] === "on";
 
-    const text02 = blendTwoHexColors(bgcolor, textcolor, 0.2);
-    const main02 = blendTwoHexColors(bgcolor, maincolor, 0.2);
-    const main04 = blendTwoHexColors(bgcolor, maincolor, 0.4);
+    const text02 = blendTwoHexColors(colors.bg, colors.text, 0.2);
+    const main02 = blendTwoHexColors(colors.bg, colors.main, 0.2);
+    const main04 = blendTwoHexColors(colors.bg, colors.main, 0.4);
 
-    const sub02 = blendTwoHexColors(bgcolor, subcolor, 0.2);
-    const sub04 = blendTwoHexColors(bgcolor, subcolor, 0.4);
+    const sub02 = blendTwoHexColors(colors.bg, colors.sub, 0.2);
+    const sub04 = blendTwoHexColors(colors.bg, colors.sub, 0.4);
 
     const [
       wpmDataset,
@@ -1306,28 +1304,28 @@ async function updateColors<
       accDataset.pointBackgroundColor = sub02;
       ao10wpmDataset.borderColor = main04;
       ao10accDataset.borderColor = sub04;
-      ao100wpmDataset.borderColor = maincolor;
-      ao100accDataset.borderColor = subcolor;
+      ao100wpmDataset.borderColor = colors.main;
+      ao100accDataset.borderColor = colors.sub;
     } else if ((avg10On && !avg100On) || (!avg10On && avg100On)) {
       pbDataset.borderColor = text02;
       wpmDataset.pointBackgroundColor = main04;
       accDataset.pointBackgroundColor = sub04;
-      ao10wpmDataset.borderColor = maincolor;
-      ao100wpmDataset.borderColor = maincolor;
-      ao10accDataset.borderColor = subcolor;
-      ao100accDataset.borderColor = subcolor;
+      ao10wpmDataset.borderColor = colors.main;
+      ao100wpmDataset.borderColor = colors.main;
+      ao10accDataset.borderColor = colors.sub;
+      ao100accDataset.borderColor = colors.sub;
     } else {
       pbDataset.borderColor = text02;
-      wpmDataset.pointBackgroundColor = maincolor;
-      accDataset.pointBackgroundColor = subcolor;
+      wpmDataset.pointBackgroundColor = colors.main;
+      accDataset.pointBackgroundColor = colors.sub;
     }
   }
 
   const chartScaleOptions = chart.options as ScaleChartOptions<TType>;
   Object.keys(chartScaleOptions.scales).forEach((scaleID) => {
     const axis = chartScaleOptions.scales[scaleID] as CartesianScaleOptions;
-    axis.ticks.color = subcolor;
-    axis.title.color = subcolor;
+    axis.ticks.color = colors.sub;
+    axis.title.color = colors.sub;
     axis.grid.color = gridcolor;
     axis.grid.tickColor = gridcolor;
     axis.grid.borderColor = gridcolor;
@@ -1336,7 +1334,7 @@ async function updateColors<
   try {
     (
       dataset0.trendlineLinear as TrendlineLinearPlugin.TrendlineLinearOptions
-    ).style = subcolor;
+    ).style = colors.sub;
   } catch {}
 
   (
@@ -1344,10 +1342,10 @@ async function updateColors<
       .annotations as AnnotationOptions<"line">[]
   ).forEach((annotation) => {
     if (annotation.id !== "funbox-label") {
-      annotation.borderColor = subcolor;
+      annotation.borderColor = colors.sub;
     }
-    (annotation.label as LabelOptions).backgroundColor = subcolor;
-    (annotation.label as LabelOptions).color = bgcolor;
+    (annotation.label as LabelOptions).backgroundColor = colors.sub;
+    (annotation.label as LabelOptions).color = colors.bg;
   });
 
   chart.update("none");
diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index 44a6f3f4a99d..b103535415ae 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -1,4 +1,3 @@
-import * as ThemeColors from "../elements/theme-colors";
 import * as ChartController from "./chart-controller";
 import * as Misc from "../utils/misc";
 import * as Arrays from "../utils/arrays";
@@ -11,10 +10,15 @@ import * as Notifications from "../elements/notifications";
 import * as Loader from "../elements/loader";
 import { debounce } from "throttle-debounce";
 import { ThemeName } from "@monkeytype/schemas/configs";
-import { themes, ThemesList } from "../constants/themes";
+import { Theme, themes, ThemesList } from "../constants/themes";
 import fileStorage from "../utils/file-storage";
 import { qs, qsa } from "../utils/dom";
 import { setThemeIndicator } from "../signals/core";
+import {
+  getThemeColors,
+  setThemeColors,
+  ThemeColors as ThemeColorsType,
+} from "../signals/theme";
 
 export let randomTheme: ThemeName | string | null = null;
 let isPreviewingTheme = false;
@@ -35,22 +39,20 @@ export const colorVars = [
 
 async function updateFavicon(): Promise<void> {
   setTimeout(async () => {
-    let maincolor, bgcolor;
-    bgcolor = await ThemeColors.get("bg");
-    maincolor = await ThemeColors.get("main");
+    let { main, bg } = getThemeColors();
     if (Misc.isDevEnvironment()) {
-      [maincolor, bgcolor] = [bgcolor, maincolor];
+      [main, bg] = [bg, main];
     }
-    if (bgcolor === maincolor) {
-      bgcolor = "#111";
-      maincolor = "#eee";
+    if (bg === main) {
+      bg = "#111";
+      main = "#eee";
     }
 
     const svgPre = `
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
   <style>
-    #bg{fill:${bgcolor};}
-    path{fill:${maincolor};}
+    #bg{fill:${bg};}
+    path{fill:${main};}
   </style>
   <g>
     <path id="bg" d="M0 16Q0 0 16 0h32q16 0 16 16v32q0 16-16 16H16Q0 64 0 48"/>
@@ -73,8 +75,10 @@ function clearCustomTheme(): void {
 }
 
 let loadStyleLoaderTimeouts: NodeJS.Timeout[] = [];
-
-export async function loadStyle(name: string): Promise<void> {
+export async function loadStyle(
+  name: string,
+  props: { hasCss: boolean },
+): Promise<void> {
   return new Promise((resolve) => {
     function swapCurrentToNext(): void {
       console.debug("Theme controller swapping elements");
@@ -96,6 +100,15 @@ export async function loadStyle(name: string): Promise<void> {
         Loader.show();
       }, 100),
     );
+
+    const afterLoad = (): void => {
+      Loader.hide();
+      swapCurrentToNext();
+      loadStyleLoaderTimeouts.map((t) => clearTimeout(t));
+      loadStyleLoaderTimeouts = [];
+      qsa("#keymap .keymapKey")?.setStyle({});
+      resolve();
+    };
     qs("#nextTheme")?.remove();
     const headScript = document.querySelector("#currentTheme");
     const link = document.createElement("link");
@@ -104,39 +117,32 @@ export async function loadStyle(name: string): Promise<void> {
     link.id = "nextTheme";
     link.onload = (): void => {
       console.debug("Theme controller loaded style", name);
-      Loader.hide();
-      swapCurrentToNext();
-      loadStyleLoaderTimeouts.map((t) => clearTimeout(t));
-      loadStyleLoaderTimeouts = [];
-      qsa("#keymap .keymapKey")?.setStyle({});
-      resolve();
+      afterLoad();
     };
     link.onerror = (e): void => {
       console.debug("Theme controller failed to load style", name, e);
       console.error(`Failed to load theme ${name}`, e);
-      Loader.hide();
       Notifications.add("Failed to load theme", 0);
-      swapCurrentToNext();
-      loadStyleLoaderTimeouts.map((t) => clearTimeout(t));
-      loadStyleLoaderTimeouts = [];
-      qsa("#keymap .keymapKey")?.setStyle({});
-      resolve();
+      afterLoad();
     };
-    if (name === "custom") {
-      link.href = `/themes/serika_dark.css`;
-    } else {
+
+    if (name !== "custom") {
       link.href = `/themes/${name}.css`;
     }
 
-    if (headScript === null) {
-      console.debug("Theme controller appending link to the head", link);
-      document.head.appendChild(link);
+    if (props.hasCss) {
+      if (headScript === null) {
+        console.debug("Theme controller appending link to the head", link);
+        document.head.appendChild(link);
+      } else {
+        console.debug(
+          "Theme controller inserting link after current theme",
+          link,
+        );
+        headScript.after(link);
+      }
     } else {
-      console.debug(
-        "Theme controller inserting link after current theme",
-        link,
-      );
-      headScript.after(link);
+      afterLoad();
     }
   });
 }
@@ -148,6 +154,22 @@ export async function loadStyle(name: string): Promise<void> {
 //   UpdateConfig.setConfig("customThemeColors", colors,nosave);
 // }
 
+function convertToTheme(colors: string[]): Theme {
+  return {
+    name: "Custom" as ThemeName,
+    bg: colors[0] as string,
+    main: colors[1] as string,
+    caret: colors[2] as string,
+    sub: colors[3] as string,
+    subAlt: colors[4] as string,
+    text: colors[5] as string,
+    error: colors[6] as string,
+    errorExtra: colors[7] as string,
+    colorfulError: colors[8] as string,
+    colorfulErrorExtra: colors[9] as string,
+  };
+}
+
 async function apply(
   themeName: string,
   customColorsOverride?: string[],
@@ -159,9 +181,24 @@ async function apply(
     customColorsOverride,
     isPreview,
   );
+  //TODO check for the new style to match the old one and skip loading. Problem exists on prod
+  const isCustom = themeName === "custom";
+  const name = isCustom ? "custom" : themeName;
+
+  const themeColors = isCustom
+    ? convertToTheme(customColorsOverride ?? Config.customThemeColors)
+    : themes[themeName as ThemeName];
+
+  console.debug("Theme controller apply", {
+    isCustom,
+    name,
+    themeColors,
+    customColorsOverride,
+    config: Config.customThemeColors,
+  });
+  setThemeColors(themeColors as ThemeColorsType);
 
-  const name = customColorsOverride ? "custom" : themeName;
-
+  /*
   if ((Config.customTheme && !isPreview) || customColorsOverride) {
     const colors = customColorsOverride ?? Config.customThemeColors;
 
@@ -169,26 +206,24 @@ async function apply(
       const colorVar = colorVars[i] as string;
       document.documentElement.style.setProperty(colorVar, colors[i] as string);
     }
-  }
+  }*/
 
   qsa("#keymap .keymapKey")?.setStyle({});
-  await loadStyle(name);
+  await loadStyle(name, { hasCss: themeColors.hasCss ?? false });
 
+  //TODO not needed?!
   if (name !== "custom") {
     clearCustomTheme();
   }
 
-  ThemeColors.update();
-
   // if (!isPreview) {
-  const colors = await ThemeColors.getAll();
   qsa("#keymap .keymapKey")?.setStyle({});
   ChartController.updateAllChartColors();
   void updateFavicon();
-  qs("#metaThemeColor")?.setAttribute("content", colors.bg);
+  qs("#metaThemeColor")?.setAttribute("content", themeColors.bg);
   updateFooterIndicator(isPreview ? themeName : undefined);
 
-  if (isColorDark(await ThemeColors.get("bg"))) {
+  if (isColorDark(themeColors.bg)) {
     qs("body")?.addClass("darkMode");
   } else {
     qs("body")?.removeClass("darkMode");
diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
index 25155e8401a6..58d922658f46 100644
--- a/frontend/src/ts/elements/keymap.ts
+++ b/frontend/src/ts/elements/keymap.ts
@@ -1,5 +1,4 @@
 import Config from "../config";
-import * as ThemeColors from "./theme-colors";
 import * as ConfigEvent from "../observables/config-event";
 import * as KeymapEvent from "../observables/keymap-event";
 import * as Misc from "../utils/misc";
@@ -18,6 +17,7 @@ import { LayoutObject } from "@monkeytype/schemas/layouts";
 import { animate } from "animejs";
 import { ElementsWithUtils, qsr } from "../utils/dom";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
+import { getThemeColors } from "../signals/theme";
 
 export const keyDataDelimiter = "\uE000";
 const keymap = qsr("#keymap");
@@ -106,7 +106,7 @@ async function flashKey(key: string, correct?: boolean): Promise<void> {
     const elements = findKeyElements(key);
     if (elements === null || elements.length === 0) return;
 
-    const themecolors = await ThemeColors.getAll();
+    const themecolors = getThemeColors();
 
     try {
       let startingStyle = {
diff --git a/frontend/src/ts/elements/monkey-power.ts b/frontend/src/ts/elements/monkey-power.ts
index c5529b4c628e..f2220adc444e 100644
--- a/frontend/src/ts/elements/monkey-power.ts
+++ b/frontend/src/ts/elements/monkey-power.ts
@@ -1,9 +1,9 @@
-import * as ThemeColors from "./theme-colors";
 import * as SlowTimer from "../states/slow-timer";
 import Config from "../config";
 import { isSafeNumber } from "@monkeytype/util/numbers";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { ElementWithUtils, qsr } from "../utils/dom";
+import { getThemeColors } from "../signals/theme";
 
 const html = qsr("html");
 const body = qsr("body");
@@ -238,11 +238,12 @@ export async function addPower(good = true, extra = false): Promise<void> {
       i > 0;
       i--
     ) {
+      const { caret, error } = getThemeColors();
       const color = ["2", "4"].includes(Config.monkeyPowerLevel)
         ? randomColor()
         : good
-          ? await ThemeColors.get("caret")
-          : await ThemeColors.get("error");
+          ? caret
+          : error;
       ctx.particles.push(
         createParticle(...(coords as [x: number, y: number]), color),
       );
diff --git a/frontend/src/ts/elements/result-batches.ts b/frontend/src/ts/elements/result-batches.ts
index 9f129de2b1f4..b9169fbbf644 100644
--- a/frontend/src/ts/elements/result-batches.ts
+++ b/frontend/src/ts/elements/result-batches.ts
@@ -1,8 +1,8 @@
 import * as DB from "../db";
 import * as ServerConfiguration from "../ape/server-configuration";
 import { blendTwoHexColors } from "../utils/colors";
-import * as ThemeColors from "../elements/theme-colors";
 import { mapRange } from "@monkeytype/util/numbers";
+import { getThemeColors } from "../signals/theme";
 
 export function hide(): void {
   $(".pageAccount .resultBatches").addClass("hidden");
@@ -56,7 +56,7 @@ export async function update(): Promise<void> {
     `${results?.length} / ${completedTests} (${percentageDownloaded}%)`,
   );
 
-  const colors = await ThemeColors.getAll();
+  const colors = getThemeColors();
 
   bars.limit.fill.css({
     width: Math.min(percentageLimit, 100) + "%",
diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index 76d23a97a803..dfe4f40bea3f 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -3,7 +3,6 @@ import * as ThemeController from "../../controllers/theme-controller";
 import * as Misc from "../../utils/misc";
 import * as Colors from "../../utils/colors";
 import * as Notifications from "../notifications";
-import * as ThemeColors from "../theme-colors";
 import * as ChartController from "../../controllers/chart-controller";
 import * as Loader from "../loader";
 import * as DB from "../../db";
@@ -12,8 +11,9 @@ import { isAuthenticated } from "../../firebase";
 import { getActivePage } from "../../signals/core";
 import { CustomThemeColors, ThemeName } from "@monkeytype/schemas/configs";
 import { captureException } from "../../sentry";
-import { ThemesListSorted } from "../../constants/themes";
+import { themes, ThemesListSorted } from "../../constants/themes";
 import { qs } from "../../utils/dom";
+import { getThemeColors } from "../../signals/theme";
 
 function updateActiveButton(): void {
   let activeThemeName: string = Config.theme;
@@ -425,16 +425,16 @@ $(".pageSettings .section.themes .tabContainer .customTheme input.input")
 $(".pageSettings #loadCustomColorsFromPreset").on("click", async () => {
   // previewTheme(Config.theme);
   // $("#currentTheme").attr("href", `themes/${Config.theme}.css`);
-  await ThemeController.loadStyle(Config.theme);
-
-  ThemeController.colorVars.forEach((e) => {
-    document.documentElement.style.setProperty(e, "");
+  const theme = themes[Config.theme];
+  await ThemeController.loadStyle(Config.theme, {
+    hasCss: theme.hasCss ?? false,
   });
 
   // setTimeout(async () => {
   ChartController.updateAllChartColors();
 
-  const themeColors = await ThemeColors.getAll();
+  //TODO check
+  const themeColors = getThemeColors();
 
   ThemeController.colorVars.forEach((colorName) => {
     let color;
diff --git a/frontend/src/ts/elements/theme-colors.ts b/frontend/src/ts/elements/theme-colors.ts
deleted file mode 100644
index d95dc042c912..000000000000
--- a/frontend/src/ts/elements/theme-colors.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import {
-  ColorName,
-  getThemeColors,
-  setThemeColors,
-  ThemeColors,
-} from "../signals/theme";
-
-export async function get(color: ColorName): Promise<string> {
-  return getThemeColors()[color];
-}
-
-export async function getAll(): Promise<ThemeColors> {
-  return getThemeColors();
-}
-
-export function update(): void {
-  const st = getComputedStyle(document.body);
-
-  setThemeColors({
-    bg: st.getPropertyValue("--bg-color").replace(" ", ""),
-    main: st.getPropertyValue("--main-color").replace(" ", ""),
-    caret: st.getPropertyValue("--caret-color").replace(" ", ""),
-    sub: st.getPropertyValue("--sub-color").replace(" ", ""),
-    subAlt: st.getPropertyValue("--sub-alt-color").replace(" ", ""),
-    text: st.getPropertyValue("--text-color").replace(" ", ""),
-    error: st.getPropertyValue("--error-color").replace(" ", ""),
-    errorExtra: st.getPropertyValue("--error-extra-color").replace(" ", ""),
-    colorfulError: st
-      .getPropertyValue("--colorful-error-color")
-      .replace(" ", ""),
-    colorfulErrorExtra: st
-      .getPropertyValue("--colorful-error-extra-color")
-      .replace(" ", ""),
-  });
-}
diff --git a/frontend/src/ts/elements/xp-bar.ts b/frontend/src/ts/elements/xp-bar.ts
index 453ff8fc068f..75f362d6ec9a 100644
--- a/frontend/src/ts/elements/xp-bar.ts
+++ b/frontend/src/ts/elements/xp-bar.ts
@@ -1,9 +1,9 @@
 import * as Misc from "../utils/misc";
 import * as Levels from "../utils/levels";
-import { getAll } from "./theme-colors";
 import { XpBreakdown } from "@monkeytype/schemas/results";
 import { isSafeNumber } from "@monkeytype/util/numbers";
 import { animate } from "animejs";
+import { getThemeColors } from "../signals/theme";
 
 let breakdownVisible = false;
 let skip = false;
@@ -409,7 +409,7 @@ async function animateXpBar(
 }
 
 async function flashLevel(): Promise<void> {
-  const themecolors = await getAll();
+  const themecolors = getThemeColors();
 
   levelEl.textContent = `${parseInt(levelEl.textContent ?? "0") + 1}`;
 
diff --git a/frontend/src/ts/test/result.ts b/frontend/src/ts/test/result.ts
index faedc8adbcfb..520847b6003b 100644
--- a/frontend/src/ts/test/result.ts
+++ b/frontend/src/ts/test/result.ts
@@ -7,7 +7,6 @@ import QuotesController, { Quote } from "../controllers/quotes-controller";
 import * as DB from "../db";
 import * as Loader from "../elements/loader";
 import * as Notifications from "../elements/notifications";
-import * as ThemeColors from "../elements/theme-colors";
 import { isAuthenticated } from "../firebase";
 import * as quoteRateModal from "../modals/quote-rate";
 import * as GlarsesMode from "../states/glarses-mode";
@@ -48,6 +47,7 @@ import * as TestState from "./test-state";
 import { blurInputElement } from "../input/input-element";
 import * as ConnectionState from "../states/connection";
 import { currentQuote } from "./test-words";
+import { getThemeColors } from "../signals/theme";
 
 let result: CompletedEvent;
 let minChartVal: number;
@@ -137,7 +137,7 @@ async function updateChartData(): Promise<void> {
     chartData2.pop();
   }
 
-  const subcolor = await ThemeColors.get("sub");
+  const subcolor = getThemeColors().sub;
 
   if (Config.funbox.length > 0) {
     let content = "";
@@ -281,7 +281,7 @@ function applyFakeChartData(): void {
 }
 
 export async function updateChartPBLine(): Promise<void> {
-  const themecolors = await ThemeColors.getAll();
+  const themecolors = getThemeColors();
   const localPb = await DB.getLocalPB(
     result.mode,
     result.mode2,
@@ -724,7 +724,7 @@ async function updateTags(dontSave: boolean): Promise<void> {
         );
         // console.log("new pb for tag " + tag.display);
       } else {
-        const themecolors = await ThemeColors.getAll();
+        const themecolors = getThemeColors();
         resultAnnotation.push({
           display: true,
           type: "line",
diff --git a/frontend/src/ts/test/test-screenshot.ts b/frontend/src/ts/test/test-screenshot.ts
index 105275216431..d7bb30aaa6de 100644
--- a/frontend/src/ts/test/test-screenshot.ts
+++ b/frontend/src/ts/test/test-screenshot.ts
@@ -4,13 +4,13 @@ import * as Misc from "../utils/misc";
 import { isAuthenticated } from "../firebase";
 import { getActiveFunboxesWithFunction } from "./funbox/list";
 import * as DB from "../db";
-import * as ThemeColors from "../elements/theme-colors";
 import { format } from "date-fns/format";
 import { getActivePage } from "../signals/core";
 import { getHtmlByUserFlags } from "../controllers/user-flag-controller";
 import * as Notifications from "../elements/notifications";
 import { convertRemToPixels } from "../utils/numbers";
 import * as TestState from "./test-state";
+import { getThemeColors } from "../signals/theme";
 
 let revealReplay = false;
 let revertCookie = false;
@@ -135,7 +135,7 @@ async function generateCanvas(): Promise<HTMLCanvasElement | null> {
 
     // Target the HTML root to include .customBackground
     const fullCanvas = await domToCanvas(root, {
-      backgroundColor: await ThemeColors.get("bg"),
+      backgroundColor: getThemeColors().bg,
       // Sharp output
       scale: window.devicePixelRatio ?? 1,
       style: {
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index efbe30db3784..1fe1c69c9802 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -1,5 +1,4 @@
 import * as Notifications from "../elements/notifications";
-import * as ThemeColors from "../elements/theme-colors";
 import Config, { setConfig } from "../config";
 import * as TestWords from "./test-words";
 import * as TestInput from "./test-input";
@@ -58,6 +57,7 @@ import * as ModesNotice from "../elements/modes-notice";
 import * as Last10Average from "../elements/last-10-average";
 import * as MemoryFunboxTimer from "./funbox/memory-funbox-timer";
 import { qsr } from "../utils/dom";
+import { getThemeColors } from "../signals/theme";
 
 export const updateHintsPositionDebounced = Misc.debounceUntilResolved(
   updateHintsPosition,
@@ -1421,7 +1421,7 @@ export async function applyBurstHeatmap(): Promise<void> {
       burstlist[index] = Math.round(typingSpeedUnit.fromWpm(burst));
     });
 
-    const themeColors = await ThemeColors.getAll();
+    const themeColors = getThemeColors();
 
     let colors = [
       themeColors.colorfulError,
diff --git a/frontend/static/themes/darling.css b/frontend/static/themes/darling.css
deleted file mode 100644
index bb0ffea13c3d..000000000000
--- a/frontend/static/themes/darling.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #fec8cd;
-  --main-color: #ffffff;
-  --caret-color: #ffffff;
-  --sub-color: #a30000;
-  --sub-alt-color: #f2babd;
-  --text-color: #ffffff;
-  --error-color: #2e7dde;
-  --error-extra-color: #2e7dde;
-  --colorful-error-color: #2e7dde;
-  --colorful-error-extra-color: #2e7dde;
-}
diff --git a/frontend/static/themes/serika_dark.css b/frontend/static/themes/serika_dark.css
deleted file mode 100644
index 8fd02012497a..000000000000
--- a/frontend/static/themes/serika_dark.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #323437;
-  --main-color: #e2b714;
-  --caret-color: #e2b714;
-  --sub-color: #646669;
-  --sub-alt-color: #2c2e31;
-  --text-color: #d1d0c5;
-  --error-color: #ca4754;
-  --error-extra-color: #7e2a33;
-  --colorful-error-color: #ca4754;
-  --colorful-error-extra-color: #7e2a33;
-}

From d6fed71aa9964ff06a6937c42f25f2acc3f11004 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 15 Jan 2026 14:10:38 +0100
Subject: [PATCH 03/51] wip

---
 frontend/scripts/check-assets.ts              | 23 ++++---
 frontend/src/html/head.html                   |  3 +-
 frontend/src/index.html                       |  2 +-
 frontend/src/ts/auth.ts                       |  1 -
 frontend/src/ts/commandline/lists/themes.ts   | 10 +--
 frontend/src/ts/components/common/ChartJs.tsx |  3 -
 frontend/src/ts/components/layout/Theme.tsx   | 56 +++++++++++++++++
 .../src/ts/components/layout/ThemeColors.tsx  | 28 ---------
 frontend/src/ts/components/mount.tsx          |  4 +-
 .../src/ts/components/pages/AboutPage.tsx     |  7 +--
 frontend/src/ts/constants/themes.ts           | 61 ++++++++++++-------
 .../src/ts/controllers/chart-controller.ts    |  5 ++
 .../src/ts/controllers/theme-controller.ts    | 44 ++++++-------
 .../src/ts/elements/settings/theme-picker.ts  | 24 +++-----
 frontend/src/ts/pages/account.ts              |  1 +
 frontend/src/ts/pages/settings.ts             |  6 +-
 frontend/src/ts/signals/core.ts               |  2 +-
 frontend/src/ts/signals/theme.ts              |  9 ++-
 18 files changed, 169 insertions(+), 120 deletions(-)
 create mode 100644 frontend/src/ts/components/layout/Theme.tsx
 delete mode 100644 frontend/src/ts/components/layout/ThemeColors.tsx

diff --git a/frontend/scripts/check-assets.ts b/frontend/scripts/check-assets.ts
index 881d2e720d43..2d4b2f2521af 100644
--- a/frontend/scripts/check-assets.ts
+++ b/frontend/scripts/check-assets.ts
@@ -17,7 +17,7 @@ import { Layout, ThemeName } from "@monkeytype/schemas/configs";
 import { LayoutsList } from "../src/ts/constants/layouts";
 import { KnownFontName } from "@monkeytype/schemas/fonts";
 import { Fonts } from "../src/ts/constants/fonts";
-import { ThemesList } from "../src/ts/constants/themes";
+import { themes, ThemeSchema, ThemesList } from "../src/ts/constants/themes";
 import { z } from "zod";
 import { ChallengeSchema, Challenge } from "@monkeytype/schemas/challenges";
 import { LayoutObject, LayoutObjectSchema } from "@monkeytype/schemas/layouts";
@@ -381,13 +381,14 @@ async function validateThemes(): Promise<void> {
   //no missing files
   const themeFiles = fs.readdirSync("./static/themes");
 
-  //missing theme files
-  ThemesList.filter((it) => !themeFiles.includes(it.name + ".css")).forEach(
-    (it) =>
-      problems.add(
-        it.name,
-        `missing file frontend/static/themes/${it.name}.css`,
-      ),
+  //missing or additional theme files (mismatch in hasCss)
+  ThemesList.filter(
+    (it) => themeFiles.includes(it.name + ".css") !== (it.hasCss ?? false),
+  ).forEach((it) =>
+    problems.add(
+      it.name,
+      `${it.hasCss ? "missing" : "additional"} file frontend/static/themes/${it.name}.css`,
+    ),
   );
 
   //additional theme files
@@ -395,6 +396,12 @@ async function validateThemes(): Promise<void> {
     .filter((it) => !ThemesList.some((theme) => theme.name + ".css" === it))
     .forEach((it) => problems.add("_additional", it));
 
+  //validate theme colors are valid hex colors, not covered by typescipt
+  for (const name of Object.keys(themes)) {
+    const theme = themes[name as ThemeName];
+    problems.addValidation(name as ThemeName, ThemeSchema.safeParse(theme));
+  }
+
   console.log(problems.toString());
 
   if (problems.hasError()) {
diff --git a/frontend/src/html/head.html b/frontend/src/html/head.html
index ab1cdd59e2e3..34e74e3dfdc2 100644
--- a/frontend/src/html/head.html
+++ b/frontend/src/html/head.html
@@ -26,8 +26,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Monkeytype | A minimalistic, customizable typing test</title>
-  <!-- default colors in case theme file fails to load -->
-  <ThemeColors />
+  <Theme />
   <link
     rel="icon"
     type="image/x-icon"
diff --git a/frontend/src/index.html b/frontend/src/index.html
index c5d6714a978c..7c9b3116c6ac 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -71,7 +71,7 @@
       async
       defer
     ></script>
-    <link rel="stylesheet" id="currentTheme" />
+
     <link rel="stylesheet" href="" id="globalFunBoxTheme" type="text/css" />
     <script type="module" src="ts/index.ts"></script>
   </body>
diff --git a/frontend/src/ts/auth.ts b/frontend/src/ts/auth.ts
index da87b66a29ee..cfe6c974f3f5 100644
--- a/frontend/src/ts/auth.ts
+++ b/frontend/src/ts/auth.ts
@@ -144,7 +144,6 @@ export async function onAuthStateChanged(
 
   if (authInitialisedAndConnected) {
     console.debug(`auth state changed, user ${user ? "true" : "false"}`);
-    console.debug(user);
     if (user) {
       userPromise = loadUser(user);
     } else {
diff --git a/frontend/src/ts/commandline/lists/themes.ts b/frontend/src/ts/commandline/lists/themes.ts
index 3d6f4b152e3f..8bafb873677c 100644
--- a/frontend/src/ts/commandline/lists/themes.ts
+++ b/frontend/src/ts/commandline/lists/themes.ts
@@ -2,12 +2,12 @@ import Config, { setConfig } from "../../config";
 import { capitalizeFirstLetterOfEachWord } from "../../utils/strings";
 import * as ThemeController from "../../controllers/theme-controller";
 import { Command, CommandsSubgroup } from "../types";
-import { Theme, ThemesList } from "../../constants/themes";
+import { ThemesList, ThemeWithName } from "../../constants/themes";
 import { not } from "@monkeytype/util/predicates";
 import * as ConfigEvent from "../../observables/config-event";
 import * as Misc from "../../utils/misc";
 
-const isFavorite = (theme: Theme): boolean =>
+const isFavorite = (theme: ThemeWithName): boolean =>
   Config.favThemes.includes(theme.name);
 
 /**
@@ -15,7 +15,7 @@ const isFavorite = (theme: Theme): boolean =>
  * @param theme the theme to create a command for
  * @returns a command object for the theme
  */
-const createThemeCommand = (theme: Theme): Command => {
+const createThemeCommand = (theme: ThemeWithName): Command => {
   return {
     id: "changeTheme" + capitalizeFirstLetterOfEachWord(theme.name),
     display: theme.name.replace(/_/g, " "),
@@ -43,7 +43,7 @@ const createThemeCommand = (theme: Theme): Command => {
  * @param themes the themes to sort
  * @returns sorted array of themes
  */
-const sortThemesByFavorite = (themes: Theme[]): Theme[] => [
+const sortThemesByFavorite = (themes: ThemeWithName[]): ThemeWithName[] => [
   ...themes.filter(isFavorite),
   ...themes.filter(not(isFavorite)),
 ];
@@ -65,7 +65,7 @@ const commands: Command[] = [
   },
 ];
 
-export function update(themes: Theme[]): void {
+export function update(themes: ThemeWithName[]): void {
   // clear the current list
   subgroup.list = [];
 
diff --git a/frontend/src/ts/components/common/ChartJs.tsx b/frontend/src/ts/components/common/ChartJs.tsx
index a91040222aaf..e1b85c687c2e 100644
--- a/frontend/src/ts/components/common/ChartJs.tsx
+++ b/frontend/src/ts/components/common/ChartJs.tsx
@@ -48,13 +48,10 @@ export function ChartJs<T extends ChartType, TData = DefaultDataPoint<T>>(
       chart.options = props.options;
     }
     chart.update();
-    void chart.updateColors();
   });
 
   createEffect(() => {
-    //react on theme changes
     const colors = getThemeColors();
-    console.log("#####", { colors });
     if (!chart) return;
 
     void chart.updateColors(colors);
diff --git a/frontend/src/ts/components/layout/Theme.tsx b/frontend/src/ts/components/layout/Theme.tsx
new file mode 100644
index 000000000000..5120396a5898
--- /dev/null
+++ b/frontend/src/ts/components/layout/Theme.tsx
@@ -0,0 +1,56 @@
+import { createEffect, createMemo, JSXElement } from "solid-js";
+import { getThemeColors } from "../../signals/theme";
+import { useRefWithUtils } from "../../hooks/useRefWithUtils";
+import { getThemeIndicator } from "../../signals/core";
+import { themes, Theme as ThemeType } from "../../constants/themes";
+import { ThemeName } from "@monkeytype/schemas/configs";
+import { qsr } from "../../utils/dom";
+
+export function Theme(): JSXElement {
+  // Refs are assigned by SolidJS via the ref attribute
+  const [styleRef, styleEl] = useRefWithUtils<HTMLStyleElement>();
+
+  //Use memo to ignore signals without changes
+  const themeName = createMemo(() => getThemeIndicator().text);
+  const themeColors = createMemo(() => getThemeColors());
+
+  createEffect(() => {
+    const colors = themeColors();
+    styleEl()?.setHtml(`
+:root {
+
+    --bg-color: ${colors.bg};
+    --main-color: ${colors.main};
+    --caret-color: ${colors.caret};
+    --sub-color: ${colors.sub};
+    --sub-alt-color: ${colors.subAlt};
+    --text-color: ${colors.text};
+    --error-color: ${colors.error};
+    --error-extra-color:${colors.errorExtra};
+    --colorful-error-color: ${colors.colorfulError};
+    --colorful-error-extra-color: ${colors.colorfulErrorExtra};
+}
+        `);
+  });
+
+  createEffect(() => {
+    const theme: ThemeType | undefined = themes[themeName() as ThemeName];
+
+    const cssFile = theme?.hasCss ? `/themes/${themeName()}.css` : "";
+
+    //TODO move the code here or add loader animation?
+    //void loadStyle(themeName(), { hasCss: theme?.hasCss ?? false });
+
+    const linkElement = qsr("#currentTheme").setAttribute("href", cssFile);
+    const parent = qsr("head");
+    linkElement.remove();
+    parent.append(linkElement);
+  });
+
+  return (
+    <>
+      <style ref={styleRef}></style>;
+      <link rel="stylesheet" id="currentTheme" />
+    </>
+  );
+}
diff --git a/frontend/src/ts/components/layout/ThemeColors.tsx b/frontend/src/ts/components/layout/ThemeColors.tsx
deleted file mode 100644
index 8f537317b7a0..000000000000
--- a/frontend/src/ts/components/layout/ThemeColors.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { createEffect, JSXElement } from "solid-js";
-import { getThemeColors } from "../../signals/theme";
-import { useRefWithUtils } from "../../hooks/useRefWithUtils";
-
-export function ThemeColors(): JSXElement {
-  // Refs are assigned by SolidJS via the ref attribute
-  const [styleRef, styleEl] = useRefWithUtils<HTMLStyleElement>();
-
-  createEffect(() => {
-    styleEl()?.setHtml(`
-:root {
-
-    --bg-color: ${getThemeColors().bg};
-    --main-color: ${getThemeColors().main};
-    --caret-color: ${getThemeColors().caret};
-    --sub-color: ${getThemeColors().sub};
-    --sub-alt-color: ${getThemeColors().subAlt};
-    --text-color: ${getThemeColors().text};
-    --error-color: ${getThemeColors().error};
-    --error-extra-color:${getThemeColors().errorExtra};
-    --colorful-error-color: ${getThemeColors().colorfulError};
-    --colorful-error-extra-color: ${getThemeColors().colorfulErrorExtra};
-}
-        `);
-  });
-
-  return <style ref={styleRef} />;
-}
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index 9f125cb222ba..49542fe110a8 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -5,13 +5,13 @@ import { JSXElement } from "solid-js";
 import { Footer } from "./layout/footer/Footer";
 import { Modals } from "./modals/Modals";
 import { AboutPage } from "./pages/AboutPage";
-import { ThemeColors } from "./layout/ThemeColors";
+import { Theme } from "./layout/Theme";
 
 const components: Record<string, () => JSXElement> = {
   Footer: () => <Footer />,
   Modals: () => <Modals />,
   AboutPage: () => <AboutPage />,
-  ThemeColors: () => <ThemeColors />,
+  Theme: () => <Theme />,
 };
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {
diff --git a/frontend/src/ts/components/pages/AboutPage.tsx b/frontend/src/ts/components/pages/AboutPage.tsx
index ec73dd894481..77fd5acaf827 100644
--- a/frontend/src/ts/components/pages/AboutPage.tsx
+++ b/frontend/src/ts/components/pages/AboutPage.tsx
@@ -1,4 +1,4 @@
-import { createEffect, createResource, For, JSXElement, Show } from "solid-js";
+import { createResource, For, JSXElement, Show } from "solid-js";
 import "./AboutPage.scss";
 import { Button } from "../common/Button";
 import { showModal } from "../../stores/modals";
@@ -10,7 +10,6 @@ import Ape from "../../ape";
 import { intervalToDuration } from "date-fns";
 import { getNumberWithMagnitude, numberWithSpaces } from "../../utils/numbers";
 import { ChartJs } from "../common/ChartJs";
-import { getThemeColors } from "../../signals/theme";
 
 export function AboutPage(): JSXElement {
   const isOpen = (): boolean => getActivePage() === "about";
@@ -29,10 +28,6 @@ export function AboutPage(): JSXElement {
     open ? await fetchSpeedHistogram() : undefined,
   );
 
-  createEffect(() => {
-    console.log(getThemeColors());
-  });
-
   return (
     <Show when={isOpen}>
       <div class="created">
diff --git a/frontend/src/ts/constants/themes.ts b/frontend/src/ts/constants/themes.ts
index 6c7c5f5fbd5b..40f9b3a9ca55 100644
--- a/frontend/src/ts/constants/themes.ts
+++ b/frontend/src/ts/constants/themes.ts
@@ -1,14 +1,30 @@
 import { ThemeName } from "@monkeytype/schemas/configs";
 import { hexToHSL } from "../utils/colors";
-import { ThemeColors } from "../signals/theme";
+import { z } from "zod";
 
-export type Theme = {
-  name: ThemeName;
-  hasCss?: boolean;
-} & Pick<ThemeColors, "bg" | "main" | "sub" | "text"> &
-  Partial<Omit<ThemeColors, "bg" | "main" | "sub" | "text">>;
+const hexColorSchema = z
+  .string()
+  .regex(
+    /^#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/,
+    "Invalid hex color",
+  );
 
-export const themes: Record<ThemeName, Omit<Theme, "name">> = {
+//TODO remove the optionals after migration
+export const ThemeSchema = z.object({
+  hasCss: z.boolean().optional(),
+  bg: hexColorSchema,
+  main: hexColorSchema,
+  caret: hexColorSchema.optional(),
+  sub: hexColorSchema,
+  subAlt: hexColorSchema.optional(),
+  text: hexColorSchema,
+  error: hexColorSchema.optional(),
+  errorExtra: hexColorSchema.optional(),
+  colorfulError: hexColorSchema.optional(),
+  colorfulErrorExtra: hexColorSchema.optional(),
+});
+export type Theme = z.infer<typeof ThemeSchema>;
+export const themes: Record<ThemeName, Theme> = {
   "8008": {
     bg: "#333a45",
     main: "#f44c7f",
@@ -76,16 +92,16 @@ export const themes: Record<ThemeName, Omit<Theme, "name">> = {
     text: "#ffffff",
   },
   dots: {
-    bg: " #121520",
-    caret: " #fff",
-    main: " #fff",
-    sub: " #676e8a",
-    subAlt: " #1b1e2c",
-    text: " #fff",
-    error: " #da3333",
-    errorExtra: " #791717",
-    colorfulError: " #da3333",
-    colorfulErrorExtra: " #791717",
+    bg: "#121520",
+    caret: "#fff",
+    main: "#fff",
+    sub: "#676e8a",
+    subAlt: "#1b1e2c",
+    text: "#fff",
+    error: "#da3333",
+    errorExtra: "#791717",
+    colorfulError: "#da3333",
+    colorfulErrorExtra: "#791717",
     hasCss: true,
   },
   nautilus: {
@@ -1098,7 +1114,7 @@ export const themes: Record<ThemeName, Omit<Theme, "name">> = {
   },
   floret: {
     bg: "#00272c",
-    main: " #ffdd6d",
+    main: "#ffdd6d",
     sub: "#779097",
     text: "#E5E5E5",
   },
@@ -1152,17 +1168,18 @@ export const themes: Record<ThemeName, Omit<Theme, "name">> = {
   },
 };
 
-export const ThemesList: Theme[] = Object.keys(themes)
+export type ThemeWithName = Theme & { name: ThemeName };
+export const ThemesList: ThemeWithName[] = Object.keys(themes)
   .sort()
   .map(
     (it) =>
       ({
         ...themes[it as ThemeName],
-        name: it,
-      }) as Theme,
+        name: it as ThemeName,
+      }) as Theme & { name: ThemeName },
   );
 
-export const ThemesListSorted = [
+export const ThemesListSorted: ThemeWithName[] = [
   ...ThemesList.sort((a, b) => {
     const b1 = hexToHSL(a.bg);
     const b2 = hexToHSL(b.bg);
diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
index 5efe2f79eed2..34fe41732a04 100644
--- a/frontend/src/ts/controllers/chart-controller.ts
+++ b/frontend/src/ts/controllers/chart-controller.ts
@@ -88,6 +88,11 @@ export class ChartWithUpdateColors<
   }
 
   async updateColors(colors?: ThemeColorsType): Promise<void> {
+    colors ??= getThemeColors();
+    if (colors === undefined) {
+      throw new Error("chart colors are empty.");
+    }
+
     //@ts-expect-error it's too difficult to figure out these types, but this works
     await updateColors(this, colors);
   }
diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index b103535415ae..a4c825bd4b3d 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -7,7 +7,6 @@ import * as BackgroundFilter from "../elements/custom-background-filter";
 import * as ConfigEvent from "../observables/config-event";
 import * as DB from "../db";
 import * as Notifications from "../elements/notifications";
-import * as Loader from "../elements/loader";
 import { debounce } from "throttle-debounce";
 import { ThemeName } from "@monkeytype/schemas/configs";
 import { Theme, themes, ThemesList } from "../constants/themes";
@@ -67,13 +66,17 @@ async function updateFavicon(): Promise<void> {
   }, 125);
 }
 
-function clearCustomTheme(): void {
+function _clearCustomTheme(): void {
   console.debug("Theme controller clearing custom theme");
   for (const e of colorVars) {
     document.documentElement.style.setProperty(e, "");
   }
 }
 
+export function applyPreset(name: ThemeName): void {
+  void apply(name);
+}
+/*
 let loadStyleLoaderTimeouts: NodeJS.Timeout[] = [];
 export async function loadStyle(
   name: string,
@@ -126,27 +129,26 @@ export async function loadStyle(
       afterLoad();
     };
 
-    if (name !== "custom") {
+    if (props.hasCss) {
       link.href = `/themes/${name}.css`;
+    } else {
     }
 
-    if (props.hasCss) {
-      if (headScript === null) {
-        console.debug("Theme controller appending link to the head", link);
-        document.head.appendChild(link);
-      } else {
-        console.debug(
-          "Theme controller inserting link after current theme",
-          link,
-        );
-        headScript.after(link);
-      }
+    console.log("### setting css to ", link.href);
+
+    if (headScript === null) {
+      console.debug("Theme controller appending link to the head", link);
+      document.head.appendChild(link);
     } else {
-      afterLoad();
+      console.debug(
+        "Theme controller inserting link after current theme",
+        link,
+      );
+      headScript.after(link);
     }
   });
 }
-
+*/
 // export function changeCustomTheme(themeId: string, nosave = false): void {
 //   const customThemes = DB.getSnapshot().customThemes;
 //   const colors = customThemes.find((e) => e._id === themeId)
@@ -156,7 +158,6 @@ export async function loadStyle(
 
 function convertToTheme(colors: string[]): Theme {
   return {
-    name: "Custom" as ThemeName,
     bg: colors[0] as string,
     main: colors[1] as string,
     caret: colors[2] as string,
@@ -209,12 +210,13 @@ async function apply(
   }*/
 
   qsa("#keymap .keymapKey")?.setStyle({});
-  await loadStyle(name, { hasCss: themeColors.hasCss ?? false });
+  //TODO moved
+  //await loadStyle(name, { hasCss: themeColors.hasCss ?? false });
 
   //TODO not needed?!
-  if (name !== "custom") {
-    clearCustomTheme();
-  }
+  //if (name !== "custom") {
+  //    clearCustomTheme();
+  //  }
 
   // if (!isPreview) {
   qsa("#keymap .keymapKey")?.setStyle({});
diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index dfe4f40bea3f..e771ca033404 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -3,7 +3,6 @@ import * as ThemeController from "../../controllers/theme-controller";
 import * as Misc from "../../utils/misc";
 import * as Colors from "../../utils/colors";
 import * as Notifications from "../notifications";
-import * as ChartController from "../../controllers/chart-controller";
 import * as Loader from "../loader";
 import * as DB from "../../db";
 import * as ConfigEvent from "../../observables/config-event";
@@ -11,7 +10,7 @@ import { isAuthenticated } from "../../firebase";
 import { getActivePage } from "../../signals/core";
 import { CustomThemeColors, ThemeName } from "@monkeytype/schemas/configs";
 import { captureException } from "../../sentry";
-import { themes, ThemesListSorted } from "../../constants/themes";
+import { ThemesListSorted } from "../../constants/themes";
 import { qs } from "../../utils/dom";
 import { getThemeColors } from "../../signals/theme";
 
@@ -41,14 +40,15 @@ function updateColors(
   colorPicker: JQuery,
   color: string,
   onlyStyle = false,
-  noThemeUpdate = false,
 ): void {
   if (onlyStyle) {
     const colorID = colorPicker.find("input.color").attr("id");
     if (colorID === undefined) console.error("Could not find color ID!");
+    /* handled by theme-controller
     if (!noThemeUpdate && colorID !== undefined) {
       document.documentElement.style.setProperty(colorID, color);
     }
+    */
     const pickerButton = colorPicker.find("label");
     pickerButton.val(color);
     pickerButton.attr("value", color);
@@ -102,10 +102,11 @@ function updateColors(
   const colorID = colorPicker.find("input.color").attr("id");
 
   if (colorID === undefined) console.error("Could not find color ID!");
+  /* handled by theme-controller
   if (!noThemeUpdate && colorID !== undefined) {
     document.documentElement.style.setProperty(colorID, color);
   }
-
+*/
   const pickerButton = colorPicker.find("label");
 
   pickerButton.val(color);
@@ -251,7 +252,7 @@ export async function fillCustomButtons(): Promise<void> {
   }
 }
 
-export function setCustomInputs(noThemeUpdate = false): void {
+export function setCustomInputs(): void {
   $(
     ".pageSettings .section.themes .tabContainer .customTheme .colorPicker",
   ).each((_index, element: HTMLElement) => {
@@ -260,7 +261,7 @@ export function setCustomInputs(noThemeUpdate = false): void {
         $(element).find("input.color").attr("id") as string,
       )
     ] as string;
-    updateColors($(element), currentColor, false, noThemeUpdate);
+    updateColors($(element), currentColor, false);
   });
 }
 
@@ -425,17 +426,11 @@ $(".pageSettings .section.themes .tabContainer .customTheme input.input")
 $(".pageSettings #loadCustomColorsFromPreset").on("click", async () => {
   // previewTheme(Config.theme);
   // $("#currentTheme").attr("href", `themes/${Config.theme}.css`);
-  const theme = themes[Config.theme];
-  await ThemeController.loadStyle(Config.theme, {
-    hasCss: theme.hasCss ?? false,
-  });
-
-  // setTimeout(async () => {
-  ChartController.updateAllChartColors();
 
-  //TODO check
+  ThemeController.applyPreset(Config.theme);
   const themeColors = getThemeColors();
 
+  //TODO refactor updateColors to updateColors(key:keyof Omit><Theme,"hasCss">, color:string)
   ThemeController.colorVars.forEach((colorName) => {
     let color;
     if (colorName === "--bg-color") {
@@ -460,6 +455,7 @@ $(".pageSettings #loadCustomColorsFromPreset").on("click", async () => {
       color = themeColors.colorfulErrorExtra;
     }
 
+    console.log("### update", colorName, "|" + color + "|");
     updateColors($(".colorPicker #" + colorName).parent(), color as string);
   });
   // }, 250);
diff --git a/frontend/src/ts/pages/account.ts b/frontend/src/ts/pages/account.ts
index 9e6c9d9d580a..4d0aafdf9de6 100644
--- a/frontend/src/ts/pages/account.ts
+++ b/frontend/src/ts/pages/account.ts
@@ -184,6 +184,7 @@ function buildResultRow(result: SnapshotResult<Mode>): HTMLTableRowElement {
 }
 
 async function updateChartColors(): Promise<void> {
+  //TODO call chartController.updateAllChartColotrs instead?
   await ChartController.accountHistory.updateColors();
   await Misc.sleep(0);
   await ChartController.accountActivity.updateColors();
diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts
index 9fab875178a8..e28ce4e2a464 100644
--- a/frontend/src/ts/pages/settings.ts
+++ b/frontend/src/ts/pages/settings.ts
@@ -30,7 +30,7 @@ import { getActiveFunboxNames } from "../test/funbox/list";
 import { SnapshotPreset } from "../constants/default-snapshot";
 import { LayoutsList } from "../constants/layouts";
 import { DataArrayPartial, Optgroup, OptionOptional } from "slim-select/store";
-import { Theme, ThemesList } from "../constants/themes";
+import { ThemesList, ThemeWithName } from "../constants/themes";
 import { areSortedArraysEqual, areUnsortedArraysEqual } from "../utils/arrays";
 import { LayoutName } from "@monkeytype/schemas/layouts";
 import { LanguageGroupNames, LanguageGroups } from "../constants/languages";
@@ -614,7 +614,7 @@ export async function update(
   setActiveFunboxButton();
   await Misc.sleep(0);
   ThemePicker.updateActiveTab();
-  ThemePicker.setCustomInputs(true);
+  ThemePicker.setCustomInputs();
   await CustomBackgroundPicker.updateUI();
   await updateFilterSectionVisibility();
   await CustomFontPicker.updateUI();
@@ -927,7 +927,7 @@ function getLayoutfluidDropdownData(): DataArrayPartial {
 }
 
 function getThemeDropdownData(
-  isActive: (theme: Theme) => boolean,
+  isActive: (theme: ThemeWithName) => boolean,
 ): DataArrayPartial {
   return ThemesList.map((theme) => ({
     value: theme.name,
diff --git a/frontend/src/ts/signals/core.ts b/frontend/src/ts/signals/core.ts
index cdf74aeb82db..43273c3de27e 100644
--- a/frontend/src/ts/signals/core.ts
+++ b/frontend/src/ts/signals/core.ts
@@ -14,7 +14,7 @@ export const [getThemeIndicator, setThemeIndicator] = createSignal<{
   text: string;
   isFavorite: boolean;
 }>({
-  text: "unknown",
+  text: "serika dark",
   isFavorite: false,
 });
 
diff --git a/frontend/src/ts/signals/theme.ts b/frontend/src/ts/signals/theme.ts
index ab8f58adb607..d02fca4042fd 100644
--- a/frontend/src/ts/signals/theme.ts
+++ b/frontend/src/ts/signals/theme.ts
@@ -1,4 +1,4 @@
-import { createSignal } from "solid-js";
+import { createMemo, createSignal } from "solid-js";
 
 const defaultTheme: ThemeColors = {
   bg: "#323437",
@@ -27,5 +27,8 @@ export type ThemeColors = {
 };
 export type ColorName = keyof ThemeColors;
 
-export const [getThemeColors, setThemeColors] =
-  createSignal<ThemeColors>(defaultTheme);
+const [themeColors, setThemeColors] = createSignal<ThemeColors>(defaultTheme);
+
+const getThemeColors = createMemo(() => themeColors());
+
+export { getThemeColors, setThemeColors };

From 7dc15bb9dee050ec58d0959bd45dbfdf2325b753 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 15 Jan 2026 16:31:47 +0100
Subject: [PATCH 04/51] wip

---
 frontend/src/html/pages/settings.html         |  10 +
 frontend/src/ts/components/layout/Theme.tsx   |  14 +-
 frontend/src/ts/constants/themes.ts           |  15 +-
 .../src/ts/controllers/chart-controller.ts    |  10 +-
 .../src/ts/controllers/theme-controller.ts    |  14 +-
 .../src/ts/elements/settings/theme-picker.ts  | 231 +++++++-----------
 frontend/src/ts/signals/theme.ts              |  31 +--
 7 files changed, 130 insertions(+), 195 deletions(-)

diff --git a/frontend/src/html/pages/settings.html b/frontend/src/html/pages/settings.html
index 4bc31f9c639b..d15168db53ef 100644
--- a/frontend/src/html/pages/settings.html
+++ b/frontend/src/html/pages/settings.html
@@ -1557,6 +1557,7 @@
                   class="color"
                   value="#000000"
                   id="--bg-color"
+                  data-key="bg"
                 />
               </div>
             </div>
@@ -1584,6 +1585,7 @@
                   class="color"
                   value="#000000"
                   id="--sub-alt-color"
+                  data-key="subAlt"
                 />
               </div>
             </div>
@@ -1604,6 +1606,7 @@
                   class="color"
                   value="#000000"
                   id="--main-color"
+                  data-key="main"
                 />
               </div>
             </div>
@@ -1624,6 +1627,7 @@
                   class="color"
                   value="#000000"
                   id="--sub-color"
+                  data-key="sub"
                 />
               </div>
             </div>
@@ -1644,6 +1648,7 @@
                   class="color"
                   value="#000000"
                   id="--caret-color"
+                  data-key="caret"
                 />
               </div>
             </div>
@@ -1664,6 +1669,7 @@
                   class="color"
                   value="#000000"
                   id="--text-color"
+                  data-key="text"
                 />
               </div>
             </div>
@@ -1687,6 +1693,7 @@
                   class="color"
                   value="#000000"
                   id="--error-color"
+                  data-key="error"
                 />
               </div>
             </div>
@@ -1707,6 +1714,7 @@
                   class="color"
                   value="#000000"
                   id="--error-extra-color"
+                  data-key="errorExtra"
                 />
               </div>
             </div>
@@ -1729,6 +1737,7 @@
                   class="color"
                   value="#000000"
                   id="--colorful-error-color"
+                  data-key="colorfulError"
                 />
               </div>
             </div>
@@ -1749,6 +1758,7 @@
                   class="color"
                   value="#000000"
                   id="--colorful-error-extra-color"
+                  data-key="colorfulErrorExtra"
                 />
               </div>
             </div>
diff --git a/frontend/src/ts/components/layout/Theme.tsx b/frontend/src/ts/components/layout/Theme.tsx
index 5120396a5898..62dfc85976c1 100644
--- a/frontend/src/ts/components/layout/Theme.tsx
+++ b/frontend/src/ts/components/layout/Theme.tsx
@@ -4,11 +4,11 @@ import { useRefWithUtils } from "../../hooks/useRefWithUtils";
 import { getThemeIndicator } from "../../signals/core";
 import { themes, Theme as ThemeType } from "../../constants/themes";
 import { ThemeName } from "@monkeytype/schemas/configs";
-import { qsr } from "../../utils/dom";
 
 export function Theme(): JSXElement {
   // Refs are assigned by SolidJS via the ref attribute
   const [styleRef, styleEl] = useRefWithUtils<HTMLStyleElement>();
+  const [linkRef, linkEl] = useRefWithUtils<HTMLLinkElement>();
 
   //Use memo to ignore signals without changes
   const themeName = createMemo(() => getThemeIndicator().text);
@@ -16,6 +16,7 @@ export function Theme(): JSXElement {
 
   createEffect(() => {
     const colors = themeColors();
+    console.debug("Theme update colors", themeColors());
     styleEl()?.setHtml(`
 :root {
 
@@ -34,23 +35,20 @@ export function Theme(): JSXElement {
   });
 
   createEffect(() => {
+    //console.log("#### update css", themeName());
     const theme: ThemeType | undefined = themes[themeName() as ThemeName];
 
     const cssFile = theme?.hasCss ? `/themes/${themeName()}.css` : "";
 
     //TODO move the code here or add loader animation?
     //void loadStyle(themeName(), { hasCss: theme?.hasCss ?? false });
-
-    const linkElement = qsr("#currentTheme").setAttribute("href", cssFile);
-    const parent = qsr("head");
-    linkElement.remove();
-    parent.append(linkElement);
+    linkEl()?.setAttribute("href", cssFile);
   });
 
   return (
     <>
-      <style ref={styleRef}></style>;
-      <link rel="stylesheet" id="currentTheme" />
+      <style ref={styleRef}></style>
+      <link ref={linkRef} rel="stylesheet" id="currentTheme" />
     </>
   );
 }
diff --git a/frontend/src/ts/constants/themes.ts b/frontend/src/ts/constants/themes.ts
index 40f9b3a9ca55..9a7fac754877 100644
--- a/frontend/src/ts/constants/themes.ts
+++ b/frontend/src/ts/constants/themes.ts
@@ -14,16 +14,17 @@ export const ThemeSchema = z.object({
   hasCss: z.boolean().optional(),
   bg: hexColorSchema,
   main: hexColorSchema,
-  caret: hexColorSchema.optional(),
+  caret: hexColorSchema,
   sub: hexColorSchema,
-  subAlt: hexColorSchema.optional(),
+  subAlt: hexColorSchema,
   text: hexColorSchema,
-  error: hexColorSchema.optional(),
-  errorExtra: hexColorSchema.optional(),
-  colorfulError: hexColorSchema.optional(),
-  colorfulErrorExtra: hexColorSchema.optional(),
+  error: hexColorSchema,
+  errorExtra: hexColorSchema,
+  colorfulError: hexColorSchema,
+  colorfulErrorExtra: hexColorSchema,
 });
 export type Theme = z.infer<typeof ThemeSchema>;
+export type ColorName = keyof Theme;
 export const themes: Record<ThemeName, Theme> = {
   "8008": {
     bg: "#333a45",
@@ -1166,7 +1167,7 @@ export const themes: Record<ThemeName, Theme> = {
     sub: "#0476f2",
     text: "#f0f0f0",
   },
-};
+} as Record<ThemeName, Theme>; //TODO evil,. remove me
 
 export type ThemeWithName = Theme & { name: ThemeName };
 export const ThemesList: ThemeWithName[] = Object.keys(themes)
diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
index 34fe41732a04..806e8b42b209 100644
--- a/frontend/src/ts/controllers/chart-controller.ts
+++ b/frontend/src/ts/controllers/chart-controller.ts
@@ -68,10 +68,8 @@ import * as Numbers from "@monkeytype/util/numbers";
 import { blendTwoHexColors } from "../utils/colors";
 import { typedKeys } from "../utils/misc";
 import { qs } from "../utils/dom";
-import {
-  getThemeColors,
-  ThemeColors as ThemeColorsType,
-} from "../signals/theme";
+import { getThemeColors } from "../signals/theme";
+import { Theme } from "../constants/themes";
 
 export class ChartWithUpdateColors<
   TType extends ChartType = ChartType,
@@ -87,7 +85,7 @@ export class ChartWithUpdateColors<
     super(item, config);
   }
 
-  async updateColors(colors?: ThemeColorsType): Promise<void> {
+  async updateColors(colors?: Theme): Promise<void> {
     colors ??= getThemeColors();
     if (colors === undefined) {
       throw new Error("chart colors are empty.");
@@ -1126,7 +1124,7 @@ async function updateColors<
   TLabel = string,
 >(
   chart: ChartWithUpdateColors<TType, TData, TLabel>,
-  colors?: ThemeColorsType,
+  colors?: Theme,
 ): Promise<void> {
   colors ??= getThemeColors();
 
diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index a4c825bd4b3d..1af145118c81 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -13,11 +13,7 @@ import { Theme, themes, ThemesList } from "../constants/themes";
 import fileStorage from "../utils/file-storage";
 import { qs, qsa } from "../utils/dom";
 import { setThemeIndicator } from "../signals/core";
-import {
-  getThemeColors,
-  setThemeColors,
-  ThemeColors as ThemeColorsType,
-} from "../signals/theme";
+import { getThemeColors, setThemeColor } from "../signals/theme";
 
 export let randomTheme: ThemeName | string | null = null;
 let isPreviewingTheme = false;
@@ -156,7 +152,7 @@ export async function loadStyle(
 //   UpdateConfig.setConfig("customThemeColors", colors,nosave);
 // }
 
-function convertToTheme(colors: string[]): Theme {
+export function convertCustomColorsToTheme(colors: string[]): Theme {
   return {
     bg: colors[0] as string,
     main: colors[1] as string,
@@ -187,7 +183,9 @@ async function apply(
   const name = isCustom ? "custom" : themeName;
 
   const themeColors = isCustom
-    ? convertToTheme(customColorsOverride ?? Config.customThemeColors)
+    ? convertCustomColorsToTheme(
+        customColorsOverride ?? Config.customThemeColors,
+      )
     : themes[themeName as ThemeName];
 
   console.debug("Theme controller apply", {
@@ -197,7 +195,7 @@ async function apply(
     customColorsOverride,
     config: Config.customThemeColors,
   });
-  setThemeColors(themeColors as ThemeColorsType);
+  setThemeColor(themeColors);
 
   /*
   if ((Config.customTheme && !isPreview) || customColorsOverride) {
diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index e771ca033404..c85b728bbf99 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -10,9 +10,9 @@ import { isAuthenticated } from "../../firebase";
 import { getActivePage } from "../../signals/core";
 import { CustomThemeColors, ThemeName } from "@monkeytype/schemas/configs";
 import { captureException } from "../../sentry";
-import { ThemesListSorted } from "../../constants/themes";
-import { qs } from "../../utils/dom";
-import { getThemeColors } from "../../signals/theme";
+import { ColorName, ThemesListSorted } from "../../constants/themes";
+import { qs, qsa, qsr } from "../../utils/dom";
+import { getThemeColors, updateThemeColor } from "../../signals/theme";
 
 function updateActiveButton(): void {
   let activeThemeName: string = Config.theme;
@@ -36,87 +36,65 @@ function updateActiveButton(): void {
     ?.classList.add("active");
 }
 
-function updateColors(
-  colorPicker: JQuery,
-  color: string,
-  onlyStyle = false,
-): void {
-  if (onlyStyle) {
-    const colorID = colorPicker.find("input.color").attr("id");
-    if (colorID === undefined) console.error("Could not find color ID!");
-    /* handled by theme-controller
-    if (!noThemeUpdate && colorID !== undefined) {
-      document.documentElement.style.setProperty(colorID, color);
-    }
-    */
-    const pickerButton = colorPicker.find("label");
-    pickerButton.val(color);
-    pickerButton.attr("value", color);
-    if (pickerButton.attr("for") !== "--bg-color") {
-      pickerButton.css("background-color", color);
-    }
-    colorPicker.find("input.input").val(color);
-    colorPicker.find("input.color").attr("value", color);
-    colorPicker.find("input.color").val(color);
-    return;
-  }
-  const colorREGEX = [
-    {
-      rule: /\b[0-9]{1,3},\s?[0-9]{1,3},\s?[0-9]{1,3}\s*\b/,
-      start: "rgb(",
-      end: ")",
-    },
-    {
-      rule: /\b[A-Z, a-z, 0-9]{6}\b/,
-      start: "#",
-      end: "",
-    },
-    {
-      rule: /\b[0-9]{1,3},\s?[0-9]{1,3}%,\s?[0-9]{1,3}%?\s*\b/,
-      start: "hsl(",
-      end: ")",
-    },
-  ];
-
-  color = color.replace("°", "");
-
-  for (const regex of colorREGEX) {
-    if (color.match(regex.rule)) {
-      color = regex.start + color + regex.end;
-      break;
+function updateColors(key: ColorName, color: string, onlyStyle = false): void {
+  const colorPicker = qsr(`.colorPicker input[data-key="${key}"]`).getParent();
+  if (colorPicker === null) return;
+
+  console.log("#### update colors", { key, color, onlyStyle });
+  if (!onlyStyle) {
+    const colorREGEX = [
+      {
+        rule: /\b[0-9]{1,3},\s?[0-9]{1,3},\s?[0-9]{1,3}\s*\b/,
+        start: "rgb(",
+        end: ")",
+      },
+      {
+        rule: /\b[A-Z, a-z, 0-9]{6}\b/,
+        start: "#",
+        end: "",
+      },
+      {
+        rule: /\b[0-9]{1,3},\s?[0-9]{1,3}%,\s?[0-9]{1,3}%?\s*\b/,
+        start: "hsl(",
+        end: ")",
+      },
+    ];
+
+    color = color.replace("°", "");
+
+    for (const regex of colorREGEX) {
+      if (color.match(regex.rule)) {
+        color = regex.start + color + regex.end;
+        break;
+      }
     }
-  }
 
-  color = color.replace("##", "#");
+    color = color.replace("##", "#");
 
-  $(".colorConverter").css("color", color);
-  const hexColor: string | undefined = Colors.rgbStringtoHex(
-    $(".colorConverter").css("color"),
-  );
-  if (hexColor === undefined) {
-    return;
-  }
-
-  color = hexColor;
-
-  const colorID = colorPicker.find("input.color").attr("id");
+    $(".colorConverter").css("color", color);
+    const hexColor: string | undefined = Colors.rgbStringtoHex(
+      $(".colorConverter").css("color"),
+    );
+    if (hexColor === undefined) {
+      return;
+    }
 
-  if (colorID === undefined) console.error("Could not find color ID!");
-  /* handled by theme-controller
-  if (!noThemeUpdate && colorID !== undefined) {
-    document.documentElement.style.setProperty(colorID, color);
+    color = hexColor;
   }
-*/
-  const pickerButton = colorPicker.find("label");
 
-  pickerButton.val(color);
-  pickerButton.attr("value", color);
-  if (pickerButton.attr("for") !== "--bg-color") {
-    pickerButton.css("background-color", color);
+  updateThemeColor(key, color);
+  /* handled by theme-controller
+    if (!noThemeUpdate && colorID !== undefined) {
+      document.documentElement.style.setProperty(colorID, color);
+    }
+    */
+  const pickerButton = colorPicker.qsr<HTMLLabelElement>("label");
+  pickerButton.setAttribute("value", color);
+  if (pickerButton.getAttribute("for") !== "--bg-color") {
+    pickerButton.setStyle({ backgroundColor: color });
   }
-  colorPicker.find("input.input").val(color);
-  colorPicker.find("input.color").attr("value", color);
-  colorPicker.find("input.color").val(color);
+  colorPicker.qsr<HTMLInputElement>("input.input").setValue(color);
+  colorPicker.qsr("input.color").setAttribute("value", color);
 }
 
 export async function fillPresetButtons(): Promise<void> {
@@ -253,15 +231,16 @@ export async function fillCustomButtons(): Promise<void> {
 }
 
 export function setCustomInputs(): void {
-  $(
-    ".pageSettings .section.themes .tabContainer .customTheme .colorPicker",
-  ).each((_index, element: HTMLElement) => {
-    const currentColor = Config.customThemeColors[
-      ThemeController.colorVars.indexOf(
-        $(element).find("input.color").attr("id") as string,
-      )
-    ] as string;
-    updateColors($(element), currentColor, false);
+  const theme = ThemeController.convertCustomColorsToTheme(
+    Config.customThemeColors,
+  );
+  qsa<HTMLInputElement>(
+    ".pageSettings .section.themes .tabContainer .customTheme .colorPicker input[type=color]",
+  ).forEach((element) => {
+    const key = element.getAttribute("data-key") as ColorName;
+    const color = theme[key] as string;
+    updateColors(key, color, false);
+    //updateColors($(element), currentColor, false);
   });
 }
 
@@ -385,80 +364,40 @@ $(".pageSettings").on("click", ".section.themes .theme.button", (e) => {
   }
 });
 
-$(
-  ".pageSettings .section.themes .tabContainer .customTheme input[type=color]",
-).on("input", (e) => {
-  const $colorVar = $(e.currentTarget).attr("id") as string;
-  const $pickedColor = $(e.currentTarget).val() as string;
-
-  updateColors($(".colorPicker #" + $colorVar).parent(), $pickedColor, true);
-});
+function handleColorInput(e: Event): void {
+  const target = e.currentTarget as HTMLInputElement;
+  const key = target.getAttribute("data-key") as ColorName;
 
-$(
+  updateColors(key, target.value, true);
+}
+qsa(
   ".pageSettings .section.themes .tabContainer .customTheme input[type=color]",
-).on("change", (e) => {
-  const $colorVar = $(e.currentTarget).attr("id") as string;
-  const $pickedColor = $(e.currentTarget).val() as string;
+)
+  .on("input", handleColorInput)
+  .on("change", handleColorInput);
 
-  updateColors($(".colorPicker #" + $colorVar).parent(), $pickedColor);
-});
-
-$(".pageSettings .section.themes .tabContainer .customTheme input.input")
+qsa(".pageSettings .section.themes .tabContainer .customTheme input.input")
   .on("blur", (e) => {
-    if (e.target.id === "name") return;
-    const $colorVar = $(e.currentTarget).attr("id") as string;
-    const $pickedColor = $(e.currentTarget).val() as string;
-
-    updateColors($(".colorPicker #" + $colorVar).parent(), $pickedColor);
+    if ((e.target as HTMLInputElement).id === "name") return;
+    handleColorInput(e);
   })
   .on("keypress", function (e) {
-    if (e.target.id === "name") return;
+    const target = e.target as HTMLInputElement;
+    if (target.id === "name") return;
     if (e.code === "Enter") {
-      $(this).attr("disabled", "disabled");
-      const $colorVar = $(e.currentTarget).attr("id") as string;
-      const $pickedColor = $(e.currentTarget).val() as string;
-
-      updateColors($(".colorPicker #" + $colorVar).parent(), $pickedColor);
-      $(this).removeAttr("disabled");
+      target.setAttribute("disabled", "disabled");
+      handleColorInput(e);
+      target.removeAttribute("disabled");
     }
   });
 
 $(".pageSettings #loadCustomColorsFromPreset").on("click", async () => {
-  // previewTheme(Config.theme);
-  // $("#currentTheme").attr("href", `themes/${Config.theme}.css`);
-
   ThemeController.applyPreset(Config.theme);
   const themeColors = getThemeColors();
 
-  //TODO refactor updateColors to updateColors(key:keyof Omit><Theme,"hasCss">, color:string)
-  ThemeController.colorVars.forEach((colorName) => {
-    let color;
-    if (colorName === "--bg-color") {
-      color = themeColors.bg;
-    } else if (colorName === "--main-color") {
-      color = themeColors.main;
-    } else if (colorName === "--sub-color") {
-      color = themeColors.sub;
-    } else if (colorName === "--sub-alt-color") {
-      color = themeColors.subAlt;
-    } else if (colorName === "--caret-color") {
-      color = themeColors.caret;
-    } else if (colorName === "--text-color") {
-      color = themeColors.text;
-    } else if (colorName === "--error-color") {
-      color = themeColors.error;
-    } else if (colorName === "--error-extra-color") {
-      color = themeColors.errorExtra;
-    } else if (colorName === "--colorful-error-color") {
-      color = themeColors.colorfulError;
-    } else if (colorName === "--colorful-error-extra-color") {
-      color = themeColors.colorfulErrorExtra;
-    }
-
-    console.log("### update", colorName, "|" + color + "|");
-    updateColors($(".colorPicker #" + colorName).parent(), color as string);
-  });
-  // }, 250);
+  Misc.typedKeys(themeColors).forEach((key) =>
+    updateColors(key, themeColors[key] as string),
+  );
 });
 
 $(".pageSettings #saveCustomThemeButton").on("click", async () => {
diff --git a/frontend/src/ts/signals/theme.ts b/frontend/src/ts/signals/theme.ts
index d02fca4042fd..89248ddf476a 100644
--- a/frontend/src/ts/signals/theme.ts
+++ b/frontend/src/ts/signals/theme.ts
@@ -1,6 +1,7 @@
-import { createMemo, createSignal } from "solid-js";
+import { createSignal } from "solid-js";
+import { ColorName, Theme } from "../constants/themes";
 
-const defaultTheme: ThemeColors = {
+const defaultTheme: Theme = {
   bg: "#323437",
   main: "#e2b714",
   caret: "#e2b714",
@@ -13,22 +14,12 @@ const defaultTheme: ThemeColors = {
   colorfulErrorExtra: "#7e2a33",
 };
 
-export type ThemeColors = {
-  bg: string;
-  main: string;
-  caret: string;
-  sub: string;
-  subAlt: string;
-  text: string;
-  error: string;
-  errorExtra: string;
-  colorfulError: string;
-  colorfulErrorExtra: string;
-};
-export type ColorName = keyof ThemeColors;
-
-const [themeColors, setThemeColors] = createSignal<ThemeColors>(defaultTheme);
-
-const getThemeColors = createMemo(() => themeColors());
+export const [getThemeColors, setThemeColor] =
+  createSignal<Theme>(defaultTheme);
 
-export { getThemeColors, setThemeColors };
+export function updateThemeColor(key: ColorName, color: string): void {
+  setThemeColor((prev) => ({
+    ...prev,
+    [key]: color,
+  }));
+}

From 720c58aa004c6e8d7cd780db05c78559c3e32998 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 15 Jan 2026 16:34:28 +0100
Subject: [PATCH 05/51] fix

---
 frontend/src/ts/elements/settings/theme-picker.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index c85b728bbf99..ae3feaf3db82 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -395,9 +395,9 @@ $(".pageSettings #loadCustomColorsFromPreset").on("click", async () => {
   ThemeController.applyPreset(Config.theme);
   const themeColors = getThemeColors();
 
-  Misc.typedKeys(themeColors).forEach((key) =>
-    updateColors(key, themeColors[key] as string),
-  );
+  Misc.typedKeys(themeColors)
+    .filter((it) => it !== "hasCss")
+    .forEach((key) => updateColors(key, themeColors[key]));
 });
 
 $(".pageSettings #saveCustomThemeButton").on("click", async () => {

From cb70a085149281ff19d9a1da35d7a46a1451c27c Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 15 Jan 2026 17:23:28 +0100
Subject: [PATCH 06/51] the big yeet

---
 frontend/src/ts/constants/themes.ts           | 2986 ++++++++++++-----
 frontend/static/themes/8008.css               |   12 -
 frontend/static/themes/80s_after_dark.css     |   12 -
 frontend/static/themes/9009.css               |   13 -
 frontend/static/themes/aether.css             |   13 -
 frontend/static/themes/alduin.css             |   12 -
 frontend/static/themes/alpine.css             |   12 -
 frontend/static/themes/anti_hero.css          |   12 -
 frontend/static/themes/arch.css               |   12 -
 frontend/static/themes/aurora.css             |   13 -
 frontend/static/themes/beach.css              |   13 -
 frontend/static/themes/bento.css              |   12 -
 frontend/static/themes/bingsu.css             |   14 -
 frontend/static/themes/bliss.css              |   12 -
 frontend/static/themes/blue_dolphin.css       |   12 -
 frontend/static/themes/blueberry_dark.css     |   13 -
 frontend/static/themes/blueberry_light.css    |   13 -
 frontend/static/themes/botanical.css          |   12 -
 frontend/static/themes/bouquet.css            |   12 -
 frontend/static/themes/breeze.css             |   12 -
 frontend/static/themes/bushido.css            |   12 -
 frontend/static/themes/cafe.css               |   12 -
 frontend/static/themes/camping.css            |   13 -
 frontend/static/themes/carbon.css             |   12 -
 frontend/static/themes/catppuccin.css         |   13 -
 frontend/static/themes/chaos_theory.css       |   14 -
 frontend/static/themes/cheesecake.css         |   12 -
 frontend/static/themes/cherry_blossom.css     |   12 -
 frontend/static/themes/comfy.css              |   12 -
 frontend/static/themes/copper.css             |   12 -
 frontend/static/themes/creamsicle.css         |   12 -
 frontend/static/themes/cy_red.css             |   12 -
 frontend/static/themes/cyberspace.css         |   12 -
 frontend/static/themes/dark.css               |   12 -
 frontend/static/themes/dark_magic_girl.css    |   12 -
 frontend/static/themes/dark_note.css          |   18 -
 frontend/static/themes/deku.css               |   12 -
 frontend/static/themes/desert_oasis.css       |   13 -
 frontend/static/themes/dev.css                |   12 -
 frontend/static/themes/diner.css              |   12 -
 frontend/static/themes/dino.css               |   12 -
 frontend/static/themes/discord.css            |   12 -
 frontend/static/themes/dmg.css                |   13 -
 frontend/static/themes/dollar.css             |   12 -
 frontend/static/themes/dracula.css            |   13 -
 frontend/static/themes/drowning.css           |   12 -
 frontend/static/themes/dualshot.css           |   13 -
 frontend/static/themes/earthsong.css          |   13 -
 frontend/static/themes/everblush.css          |   12 -
 frontend/static/themes/evil_eye.css           |   12 -
 frontend/static/themes/ez_mode.css            |   13 -
 frontend/static/themes/fire.css               |   13 -
 frontend/static/themes/fledgling.css          |   12 -
 frontend/static/themes/fleuriste.css          |   13 -
 frontend/static/themes/floret.css             |   12 -
 frontend/static/themes/froyo.css              |   13 -
 frontend/static/themes/frozen_llama.css       |   12 -
 frontend/static/themes/fruit_chew.css         |   13 -
 frontend/static/themes/fundamentals.css       |   13 -
 frontend/static/themes/future_funk.css        |   13 -
 frontend/static/themes/github.css             |   12 -
 frontend/static/themes/godspeed.css           |   12 -
 frontend/static/themes/graen.css              |   13 -
 frontend/static/themes/grand_prix.css         |   12 -
 frontend/static/themes/grape.css              |   13 -
 frontend/static/themes/gruvbox_dark.css       |   12 -
 frontend/static/themes/gruvbox_light.css      |   12 -
 frontend/static/themes/hammerhead.css         |   12 -
 frontend/static/themes/hanok.css              |   12 -
 frontend/static/themes/hedge.css              |   12 -
 frontend/static/themes/honey.css              |   12 -
 frontend/static/themes/horizon.css            |   13 -
 frontend/static/themes/husqy.css              |   13 -
 frontend/static/themes/iceberg_dark.css       |   12 -
 frontend/static/themes/iceberg_light.css      |   12 -
 frontend/static/themes/incognito.css          |   13 -
 frontend/static/themes/ishtar.css             |   13 -
 frontend/static/themes/iv_clover.css          |   12 -
 frontend/static/themes/iv_spade.css           |   12 -
 frontend/static/themes/joker.css              |   12 -
 frontend/static/themes/laser.css              |   12 -
 frontend/static/themes/lavender.css           |   13 -
 frontend/static/themes/leather.css            |   12 -
 frontend/static/themes/lil_dragon.css         |   13 -
 frontend/static/themes/lilac_mist.css         |   12 -
 frontend/static/themes/lime.css               |   12 -
 frontend/static/themes/luna.css               |   12 -
 frontend/static/themes/macroblank.css         |   12 -
 frontend/static/themes/magic_girl.css         |   12 -
 frontend/static/themes/mashu.css              |   12 -
 frontend/static/themes/matcha_moccha.css      |   12 -
 frontend/static/themes/material.css           |   12 -
 frontend/static/themes/matrix.css             |   13 -
 frontend/static/themes/menthol.css            |   12 -
 frontend/static/themes/metaverse.css          |   12 -
 frontend/static/themes/metropolis.css         |   13 -
 frontend/static/themes/mexican.css            |   12 -
 frontend/static/themes/miami.css              |   12 -
 frontend/static/themes/miami_nights.css       |   12 -
 frontend/static/themes/midnight.css           |   12 -
 frontend/static/themes/milkshake.css          |   13 -
 frontend/static/themes/mint.css               |   12 -
 frontend/static/themes/mizu.css               |   12 -
 frontend/static/themes/modern_dolch.css       |   12 -
 frontend/static/themes/modern_dolch_light.css |   12 -
 frontend/static/themes/modern_ink.css         |   13 -
 frontend/static/themes/monokai.css            |   12 -
 frontend/static/themes/moonlight.css          |   12 -
 frontend/static/themes/mountain.css           |   12 -
 frontend/static/themes/mr_sleeves.css         |   13 -
 frontend/static/themes/ms_cupcakes.css        |   12 -
 frontend/static/themes/muted.css              |   12 -
 frontend/static/themes/nautilus.css           |   12 -
 frontend/static/themes/nebula.css             |   12 -
 frontend/static/themes/night_runner.css       |   12 -
 frontend/static/themes/nord.css               |   12 -
 frontend/static/themes/nord_light.css         |   12 -
 frontend/static/themes/norse.css              |   12 -
 frontend/static/themes/oblivion.css           |   13 -
 frontend/static/themes/olive.css              |   12 -
 frontend/static/themes/olivia.css             |   12 -
 frontend/static/themes/onedark.css            |   12 -
 frontend/static/themes/our_theme.css          |   12 -
 frontend/static/themes/pale_nimbus.css        |   12 -
 frontend/static/themes/paper.css              |   12 -
 frontend/static/themes/passion_fruit.css      |   12 -
 frontend/static/themes/pastel.css             |   12 -
 frontend/static/themes/peach_blossom.css      |   12 -
 frontend/static/themes/peaches.css            |   12 -
 frontend/static/themes/phantom.css            |   13 -
 frontend/static/themes/pink_lemonade.css      |   12 -
 frontend/static/themes/pulse.css              |   12 -
 frontend/static/themes/purpleish.css          |   12 -
 frontend/static/themes/rainbow_trail.css      |   11 -
 frontend/static/themes/red_dragon.css         |   12 -
 frontend/static/themes/red_samurai.css        |   12 -
 frontend/static/themes/repose_dark.css        |   12 -
 frontend/static/themes/repose_light.css       |   12 -
 frontend/static/themes/retro.css              |   12 -
 frontend/static/themes/retrocast.css          |   13 -
 frontend/static/themes/rgb.css                |   13 -
 frontend/static/themes/rose_pine.css          |   12 -
 frontend/static/themes/rose_pine_dawn.css     |   12 -
 frontend/static/themes/rose_pine_moon.css     |   12 -
 frontend/static/themes/rudy.css               |   12 -
 frontend/static/themes/ryujinscales.css       |   13 -
 frontend/static/themes/serika.css             |   12 -
 frontend/static/themes/sewing_tin.css         |   13 -
 frontend/static/themes/sewing_tin_light.css   |   13 -
 frontend/static/themes/shadow.css             |   13 -
 frontend/static/themes/shoko.css              |   12 -
 frontend/static/themes/slambook.css           |   12 -
 frontend/static/themes/snes.css               |   13 -
 frontend/static/themes/soaring_skies.css      |   12 -
 frontend/static/themes/solarized_dark.css     |   12 -
 frontend/static/themes/solarized_light.css    |   12 -
 frontend/static/themes/solarized_osaka.css    |   13 -
 frontend/static/themes/sonokai.css            |   12 -
 frontend/static/themes/spiderman.css          |   12 -
 frontend/static/themes/stealth.css            |   12 -
 frontend/static/themes/strawberry.css         |   12 -
 frontend/static/themes/striker.css            |   12 -
 frontend/static/themes/suisei.css             |   13 -
 frontend/static/themes/sunset.css             |   13 -
 frontend/static/themes/superuser.css          |   12 -
 frontend/static/themes/sweden.css             |   12 -
 frontend/static/themes/tangerine.css          |   12 -
 frontend/static/themes/taro.css               |   14 -
 frontend/static/themes/terminal.css           |   12 -
 frontend/static/themes/terra.css              |   12 -
 frontend/static/themes/terrazzo.css           |   13 -
 frontend/static/themes/terror_below.css       |   12 -
 frontend/static/themes/tiramisu.css           |   12 -
 frontend/static/themes/trackday.css           |   13 -
 frontend/static/themes/trance.css             |   13 -
 frontend/static/themes/tron_orange.css        |   12 -
 frontend/static/themes/vaporwave.css          |   12 -
 frontend/static/themes/vesper.css             |   13 -
 frontend/static/themes/vesper_light.css       |   13 -
 frontend/static/themes/viridescent.css        |   12 -
 frontend/static/themes/voc.css                |   12 -
 frontend/static/themes/vscode.css             |   12 -
 frontend/static/themes/watermelon.css         |   12 -
 frontend/static/themes/wavez.css              |   12 -
 frontend/static/themes/witch_girl.css         |   12 -
 185 files changed, 2074 insertions(+), 3181 deletions(-)
 delete mode 100644 frontend/static/themes/8008.css
 delete mode 100644 frontend/static/themes/80s_after_dark.css
 delete mode 100644 frontend/static/themes/alduin.css
 delete mode 100644 frontend/static/themes/alpine.css
 delete mode 100644 frontend/static/themes/anti_hero.css
 delete mode 100644 frontend/static/themes/arch.css
 delete mode 100644 frontend/static/themes/bento.css
 delete mode 100644 frontend/static/themes/bliss.css
 delete mode 100644 frontend/static/themes/blue_dolphin.css
 delete mode 100644 frontend/static/themes/botanical.css
 delete mode 100644 frontend/static/themes/bouquet.css
 delete mode 100644 frontend/static/themes/breeze.css
 delete mode 100644 frontend/static/themes/bushido.css
 delete mode 100644 frontend/static/themes/cafe.css
 delete mode 100644 frontend/static/themes/carbon.css
 delete mode 100644 frontend/static/themes/cherry_blossom.css
 delete mode 100644 frontend/static/themes/comfy.css
 delete mode 100644 frontend/static/themes/copper.css
 delete mode 100644 frontend/static/themes/creamsicle.css
 delete mode 100644 frontend/static/themes/cy_red.css
 delete mode 100644 frontend/static/themes/cyberspace.css
 delete mode 100644 frontend/static/themes/dark.css
 delete mode 100644 frontend/static/themes/dark_magic_girl.css
 delete mode 100644 frontend/static/themes/deku.css
 delete mode 100644 frontend/static/themes/diner.css
 delete mode 100644 frontend/static/themes/dino.css
 delete mode 100644 frontend/static/themes/discord.css
 delete mode 100644 frontend/static/themes/dollar.css
 delete mode 100644 frontend/static/themes/drowning.css
 delete mode 100644 frontend/static/themes/earthsong.css
 delete mode 100644 frontend/static/themes/everblush.css
 delete mode 100644 frontend/static/themes/evil_eye.css
 delete mode 100644 frontend/static/themes/fledgling.css
 delete mode 100644 frontend/static/themes/floret.css
 delete mode 100644 frontend/static/themes/frozen_llama.css
 delete mode 100644 frontend/static/themes/github.css
 delete mode 100644 frontend/static/themes/godspeed.css
 delete mode 100644 frontend/static/themes/grand_prix.css
 delete mode 100644 frontend/static/themes/gruvbox_dark.css
 delete mode 100644 frontend/static/themes/gruvbox_light.css
 delete mode 100644 frontend/static/themes/hammerhead.css
 delete mode 100644 frontend/static/themes/hanok.css
 delete mode 100644 frontend/static/themes/hedge.css
 delete mode 100644 frontend/static/themes/honey.css
 delete mode 100644 frontend/static/themes/iceberg_dark.css
 delete mode 100644 frontend/static/themes/iceberg_light.css
 delete mode 100644 frontend/static/themes/iv_clover.css
 delete mode 100644 frontend/static/themes/iv_spade.css
 delete mode 100644 frontend/static/themes/joker.css
 delete mode 100644 frontend/static/themes/laser.css
 delete mode 100644 frontend/static/themes/leather.css
 delete mode 100644 frontend/static/themes/lilac_mist.css
 delete mode 100644 frontend/static/themes/lime.css
 delete mode 100644 frontend/static/themes/luna.css
 delete mode 100644 frontend/static/themes/macroblank.css
 delete mode 100644 frontend/static/themes/magic_girl.css
 delete mode 100644 frontend/static/themes/mashu.css
 delete mode 100644 frontend/static/themes/matcha_moccha.css
 delete mode 100644 frontend/static/themes/material.css
 delete mode 100644 frontend/static/themes/menthol.css
 delete mode 100644 frontend/static/themes/metaverse.css
 delete mode 100644 frontend/static/themes/mexican.css
 delete mode 100644 frontend/static/themes/miami.css
 delete mode 100644 frontend/static/themes/miami_nights.css
 delete mode 100644 frontend/static/themes/midnight.css
 delete mode 100644 frontend/static/themes/mint.css
 delete mode 100644 frontend/static/themes/mizu.css
 delete mode 100644 frontend/static/themes/modern_dolch.css
 delete mode 100644 frontend/static/themes/modern_dolch_light.css
 delete mode 100644 frontend/static/themes/monokai.css
 delete mode 100644 frontend/static/themes/mountain.css
 delete mode 100644 frontend/static/themes/ms_cupcakes.css
 delete mode 100644 frontend/static/themes/muted.css
 delete mode 100644 frontend/static/themes/nautilus.css
 delete mode 100644 frontend/static/themes/nebula.css
 delete mode 100644 frontend/static/themes/night_runner.css
 delete mode 100644 frontend/static/themes/nord.css
 delete mode 100644 frontend/static/themes/nord_light.css
 delete mode 100644 frontend/static/themes/norse.css
 delete mode 100644 frontend/static/themes/olive.css
 delete mode 100644 frontend/static/themes/olivia.css
 delete mode 100644 frontend/static/themes/onedark.css
 delete mode 100644 frontend/static/themes/our_theme.css
 delete mode 100644 frontend/static/themes/pale_nimbus.css
 delete mode 100644 frontend/static/themes/paper.css
 delete mode 100644 frontend/static/themes/passion_fruit.css
 delete mode 100644 frontend/static/themes/pastel.css
 delete mode 100644 frontend/static/themes/peach_blossom.css
 delete mode 100644 frontend/static/themes/peaches.css
 delete mode 100644 frontend/static/themes/pink_lemonade.css
 delete mode 100644 frontend/static/themes/pulse.css
 delete mode 100644 frontend/static/themes/purpleish.css
 delete mode 100644 frontend/static/themes/red_dragon.css
 delete mode 100644 frontend/static/themes/red_samurai.css
 delete mode 100644 frontend/static/themes/repose_dark.css
 delete mode 100644 frontend/static/themes/repose_light.css
 delete mode 100644 frontend/static/themes/retro.css
 delete mode 100644 frontend/static/themes/rose_pine.css
 delete mode 100644 frontend/static/themes/rose_pine_dawn.css
 delete mode 100644 frontend/static/themes/rose_pine_moon.css
 delete mode 100644 frontend/static/themes/rudy.css
 delete mode 100644 frontend/static/themes/serika.css
 delete mode 100644 frontend/static/themes/shoko.css
 delete mode 100644 frontend/static/themes/slambook.css
 delete mode 100644 frontend/static/themes/soaring_skies.css
 delete mode 100644 frontend/static/themes/solarized_dark.css
 delete mode 100644 frontend/static/themes/solarized_light.css
 delete mode 100644 frontend/static/themes/sonokai.css
 delete mode 100644 frontend/static/themes/spiderman.css
 delete mode 100644 frontend/static/themes/strawberry.css
 delete mode 100644 frontend/static/themes/striker.css
 delete mode 100644 frontend/static/themes/superuser.css
 delete mode 100644 frontend/static/themes/sweden.css
 delete mode 100644 frontend/static/themes/tangerine.css
 delete mode 100644 frontend/static/themes/terminal.css
 delete mode 100644 frontend/static/themes/terra.css
 delete mode 100644 frontend/static/themes/terror_below.css
 delete mode 100644 frontend/static/themes/tiramisu.css
 delete mode 100644 frontend/static/themes/tron_orange.css
 delete mode 100644 frontend/static/themes/vaporwave.css
 delete mode 100644 frontend/static/themes/viridescent.css
 delete mode 100644 frontend/static/themes/voc.css
 delete mode 100644 frontend/static/themes/vscode.css
 delete mode 100644 frontend/static/themes/watermelon.css
 delete mode 100644 frontend/static/themes/wavez.css
 delete mode 100644 frontend/static/themes/witch_girl.css

diff --git a/frontend/src/ts/constants/themes.ts b/frontend/src/ts/constants/themes.ts
index 9a7fac754877..78fbc603063e 100644
--- a/frontend/src/ts/constants/themes.ts
+++ b/frontend/src/ts/constants/themes.ts
@@ -28,1146 +28,2308 @@ export type ColorName = keyof Theme;
 export const themes: Record<ThemeName, Theme> = {
   "8008": {
     bg: "#333a45",
+    caret: "#f44c7f",
     main: "#f44c7f",
     sub: "#939eae",
+    subAlt: "#2e343d",
     text: "#e9ecf0",
+    error: "#da3333",
+    errorExtra: "#791717",
+    colorfulError: "#c5da33",
+    colorfulErrorExtra: "#849224",
   },
   "9009": {
     bg: "#eeebe2",
+    caret: "#7fa480",
     main: "#080909",
     sub: "#99947f",
+    subAlt: "#d3cfc1",
     text: "#080909",
+    error: "#c87e74",
+    errorExtra: "#a56961",
+    colorfulError: "#c87e74",
+    colorfulErrorExtra: "#a56961",
+    hasCss: true,
   },
-  dark_note: {
-    bg: "#1f1f1f",
-    main: "#f2c17b",
-    sub: "#768f95",
-    text: "#d2dff4",
+  "80s_after_dark": {
+    bg: "#1b1d36",
+    caret: "#99d6ea",
+    main: "#fca6d1",
+    sub: "#99d6ea",
+    subAlt: "#17182c",
+    text: "#e1e7ec",
+    error: "#fffb85",
+    errorExtra: "#fffb85",
+    colorfulError: "#fffb85",
+    colorfulErrorExtra: "#fffb85",
   },
-  viridescent: {
-    bg: "#2c3333",
-    main: "#95d5b2",
-    sub: "#84a98c",
-    text: "#e9f5db",
+  aether: {
+    bg: "#101820",
+    caret: "#eedaea",
+    main: "#eedaea",
+    sub: "#cf6bdd",
+    subAlt: "#292136",
+    text: "#eedaea",
+    error: "#ff5253",
+    errorExtra: "#e3002b",
+    colorfulError: "#ff5253",
+    colorfulErrorExtra: "#e3002b",
+    hasCss: true,
   },
-  dark: {
-    bg: "#111",
-    main: "#eee",
-    sub: "#444",
-    text: "#eee",
+  alduin: {
+    bg: "#1c1c1c",
+    caret: "#e3e3e3",
+    main: "#dfd7af",
+    sub: "#444444",
+    subAlt: "#242424",
+    text: "#f5f3ed",
+    error: "#af5f5f",
+    errorExtra: "#4d2113",
+    colorfulError: "#af5f5f",
+    colorfulErrorExtra: "#4d2113",
   },
-  phantom: {
-    bg: "#1a1b26",
-    main: "#7aa2f7",
-    sub: "#414868",
-    text: "#c0caf5",
+  alpine: {
+    bg: "#6c687f",
+    caret: "#585568",
+    main: "#ffffff",
+    sub: "#9994b8",
+    subAlt: "#77738c",
+    text: "#ffffff",
+    error: "#e32b2b",
+    errorExtra: "#a62626",
+    colorfulError: "#e32b2b",
+    colorfulErrorExtra: "#a62626",
   },
-  muted: {
-    bg: "#525252",
-    main: "#c5b4e3",
-    sub: "#939eae",
-    text: "#b1e4e3",
+  anti_hero: {
+    bg: "#00002e",
+    caret: "#ffffff",
+    main: "#ffadad",
+    sub: "#ff3d8b",
+    subAlt: "#060548",
+    text: "#f1deef",
+    error: "#8fecff",
+    errorExtra: "#558cab",
+    colorfulError: "#8fecff",
+    colorfulErrorExtra: "#558cab",
   },
-  dark_magic_girl: {
-    bg: "#091f2c",
-    main: "#f5b1cc",
-    sub: "#93e8d3",
-    text: "#a288d9",
+  arch: {
+    bg: "#0c0d11",
+    caret: "#7ebab5",
+    main: "#7ebab5",
+    sub: "#454864",
+    subAlt: "#171a25",
+    text: "#f6f5f5",
+    error: "#ff4754",
+    errorExtra: "#b02a33",
+    colorfulError: "#ff4754",
+    colorfulErrorExtra: "#b02a33",
   },
-  carbon: {
-    bg: "#313131",
-    main: "#f66e0d",
-    sub: "#616161",
-    text: "#f5e6c8",
+  aurora: {
+    bg: "#011926",
+    caret: "#00e980",
+    main: "#00e980",
+    sub: "#245c69",
+    subAlt: "#000c13",
+    text: "#fff",
+    error: "#b94da1",
+    errorExtra: "#9b3a76",
+    colorfulError: "#b94da1",
+    colorfulErrorExtra: "#9b3a76",
+    hasCss: true,
   },
-  vesper: {
-    bg: "#101010",
-    main: "#ffc799",
-    sub: "#99ffe4",
-    text: "#ffffff",
+  beach: {
+    bg: "#ffeead",
+    caret: "#ffcc5c",
+    main: "#96ceb4",
+    sub: "#ffcc5c",
+    subAlt: "#f7dc8f",
+    text: "#5b7869",
+    error: "#ff6f69",
+    errorExtra: "#ff6f69",
+    colorfulError: "#ff6f69",
+    colorfulErrorExtra: "#ff6f69",
+    hasCss: true,
   },
-  our_theme: {
-    bg: "#ce1226",
-    main: "#fcd116",
-    sub: "#6d0f19",
-    text: "#ffffff",
+  bento: {
+    bg: "#2d394d",
+    caret: "#ff7a90",
+    main: "#ff7a90",
+    sub: "#4a768d",
+    subAlt: "#263041",
+    text: "#fffaf8",
+    error: "#ee2a3a",
+    errorExtra: "#f04040",
+    colorfulError: "#fc2032",
+    colorfulErrorExtra: "#f04040",
   },
-  dots: {
-    bg: "#121520",
-    caret: "#fff",
-    main: "#fff",
-    sub: "#676e8a",
-    subAlt: "#1b1e2c",
+  bingsu: {
+    bg: "#b8a7aa",
+    caret: "#ebe6ea",
+    main: "#83616e",
+    sub: "#48373d",
+    subAlt: "#ab989e",
+    text: "#ebe6ea",
+    error: "#921341",
+    errorExtra: "#640b2c",
+    colorfulError: "#921341",
+    colorfulErrorExtra: "#640b2c",
+    hasCss: true,
+  },
+  bliss: {
+    bg: "#262727",
+    caret: "#f0d3c9",
+    main: "#f0d3c9",
+    sub: "#665957",
+    subAlt: "#343231",
     text: "#fff",
-    error: "#da3333",
-    errorExtra: "#791717",
-    colorfulError: "#da3333",
-    colorfulErrorExtra: "#791717",
+    error: "#bd4141",
+    errorExtra: "#883434",
+    colorfulError: "#bd4141",
+    colorfulErrorExtra: "#883434",
+  },
+  blue_dolphin: {
+    bg: "#003950",
+    caret: "#00bcd4",
+    main: "#ffcefb",
+    sub: "#00e4ff",
+    subAlt: "#014961",
+    text: "#82eaff",
+    error: "#ffbde6",
+    errorExtra: "#ff8188",
+    colorfulError: "#d1a5fd",
+    colorfulErrorExtra: "#ff8188",
+  },
+  blueberry_dark: {
+    bg: "#212b42",
+    caret: "#962f7e",
+    main: "#add7ff",
+    sub: "#5c7da5",
+    subAlt: "#1b2334",
+    text: "#91b4d5",
+    error: "#df4576",
+    errorExtra: "#d996ac",
+    colorfulError: "#df4576",
+    colorfulErrorExtra: "#d996ac",
     hasCss: true,
   },
-  nautilus: {
-    bg: "#132237",
-    main: "#ebb723",
-    sub: "#0b4c6c",
-    text: "#1cbaac",
+  blueberry_light: {
+    bg: "#dae0f5",
+    caret: "#df4576",
+    main: "#506477",
+    sub: "#92a4be",
+    subAlt: "#c1c7df",
+    text: "#678198",
+    error: "#df4576",
+    errorExtra: "#d996ac",
+    colorfulError: "#df4576",
+    colorfulErrorExtra: "#d996ac",
+    hasCss: true,
   },
-  serika: {
-    bg: "#e1e1e3",
-    main: "#e2b714",
-    sub: "#aaaeb3",
-    text: "#323437",
+  botanical: {
+    bg: "#7b9c98",
+    caret: "#abc6c4",
+    main: "#eaf1f3",
+    sub: "#495755",
+    subAlt: "#72908d",
+    text: "#eaf1f3",
+    error: "#f6c9b4",
+    errorExtra: "#f59a71",
+    colorfulError: "#f6c9b4",
+    colorfulErrorExtra: "#f59a71",
   },
-  serika_dark: {
-    bg: "#323437",
-    main: "#e2b714",
-    caret: "#e2b714",
-    sub: "#646669",
-    subAlt: "#2c2e31",
-    text: "#d1d0c5",
-    error: "#ca4754",
-    errorExtra: "#7e2a33",
-    colorfulError: "#ca4754",
-    colorfulErrorExtra: "#7e2a33",
+  bouquet: {
+    bg: "#173f35",
+    caret: "#eaa09c",
+    main: "#eaa09c",
+    sub: "#408e7b",
+    subAlt: "#1f4e43",
+    text: "#e9e0d2",
+    error: "#d44729",
+    errorExtra: "#8f2f19",
+    colorfulError: "#d44729",
+    colorfulErrorExtra: "#8f2f19",
+  },
+  breeze: {
+    bg: "#e8d5c4",
+    caret: "#7d67a9",
+    main: "#7d67a9",
+    sub: "#3a98b9",
+    subAlt: "#f6e6da",
+    text: "#1b4c5e",
+    error: "#7d67a9",
+    errorExtra: "#9f3e6d",
+    colorfulError: "#f9f871",
+    colorfulErrorExtra: "#67dfa1",
   },
   bushido: {
     bg: "#242933",
+    caret: "#ec4c56",
     main: "#ec4c56",
     sub: "#596172",
+    subAlt: "#1c222d",
     text: "#f6f0e9",
+    error: "#ec4c56",
+    errorExtra: "#9b333a",
+    colorfulError: "#ecdc4c",
+    colorfulErrorExtra: "#bdb03d",
   },
-  red_samurai: {
-    bg: "#84202c",
-    main: "#c79e6e",
-    sub: "#55131b",
-    text: "#e2dad0",
-  },
-  rgb: {
-    bg: "#111",
-    main: "#eee",
-    sub: "#444",
-    text: "#eee",
+  cafe: {
+    bg: "#ceb18d",
+    caret: "#14120f",
+    main: "#14120f",
+    sub: "#d4d2d1",
+    subAlt: "#bba180",
+    text: "#14120f",
+    error: "#c82931",
+    errorExtra: "#ac1823",
+    colorfulError: "#c82931",
+    colorfulErrorExtra: "#ac1823",
   },
-  oblivion: {
-    bg: "#313231",
-    main: "#a5a096",
-    sub: "#5d6263",
-    text: "#f7f5f1",
+  camping: {
+    bg: "#faf1e4",
+    caret: "#618c56",
+    main: "#618c56",
+    sub: "#c2b8aa",
+    subAlt: "#e7dccb",
+    text: "#3c403b",
+    error: "#ad4f4e",
+    errorExtra: "#7e3a39",
+    colorfulError: "#ad4f4e",
+    colorfulErrorExtra: "#7e3a39",
+    hasCss: true,
   },
-  magic_girl: {
-    bg: "#ffffff",
-    main: "#f5b1cc",
-    sub: "#93e8d3",
-    text: "#00ac8c",
+  carbon: {
+    bg: "#313131",
+    caret: "#f66e0d",
+    main: "#f66e0d",
+    sub: "#616161",
+    subAlt: "#2b2b2b",
+    text: "#f5e6c8",
+    error: "#e72d2d",
+    errorExtra: "#7e2a33",
+    colorfulError: "#e72d2d",
+    colorfulErrorExtra: "#7e2a33",
   },
-  metropolis: {
-    bg: "#0f1f2c",
-    main: "#56c3b7",
-    sub: "#326984",
-    text: "#e4edf1",
+  catppuccin: {
+    bg: "#1e1e2e",
+    caret: "#f2cdcd",
+    main: "#cba6f7",
+    sub: "#7f849c",
+    subAlt: "#181825",
+    text: "#cdd6f4",
+    error: "#f38ba8",
+    errorExtra: "#eba0ac",
+    colorfulError: "#f38ba8",
+    colorfulErrorExtra: "#eba0ac",
+    hasCss: true,
   },
-  mountain: {
-    bg: "#0f0f0f",
-    main: "#e7e7e7",
-    sub: "#4c4c4c",
-    text: "#e7e7e7",
+  chaos_theory: {
+    bg: "#141221",
+    caret: "#dde5ed",
+    main: "#fd77d7",
+    sub: "#676e8a",
+    subAlt: "#1e1d2f",
+    text: "#dde5ed",
+    error: "#fd77d7",
+    errorExtra: "#b03c47",
+    colorfulError: "#ff5869",
+    colorfulErrorExtra: "#b03c47",
+    hasCss: true,
   },
-  laser: {
-    bg: "#221b44",
-    main: "#009eaf",
-    sub: "#b82356",
-    text: "#dbe7e8",
+  cheesecake: {
+    bg: "#fdf0d5",
+    caret: "#892948",
+    main: "#8e2949",
+    sub: "#d91c81",
+    subAlt: "#f3e2bf",
+    text: "#3a3335",
+    error: "#5cf074",
+    errorExtra: "#5cf074",
+    colorfulError: "#5cf074",
+    colorfulErrorExtra: "#5cf074",
+    hasCss: true,
   },
-  retro: {
-    bg: "#dad3c1",
-    main: "#1d1b17",
-    sub: "#918b7d",
-    text: "#1d1b17",
+  cherry_blossom: {
+    bg: "#323437",
+    caret: "#ffffff",
+    main: "#d65ccc",
+    sub: "#787d82",
+    subAlt: "#2d2f31",
+    text: "#d1d0c5",
+    error: "#ca4754",
+    errorExtra: "#d32738",
+    colorfulError: "#ec182d",
+    colorfulErrorExtra: "#6e0c16",
   },
-  dracula: {
-    bg: "#282a36",
-    main: "#bd93f9",
-    sub: "#6272a4",
-    text: "#f8f8f2",
-  },
-  nord: {
-    bg: "#242933",
-    main: "#88C0D0",
-    sub: "#2E3440",
-    text: "#88C0D0",
-  },
-  mr_sleeves: {
-    bg: "#d1d7da",
-    main: "#daa99b",
-    sub: "#9a9fa1",
-    text: "#1d1d1d",
+  comfy: {
+    bg: "#4a5b6e",
+    caret: "#9ec1cc",
+    main: "#f8cdc6",
+    sub: "#9ec1cc",
+    subAlt: "#425366",
+    text: "#f5efee",
+    error: "#c9465e",
+    errorExtra: "#c9465e",
+    colorfulError: "#c9465e",
+    colorfulErrorExtra: "#c9465e",
   },
-  olivia: {
-    bg: "#1c1b1d",
-    main: "#deaf9d",
-    sub: "#4e3e3e",
-    text: "#f2efed",
+  copper: {
+    bg: "#442f29",
+    caret: "#c25c42",
+    main: "#b46a55",
+    sub: "#7ebab5",
+    subAlt: "#50362e",
+    text: "#e7e0de",
+    error: "#a32424",
+    errorExtra: "#ec0909",
+    colorfulError: "#a32424",
+    colorfulErrorExtra: "#ec0909",
   },
-  bliss: {
-    bg: "#262727",
-    main: "#f0d3c9",
-    sub: "#665957",
-    text: "#fff",
+  creamsicle: {
+    bg: "#ff9869",
+    caret: "#fcfcf8",
+    main: "#fcfcf8",
+    sub: "#ff661f",
+    subAlt: "#fe8954",
+    text: "#fcfcf8",
+    error: "#6a0dad",
+    errorExtra: "#6a0dad",
+    colorfulError: "#6a0dad",
+    colorfulErrorExtra: "#6a0dad",
   },
-  mizu: {
-    bg: "#afcbdd",
-    main: "#fcfbf6",
-    sub: "#85a5bb",
-    text: "#1a2633",
+  cy_red: {
+    bg: "#6e2626",
+    caret: "#541d1d",
+    main: "#e55050",
+    sub: "#ff6060",
+    subAlt: "#3f1616",
+    text: "#ffaaaa",
+    error: "#919fd9",
+    errorExtra: "#4d5d9e",
+    colorfulError: "#919fd9",
+    colorfulErrorExtra: "#4d5d9e",
   },
-  metaverse: {
-    bg: "#232323",
-    main: "#d82934",
-    sub: "#5e5e5e",
-    text: "#e8e8e8",
+  cyberspace: {
+    bg: "#181c18",
+    caret: "#00ce7c",
+    main: "#00ce7c",
+    sub: "#9578d3",
+    subAlt: "#131613",
+    text: "#c2fbe1",
+    error: "#ff5f5f",
+    errorExtra: "#d22a2a",
+    colorfulError: "#ff5f5f",
+    colorfulErrorExtra: "#d22a2a",
   },
-  shadow: {
-    bg: "#000",
+  dark: {
+    bg: "#111",
+    caret: "#eee",
     main: "#eee",
     sub: "#444",
+    subAlt: "#191919",
     text: "#eee",
+    error: "#da3333",
+    errorExtra: "#791717",
+    colorfulError: "#da3333",
+    colorfulErrorExtra: "#791717",
   },
-  mint: {
-    bg: "#05385b",
-    main: "#5cdb95",
-    sub: "#20688a",
-    text: "#edf5e1",
+  dark_magic_girl: {
+    bg: "#091f2c",
+    caret: "#a288d9",
+    main: "#f5b1cc",
+    sub: "#93e8d3",
+    subAlt: "#071823",
+    text: "#a288d9",
+    error: "#e45c96",
+    errorExtra: "#e45c96",
+    colorfulError: "#00b398",
+    colorfulErrorExtra: "#e45c96",
   },
-  miami: {
-    bg: "#f35588",
-    main: "#05dfd7",
-    sub: "#94294c",
-    text: "#f0e9ec",
+  dark_note: {
+    bg: "#1f1f1f",
+    caret: "#e3dce0",
+    main: "#f2c17b",
+    sub: "#768f95",
+    subAlt: "#141414",
+    text: "#d2dff4",
+    error: "#ff0000",
+    errorExtra: "#588498",
+    colorfulError: "#ff0000",
+    colorfulErrorExtra: "#588498",
+    hasCss: true,
   },
-  miami_nights: {
-    bg: "#18181a",
-    main: "#e4609b",
-    sub: "#47bac0",
-    text: "#fff",
+  darling: {
+    bg: "#fec8cd",
+    caret: "#ffffff",
+    main: "#ffffff",
+    sub: "#a30000",
+    subAlt: "#f2babd",
+    text: "#ffffff",
+    error: "#2e7dde",
+    errorExtra: "#2e7dde",
+    colorfulError: "#2e7dde",
+    colorfulErrorExtra: "#2e7dde",
   },
-  modern_dolch: {
-    bg: "#2d2e30",
-    main: "#7eddd3",
-    sub: "#54585c",
-    text: "#e3e6eb",
+  deku: {
+    bg: "#058b8c",
+    caret: "#b63530",
+    main: "#b63530",
+    sub: "#255458",
+    subAlt: "#0e7d7e",
+    text: "#f7f2ea",
+    error: "#b63530",
+    errorExtra: "#530e0e",
+    colorfulError: "#ddca1f",
+    colorfulErrorExtra: "#8f8610",
   },
-  botanical: {
-    bg: "#7b9c98",
-    main: "#eaf1f3",
-    sub: "#495755",
-    text: "#eaf1f3",
+  desert_oasis: {
+    bg: "#fff2d5",
+    caret: "#3a87fe",
+    main: "#d19d01",
+    sub: "#0061fe",
+    subAlt: "#eddebc",
+    text: "#332800",
+    error: "#76bb40",
+    errorExtra: "#4e7a27",
+    colorfulError: "#76bb40",
+    colorfulErrorExtra: "#4e7a27",
+    hasCss: true,
   },
-  bingsu: {
-    bg: "#b8a7aa",
-    main: "#83616e",
-    sub: "#48373d",
-    text: "#ebe6ea",
+  dev: {
+    bg: "#1b2028",
+    caret: "#4b5975",
+    main: "#23a9d5",
+    sub: "#4b5975",
+    subAlt: "#151a21",
+    text: "#ccccb5",
+    error: "#b81b2c",
+    errorExtra: "#84131f",
+    colorfulError: "#b81b2c",
+    colorfulErrorExtra: "#84131f",
+    hasCss: true,
   },
-  terminal: {
-    bg: "#191a1b",
-    main: "#79a617",
-    sub: "#48494b",
-    text: "#e7eae0",
+  diner: {
+    bg: "#537997",
+    caret: "#ad5145",
+    main: "#c3af5b",
+    sub: "#445c7f",
+    subAlt: "#4d6f8b",
+    text: "#dfdbc8",
+    error: "#ad5145",
+    errorExtra: "#7e2a33",
+    colorfulError: "#ad5145",
+    colorfulErrorExtra: "#7e2a33",
   },
-  lavender: {
-    bg: "#ada6c2",
-    main: "#e4e3e9",
-    sub: "#e4e3e9",
-    text: "#2f2a41",
+  dino: {
+    bg: "#ffffff",
+    caret: "#40d672",
+    main: "#40d672",
+    sub: "#d5d5d5",
+    subAlt: "#cafad8",
+    text: "#1d221f",
+    error: "#ff5f5f",
+    errorExtra: "#d22a2a",
+    colorfulError: "#ff5f5f",
+    colorfulErrorExtra: "#d22a2a",
   },
-  taro: {
-    bg: "#b3baff",
-    main: "#130f1a",
-    sub: "#6f6c91",
-    text: "#130f1a",
+  discord: {
+    bg: "#313338",
+    caret: "#5a65ea",
+    main: "#5a65ea",
+    sub: "#565861",
+    subAlt: "#2b2d31",
+    text: "#dcdee3",
+    error: "#df4f4b",
+    errorExtra: "#df4f4b",
+    colorfulError: "#df4f4b",
+    colorfulErrorExtra: "#df4f4b",
   },
-  striker: {
-    bg: "#124883",
-    main: "#d7dcda",
-    sub: "#0f2d4e",
-    text: "#d6dbd9",
+  dmg: {
+    bg: "#dadbdc",
+    caret: "#384693",
+    main: "#ae185e",
+    sub: "#3846b1",
+    subAlt: "#bec1d2",
+    text: "#414141",
+    error: "#ae185e",
+    errorExtra: "#93335c",
+    colorfulError: "#80a053",
+    colorfulErrorExtra: "#306230",
+    hasCss: true,
   },
-  gruvbox_dark: {
-    bg: "#282828",
-    main: "#d79921",
-    sub: "#665c54",
-    text: "#ebdbb2",
+  dollar: {
+    bg: "#e4e4d4",
+    caret: "#424643",
+    main: "#6b886b",
+    sub: "#8a9b69",
+    subAlt: "#cbd0bf",
+    text: "#555a56",
+    error: "#d60000",
+    errorExtra: "#f68484",
+    colorfulError: "#ca4754",
+    colorfulErrorExtra: "#7e2a33",
   },
-  gruvbox_light: {
-    bg: "#fbf1c7",
-    main: "#689d6a",
-    sub: "#a89984",
-    text: "#3c3836",
+  dots: {
+    bg: "#121520",
+    caret: "#fff",
+    main: "#fff",
+    sub: "#676e8a",
+    subAlt: "#1b1e2c",
+    text: "#fff",
+    error: "#da3333",
+    errorExtra: "#791717",
+    colorfulError: "#da3333",
+    colorfulErrorExtra: "#791717",
+    hasCss: true,
   },
-  monokai: {
-    bg: "#272822",
-    main: "#a6e22e",
-    sub: "#e6db74",
-    text: "#e2e2dc",
+  dracula: {
+    bg: "#282a36",
+    caret: "#bd93f9",
+    main: "#bd93f9",
+    sub: "#6272a4",
+    subAlt: "#20222c",
+    text: "#f8f8f2",
+    error: "#ff5555",
+    errorExtra: "#f1fa8c",
+    colorfulError: "#ff5555",
+    colorfulErrorExtra: "#f1fa8c",
+    hasCss: true,
   },
-  sonokai: {
-    bg: "#2c2e34",
-    main: "#9ed072",
-    sub: "#e7c664",
-    text: "#e2e2e3",
+  drowning: {
+    bg: "#191826",
+    caret: "#4f85e8",
+    main: "#4a6fb5",
+    sub: "#50688c",
+    subAlt: "#1e1f2f",
+    text: "#9393a7",
+    error: "#be555f",
+    errorExtra: "#7e2a33",
+    colorfulError: "#be555f",
+    colorfulErrorExtra: "#7e2a33",
   },
-  camping: {
-    bg: "#faf1e4",
-    main: "#618c56",
-    sub: "#c2b8aa",
-    text: "#3c403b",
+  dualshot: {
+    bg: "#737373",
+    caret: "#212222",
+    main: "#212222",
+    sub: "#aaaaaa",
+    subAlt: "#646464",
+    text: "#212222",
+    error: "#c82931",
+    errorExtra: "#ac1823",
+    colorfulError: "#c82931",
+    colorfulErrorExtra: "#ac1823",
+    hasCss: true,
   },
-  voc: {
-    bg: "#190618",
-    main: "#e0caac",
-    sub: "#4c1e48",
-    text: "#eeeae4",
+  earthsong: {
+    bg: "#292521",
+    caret: "#1298ba",
+    main: "#509452",
+    sub: "#f5ae2d",
+    subAlt: "#1d1b18",
+    text: "#e6c7a8",
+    error: "#7e2a33",
+    errorExtra: "#ff645a",
+    colorfulError: "#7e2a33",
+    colorfulErrorExtra: "#ff645a",
   },
-  vaporwave: {
-    bg: "#a4a7ea",
-    main: "#e368da",
-    sub: "#7c7faf",
-    text: "#f1ebf1",
-  },
-  pulse: {
-    bg: "#181818",
-    main: "#17b8bd",
-    sub: "#53565a",
-    text: "#e5f4f4",
-  },
-  matrix: {
-    bg: "#000000",
-    main: "#15ff00",
-    sub: "#006500",
-    text: "#d1ffcd",
-  },
-  olive: {
-    bg: "#e9e5cc",
-    main: "#92946f",
-    sub: "#b7b39e",
-    text: "#373731",
-  },
-  strawberry: {
-    bg: "#f37f83",
-    main: "#fcfcf8",
-    sub: "#e53c58",
-    text: "#fcfcf8",
+  everblush: {
+    bg: "#141b1e",
+    caret: "#6cbfbf",
+    main: "#8ccf7e",
+    sub: "#838887",
+    subAlt: "#232a2d",
+    text: "#dadada",
+    error: "#e57474",
+    errorExtra: "#ef7e7e",
+    colorfulError: "#e57474",
+    colorfulErrorExtra: "#ef7e7e",
   },
-  night_runner: {
-    bg: "#212121",
-    main: "#feff04",
-    sub: "#5c4a9c",
-    text: "#e8e8e8",
+  evil_eye: {
+    bg: "#0084c2",
+    caret: "#f7f2ea",
+    main: "#f7f2ea",
+    sub: "#01589f",
+    subAlt: "#0c79be",
+    text: "#171718",
+    error: "#ca4754",
+    errorExtra: "#7e2a33",
+    colorfulError: "#ca4754",
+    colorfulErrorExtra: "#7e2a33",
   },
-  cyberspace: {
-    bg: "#181c18",
-    main: "#00ce7c",
-    sub: "#9578d3",
-    text: "#c2fbe1",
+  ez_mode: {
+    bg: "#0068c6",
+    caret: "#4ddb47",
+    main: "#fa62d5",
+    sub: "#138bf7",
+    subAlt: "#005bac",
+    text: "#ffffff",
+    error: "#4ddb47",
+    errorExtra: "#42ba3b",
+    colorfulError: "#4ddb47",
+    colorfulErrorExtra: "#42ba3b",
+    hasCss: true,
   },
-  joker: {
-    bg: "#1a0e25",
-    main: "#99de1e",
-    sub: "#7554a3",
-    text: "#e9e2f5",
+  fire: {
+    bg: "#0f0000",
+    caret: "#b31313",
+    main: "#b31313",
+    sub: "#683434",
+    subAlt: "#200a0a",
+    text: "#ffffff",
+    error: "#2f3cb6",
+    errorExtra: "#434a8f",
+    colorfulError: "#2f3cb6",
+    colorfulErrorExtra: "#434a8f",
+    hasCss: true,
   },
-  dualshot: {
-    bg: "#737373",
-    main: "#212222",
-    sub: "#aaaaaa",
-    text: "#212222",
+  fledgling: {
+    bg: "#3b363f",
+    caret: "#474747",
+    main: "#fc6e83",
+    sub: "#8e5568",
+    subAlt: "#332e38",
+    text: "#e6d5d3",
+    error: "#f52443",
+    errorExtra: "#bd001c",
+    colorfulError: "#ff0a2f",
+    colorfulErrorExtra: "#000000",
   },
-  solarized_dark: {
-    bg: "#002b36",
-    main: "#859900",
-    sub: "#2aa198",
-    text: "#268bd2",
+  fleuriste: {
+    bg: "#c6b294",
+    caret: "#8a785b",
+    main: "#405a52",
+    sub: "#64374d",
+    subAlt: "#b4a389",
+    text: "#091914",
+    error: "#990000",
+    errorExtra: "#8a1414",
+    colorfulError: "#a63a3a",
+    colorfulErrorExtra: "#bd4c4c",
+    hasCss: true,
   },
-  solarized_light: {
-    bg: "#fdf6e3",
-    main: "#859900",
-    sub: "#2aa198",
-    text: "#181819",
+  floret: {
+    bg: "#00272c",
+    caret: "#c3bd40",
+    main: "#ffdd6d",
+    sub: "#779097",
+    subAlt: "#173033",
+    text: "#e5e5e5",
+    error: "#8a4000",
+    errorExtra: "#00708d",
+    colorfulError: "#8a4000",
+    colorfulErrorExtra: "#628b96",
   },
-  solarized_osaka: {
-    bg: "#00141a",
-    main: "#859900",
-    sub: "#2aa198",
-    text: "#b58900",
+  froyo: {
+    bg: "#e1dacb",
+    caret: "#7b7d7d",
+    main: "#7b7d7d",
+    sub: "#b29c5e",
+    subAlt: "#d3cdc1",
+    text: "#7b7d7d",
+    error: "#f28578",
+    errorExtra: "#d56558",
+    colorfulError: "#f28578",
+    colorfulErrorExtra: "#d56558",
+    hasCss: true,
   },
-  terra: {
-    bg: "#0c100e",
-    main: "#89c559",
-    sub: "#436029",
-    text: "#f0edd1",
+  frozen_llama: {
+    bg: "#9bf2ea",
+    caret: "#ffffff",
+    main: "#6d44a6",
+    sub: "#b690fd",
+    subAlt: "#7fe7dd",
+    text: "#ffffff",
+    error: "#e42629",
+    errorExtra: "#e42629",
+    colorfulError: "#e42629",
+    colorfulErrorExtra: "#e42629",
   },
-  red_dragon: {
-    bg: "#1a0b0c",
-    main: "#ff3a32",
-    sub: "#e2a528",
-    text: "#4a4d4e",
+  fruit_chew: {
+    bg: "#d6d3d6",
+    caret: "#b92221",
+    main: "#5c1e5f",
+    sub: "#b49cb5",
+    subAlt: "#cabfca",
+    text: "#282528",
+    error: "#bd2621",
+    errorExtra: "#a62626",
+    colorfulError: "#bd2621",
+    colorfulErrorExtra: "#a62626",
+    hasCss: true,
   },
-  hammerhead: {
-    bg: "#030613",
-    main: "#4fcdb9",
-    sub: "#213c53",
-    text: "#e2f1f5",
+  fundamentals: {
+    bg: "#727474",
+    caret: "#196378",
+    main: "#7fa482",
+    sub: "#cac4be",
+    subAlt: "#666868",
+    text: "#131313",
+    error: "#5e477c",
+    errorExtra: "#413157",
+    colorfulError: "#5e477c",
+    colorfulErrorExtra: "#413157",
+    hasCss: true,
   },
   future_funk: {
     bg: "#2e1a47",
+    caret: "#f7f2ea",
     main: "#f7f2ea",
     sub: "#c18fff",
+    subAlt: "#27173c",
     text: "#f7f2ea",
+    error: "#f04e98",
+    errorExtra: "#bd1c66",
+    colorfulError: "#f04e98",
+    colorfulErrorExtra: "#bd1c66",
+    hasCss: true,
   },
-  milkshake: {
-    bg: "#ffffff",
-    main: "#212b43",
-    sub: "#62cfe6",
-    text: "#212b43",
-  },
-  aether: {
-    bg: "#101820",
-    main: "#eedaea",
-    sub: "#cf6bdd",
-    text: "#eedaea",
-  },
-  froyo: {
-    bg: "#e1dacb",
-    main: "#7b7d7d",
-    sub: "#b29c5e",
-    text: "#7b7d7d",
-  },
-  retrocast: {
-    bg: "#07737a",
-    main: "#88dbdf",
-    sub: "#f3e03b",
-    text: "#ffffff",
+  github: {
+    bg: "#212830",
+    caret: "#41ce5c",
+    main: "#41ce5c",
+    sub: "#788386",
+    subAlt: "#141b23",
+    text: "#ccdae6",
+    error: "#c23e3a",
+    errorExtra: "#c23e3a",
+    colorfulError: "#c23e3a",
+    colorfulErrorExtra: "#c23e3a",
   },
-  luna: {
-    bg: "#221c35",
-    main: "#f67599",
-    sub: "#5a3a7e",
-    text: "#ffe3eb",
+  godspeed: {
+    bg: "#eae4cf",
+    caret: "#f4d476",
+    main: "#9abbcd",
+    sub: "#ada998",
+    subAlt: "#ded9c9",
+    text: "#646669",
+    error: "#ca4754",
+    errorExtra: "#7e2a33",
+    colorfulError: "#ca4754",
+    colorfulErrorExtra: "#7e2a33",
   },
   graen: {
     bg: "#303c36",
+    caret: "#601420",
     main: "#a59682",
     sub: "#181d1a",
+    subAlt: "#36453c",
     text: "#a59682",
+    error: "#601420",
+    errorExtra: "#5f0715",
+    colorfulError: "#601420",
+    colorfulErrorExtra: "#5f0715",
+    hasCss: true,
   },
-  bento: {
-    bg: "#2d394d",
-    main: "#ff7a90",
-    sub: "#4a768d",
-    text: "#fffaf8",
+  grand_prix: {
+    bg: "#36475c",
+    caret: "#c0d036",
+    main: "#c0d036",
+    sub: "#5c6c80",
+    subAlt: "#42536b",
+    text: "#c1c7d7",
+    error: "#fc5727",
+    errorExtra: "#fc5727",
+    colorfulError: "#fc5727",
+    colorfulErrorExtra: "#fc5727",
   },
-  watermelon: {
-    bg: "#1f4437",
-    main: "#d6686f",
-    sub: "#3e7a65",
-    text: "#cdc6bc",
+  grape: {
+    bg: "#2c003e",
+    caret: "#ff8f00",
+    main: "#ff8f00",
+    sub: "#6e225e",
+    subAlt: "#1f002d",
+    text: "#fff",
+    error: "#ff4081",
+    errorExtra: "#bf2054",
+    colorfulError: "#ff4081",
+    colorfulErrorExtra: "#bf2054",
+    hasCss: true,
   },
-  menthol: {
-    bg: "#00c18c",
-    main: "#ffffff",
-    sub: "#186544",
-    text: "#ffffff",
+  gruvbox_dark: {
+    bg: "#282828",
+    caret: "#fabd2f",
+    main: "#d79921",
+    sub: "#665c54",
+    subAlt: "#212121",
+    text: "#ebdbb2",
+    error: "#fb4934",
+    errorExtra: "#cc241d",
+    colorfulError: "#cc241d",
+    colorfulErrorExtra: "#9d0006",
   },
-  ishtar: {
-    bg: "#202020",
-    main: "#91170c",
-    sub: "#847869",
-    text: "#fae1c3",
+  gruvbox_light: {
+    bg: "#fbf1c7",
+    caret: "#689d6a",
+    main: "#689d6a",
+    sub: "#a89984",
+    subAlt: "#daceae",
+    text: "#3c3836",
+    error: "#cc241d",
+    errorExtra: "#9d0006",
+    colorfulError: "#cc241d",
+    colorfulErrorExtra: "#9d0006",
   },
-  mashu: {
-    bg: "#2b2b2c",
-    main: "#76689a",
-    sub: "#d8a0a6",
-    text: "#f1e2e4",
+  hammerhead: {
+    bg: "#030613",
+    caret: "#4fcdb9",
+    main: "#4fcdb9",
+    sub: "#213c53",
+    subAlt: "#0a1928",
+    text: "#e2f1f5",
+    error: "#e32b2b",
+    errorExtra: "#a62626",
+    colorfulError: "#e32b2b",
+    colorfulErrorExtra: "#a62626",
   },
-  deku: {
-    bg: "#058b8c",
-    main: "#b63530",
-    sub: "#255458",
-    text: "#f7f2ea",
+  hanok: {
+    bg: "#d8d2c3",
+    caret: "#513a2a",
+    main: "#513a2a",
+    sub: "#8b6f5c",
+    subAlt: "#cdc0af",
+    text: "#393b3b",
+    error: "#ca4754",
+    errorExtra: "#7e2a33",
+    colorfulError: "#ca4754",
+    colorfulErrorExtra: "#7e2a33",
+  },
+  hedge: {
+    bg: "#415e31",
+    caret: "#f2efbb",
+    main: "#6a994e",
+    sub: "#ede5b4",
+    subAlt: "#38502a",
+    text: "#f7f1d6",
+    error: "#ca3d3f",
+    errorExtra: "#782832",
+    colorfulError: "#e76f51",
+    colorfulErrorExtra: "#f4a261",
   },
   honey: {
     bg: "#f2aa00",
+    caret: "#795200",
     main: "#fff546",
     sub: "#a66b00",
+    subAlt: "#e19e00",
     text: "#f3eecb",
+    error: "#df3333",
+    errorExtra: "#6d1f1f",
+    colorfulError: "#df3333",
+    colorfulErrorExtra: "#6d1f1f",
   },
-  shoko: {
-    bg: "#ced7e0",
-    main: "#81c4dd",
-    sub: "#7599b1",
-    text: "#3b4c58",
+  horizon: {
+    bg: "#1c1e26",
+    caret: "#bbbbbb",
+    main: "#c4a88a",
+    sub: "#db886f",
+    subAlt: "#17181f",
+    text: "#bbbbbb",
+    error: "#d55170",
+    errorExtra: "#ff3d3d",
+    colorfulError: "#d55170",
+    colorfulErrorExtra: "#d55170",
+    hasCss: true,
   },
-  norse: {
-    bg: "#242425",
-    main: "#2b5f6d",
-    sub: "#505b5e",
-    text: "#ccc2b1",
+  husqy: {
+    bg: "#000000",
+    caret: "#c58aff",
+    main: "#c58aff",
+    sub: "#972fff",
+    subAlt: "#1e001e",
+    text: "#ebd7ff",
+    error: "#da3333",
+    errorExtra: "#791717",
+    colorfulError: "#da3333",
+    colorfulErrorExtra: "#791717",
+    hasCss: true,
   },
-  matcha_moccha: {
-    bg: "#523525",
-    main: "#7ec160",
-    sub: "#9e6749",
-    text: "#ecddcc",
+  iceberg_dark: {
+    bg: "#161821",
+    caret: "#d2d4de",
+    main: "#84a0c6",
+    sub: "#595e76",
+    subAlt: "#232531",
+    text: "#c6c8d1",
+    error: "#e27878",
+    errorExtra: "#e2a478",
+    colorfulError: "#e27878",
+    colorfulErrorExtra: "#e2a478",
   },
-  cafe: {
-    bg: "#ceb18d",
-    main: "#14120f",
-    sub: "#d4d2d1",
-    text: "#14120f",
+  iceberg_light: {
+    bg: "#e8e9ec",
+    caret: "#262a3f",
+    main: "#2d539e",
+    sub: "#adb1c4",
+    subAlt: "#ccceda",
+    text: "#33374c",
+    error: "#cc517a",
+    errorExtra: "#cc3768",
+    colorfulError: "#cc517a",
+    colorfulErrorExtra: "#cc3768",
   },
-  alpine: {
-    bg: "#6c687f",
-    main: "#ffffff",
-    sub: "#9994b8",
-    text: "#ffffff",
+  incognito: {
+    bg: "#0e0e0e",
+    caret: "#ff9900",
+    main: "#ff9900",
+    sub: "#555555",
+    subAlt: "#151515",
+    text: "#c6c6c6",
+    error: "#e44545",
+    errorExtra: "#e44545",
+    colorfulError: "#b13535",
+    colorfulErrorExtra: "#b13535",
+    hasCss: true,
   },
-  superuser: {
-    bg: "#262a33",
-    main: "#43ffaf",
-    sub: "#526777",
-    text: "#e5f7ef",
+  ishtar: {
+    bg: "#202020",
+    caret: "#c58940",
+    main: "#91170c",
+    sub: "#847869",
+    subAlt: "#272727",
+    text: "#fae1c3",
+    error: "#bb1e10",
+    errorExtra: "#791717",
+    colorfulError: "#c5da33",
+    colorfulErrorExtra: "#849224",
+    hasCss: true,
   },
-  ms_cupcakes: {
-    bg: "#ffffff",
-    main: "#5ed5f3",
-    sub: "#d64090",
-    text: "#0a282f",
+  iv_clover: {
+    bg: "#a0a0a0",
+    caret: "#8d8d8d",
+    main: "#573e40",
+    sub: "#353535",
+    subAlt: "#bebebe",
+    text: "#3b2d3b",
+    error: "#937173",
+    errorExtra: "#987678",
+    colorfulError: "#ad8d60",
+    colorfulErrorExtra: "#b7976a",
   },
-  dollar: {
-    bg: "#e4e4d4",
-    main: "#6b886b",
-    sub: "#8a9b69",
-    text: "#555a56",
+  iv_spade: {
+    bg: "#0c0c0c",
+    caret: "#bebebe",
+    main: "#b7976a",
+    sub: "#404040",
+    subAlt: "#121212",
+    text: "#d3c2c3",
+    error: "#9d7b7d",
+    errorExtra: "#a78587",
+    colorfulError: "#b7976a",
+    colorfulErrorExtra: "#c1a174",
   },
-  lime: {
-    bg: "#7c878e",
-    main: "#93c247",
-    sub: "#4b5257",
-    text: "#bfcfdc",
+  joker: {
+    bg: "#1a0e25",
+    caret: "#99de1e",
+    main: "#99de1e",
+    sub: "#7554a3",
+    subAlt: "#14081f",
+    text: "#e9e2f5",
+    error: "#e32b2b",
+    errorExtra: "#a62626",
+    colorfulError: "#e32b2b",
+    colorfulErrorExtra: "#a62626",
   },
-  sweden: {
-    bg: "#0058a3",
-    main: "#ffcc02",
-    sub: "#57abdb",
-    text: "#ffffff",
+  laser: {
+    bg: "#221b44",
+    caret: "#009eaf",
+    main: "#009eaf",
+    sub: "#b82356",
+    subAlt: "#1e173b",
+    text: "#dbe7e8",
+    error: "#a8d400",
+    errorExtra: "#668000",
+    colorfulError: "#a8d400",
+    colorfulErrorExtra: "#668000",
   },
-  wavez: {
-    bg: "#1c292f",
-    main: "#6bde3b",
-    sub: "#1f5e6b",
-    text: "#e9efe6",
+  lavender: {
+    bg: "#ada6c2",
+    caret: "#e4e3e9",
+    main: "#e4e3e9",
+    sub: "#e4e3e9",
+    subAlt: "#a19bb9",
+    text: "#2f2a41",
+    error: "#ca4754",
+    errorExtra: "#7e2a33",
+    colorfulError: "#ca4754",
+    colorfulErrorExtra: "#7e2a33",
+    hasCss: true,
   },
-  nebula: {
-    bg: "#212135",
-    main: "#be3c88",
-    sub: "#19b3b8",
-    text: "#838686",
+  leather: {
+    bg: "#a86948",
+    caret: "#ef6d49",
+    main: "#ffe4bc",
+    sub: "#81482b",
+    subAlt: "#9a5f3f",
+    text: "#ffe4bc",
+    error: "#ca4754",
+    errorExtra: "#7e2a33",
+    colorfulError: "#ca4754",
+    colorfulErrorExtra: "#7e2a33",
   },
   lil_dragon: {
     bg: "#ebe1ef",
+    caret: "#212b43",
     main: "#8a5bd6",
     sub: "#a28db8",
+    subAlt: "#dac7e2",
     text: "#212b43",
+    error: "#f794ca",
+    errorExtra: "#f279c2",
+    colorfulError: "#f794ca",
+    colorfulErrorExtra: "#f279c2",
+    hasCss: true,
   },
-  pastel: {
-    bg: "#e0b2bd",
-    main: "#fbf4b6",
-    sub: "#b4e9ff",
-    text: "#6d5c6f",
+  lilac_mist: {
+    bg: "#fffbfe",
+    caret: "#e099d6",
+    main: "#b94189",
+    sub: "#e094c2",
+    subAlt: "#ecdcee",
+    text: "#5c2954",
+    error: "#ff6f69",
+    errorExtra: "#ff6f69",
+    colorfulError: "#bc7fc0",
+    colorfulErrorExtra: "#bc41b1",
   },
-  alduin: {
-    bg: "#1c1c1c",
-    main: "#dfd7af",
-    sub: "#444444",
-    text: "#f5f3ed",
+  lime: {
+    bg: "#7c878e",
+    caret: "#93c247",
+    main: "#93c247",
+    sub: "#4b5257",
+    subAlt: "#737d82",
+    text: "#bfcfdc",
+    error: "#ea4221",
+    errorExtra: "#7e2a33",
+    colorfulError: "#ea4221",
+    colorfulErrorExtra: "#7e2a33",
   },
-  paper: {
-    bg: "#eeeeee",
-    main: "#444444",
-    sub: "#b2b2b2",
-    text: "#444444",
+  luna: {
+    bg: "#221c35",
+    caret: "#f67599",
+    main: "#f67599",
+    sub: "#5a3a7e",
+    subAlt: "#2f2346",
+    text: "#ffe3eb",
+    error: "#efc050",
+    errorExtra: "#c5972c",
+    colorfulError: "#efc050",
+    colorfulErrorExtra: "#c5972c",
   },
-  fundamentals: {
-    bg: "#727474",
-    main: "#7fa482",
-    sub: "#cac4be",
-    text: "#131313",
+  macroblank: {
+    bg: "#b2d2c8",
+    caret: "#766f71",
+    main: "#c13117",
+    sub: "#717977",
+    subAlt: "#c6ddd3",
+    text: "#490909",
+    error: "#c13117",
+    errorExtra: "#fff5f5",
+    colorfulError: "#fff5f5",
+    colorfulErrorExtra: "#ffe9c2",
   },
-  drowning: {
-    bg: "#191826",
-    main: "#4a6fb5",
-    sub: "#50688c",
-    text: "#9393a7",
+  magic_girl: {
+    bg: "#ffffff",
+    caret: "#e45c96",
+    main: "#f5b1cc",
+    sub: "#93e8d3",
+    subAlt: "#f2f2f2",
+    text: "#00ac8c",
+    error: "#ffe495",
+    errorExtra: "#e45c96",
+    colorfulError: "#ffe485",
+    colorfulErrorExtra: "#e45c96",
   },
-  iceberg_dark: {
-    bg: "#161821",
-    main: "#84a0c6",
-    sub: "#595e76",
-    text: "#c6c8d1",
+  mashu: {
+    bg: "#2b2b2c",
+    caret: "#76689a",
+    main: "#76689a",
+    sub: "#d8a0a6",
+    subAlt: "#27242c",
+    text: "#f1e2e4",
+    error: "#d44729",
+    errorExtra: "#8f2f19",
+    colorfulError: "#d44729",
+    colorfulErrorExtra: "#8f2f19",
   },
-  iceberg_light: {
-    bg: "#e8e9ec",
-    main: "#2d539e",
-    sub: "#adb1c4",
-    text: "#33374c",
+  matcha_moccha: {
+    bg: "#523525",
+    caret: "#7ec160",
+    main: "#7ec160",
+    sub: "#9e6749",
+    subAlt: "#422b1e",
+    text: "#ecddcc",
+    error: "#fb4934",
+    errorExtra: "#cc241d",
+    colorfulError: "#fb4934",
+    colorfulErrorExtra: "#cc241d",
   },
-  onedark: {
-    bg: "#2f343f",
-    main: "#61afef",
-    sub: "#eceff4",
-    text: "#98c379",
+  material: {
+    bg: "#263238",
+    caret: "#80cbc4",
+    main: "#80cbc4",
+    sub: "#4c6772",
+    subAlt: "#2e3c43",
+    text: "#e6edf3",
+    error: "#fb4934",
+    errorExtra: "#cc241d",
+    colorfulError: "#fb4934",
+    colorfulErrorExtra: "#cc241d",
   },
-  darling: {
-    bg: "#fec8cd",
+  matrix: {
+    bg: "#000000",
+    caret: "#15ff00",
+    main: "#15ff00",
+    sub: "#006500",
+    subAlt: "#032000",
+    text: "#d1ffcd",
+    error: "#da3333",
+    errorExtra: "#791717",
+    colorfulError: "#da3333",
+    colorfulErrorExtra: "#791717",
+    hasCss: true,
+  },
+  menthol: {
+    bg: "#00c18c",
+    caret: "#99fdd8",
     main: "#ffffff",
-    caret: "#ffffff",
-    sub: "#a30000",
-    subAlt: "#f2babd",
+    sub: "#186544",
+    subAlt: "#17ae7d",
     text: "#ffffff",
-    error: "#2e7dde",
-    errorExtra: "#2e7dde",
-    colorfulError: "#2e7dde",
-    colorfulErrorExtra: "#2e7dde",
+    error: "#e03c3c",
+    errorExtra: "#b12525",
+    colorfulError: "#e03c3c",
+    colorfulErrorExtra: "#b12525",
   },
-  repose_dark: {
-    bg: "#2f3338",
-    main: "#d6d2bc",
-    sub: "#8f8e84",
-    text: "#d6d2bc",
+  metaverse: {
+    bg: "#232323",
+    caret: "#d82934",
+    main: "#d82934",
+    sub: "#5e5e5e",
+    subAlt: "#1d1d1d",
+    text: "#e8e8e8",
+    error: "#da3333",
+    errorExtra: "#791717",
+    colorfulError: "#d7da33",
+    colorfulErrorExtra: "#737917",
   },
-  repose_light: {
-    bg: "#efead0",
-    main: "#5f605e",
-    sub: "#8f8e84",
-    text: "#333538",
+  metropolis: {
+    bg: "#0f1f2c",
+    caret: "#56c3b7",
+    main: "#56c3b7",
+    sub: "#326984",
+    subAlt: "#0b1822",
+    text: "#e4edf1",
+    error: "#d44729",
+    errorExtra: "#8f2f19",
+    colorfulError: "#d44729",
+    colorfulErrorExtra: "#8f2f19",
+    hasCss: true,
   },
-  horizon: {
-    bg: "#1c1e26",
-    main: "#c4a88a",
-    sub: "#db886f",
-    text: "#bbbbbb",
+  mexican: {
+    bg: "#f8ad34",
+    caret: "#eee",
+    main: "#b12189",
+    sub: "#333",
+    subAlt: "#f9b951",
+    text: "#eee",
+    error: "#da3333",
+    errorExtra: "#791717",
+    colorfulError: "#da3333",
+    colorfulErrorExtra: "#791717",
   },
-  rudy: {
-    bg: "#1a2b3e",
-    main: "#af8f5c",
-    sub: "#3a506c",
-    text: "#c9c8bf",
+  miami: {
+    bg: "#f35588",
+    caret: "#a3f7bf",
+    main: "#05dfd7",
+    sub: "#94294c",
+    subAlt: "#db4979",
+    text: "#f0e9ec",
+    error: "#fff591",
+    errorExtra: "#b9b269",
+    colorfulError: "#fff591",
+    colorfulErrorExtra: "#b9b269",
   },
-  stealth: {
-    bg: "#010203",
-    main: "#383e42",
-    sub: "#5e676e",
-    text: "#383e42",
+  miami_nights: {
+    bg: "#18181a",
+    caret: "#e4609b",
+    main: "#e4609b",
+    sub: "#47bac0",
+    subAlt: "#0f0f10",
+    text: "#fff",
+    error: "#fff591",
+    errorExtra: "#b6af68",
+    colorfulError: "#fff591",
+    colorfulErrorExtra: "#b6af68",
   },
-  "80s_after_dark": {
-    bg: "#1b1d36",
-    main: "#fca6d1",
-    sub: "#99d6ea",
-    text: "#e1e7ec",
+  midnight: {
+    bg: "#0b0e13",
+    caret: "#60759f",
+    main: "#60759f",
+    sub: "#394760",
+    subAlt: "#141a24",
+    text: "#9fadc6",
+    error: "#c27070",
+    errorExtra: "#c28b70",
+    colorfulError: "#c27070",
+    colorfulErrorExtra: "#c28b70",
   },
-  arch: {
-    bg: "#0c0d11",
-    main: "#7ebab5",
-    sub: "#454864",
-    text: "#f6f5f5",
+  milkshake: {
+    bg: "#ffffff",
+    caret: "#212b43",
+    main: "#212b43",
+    sub: "#62cfe6",
+    subAlt: "#ddeff3",
+    text: "#212b43",
+    error: "#f19dac",
+    errorExtra: "#e58c9d",
+    colorfulError: "#f19dac",
+    colorfulErrorExtra: "#e58c9d",
+    hasCss: true,
   },
-  rose_pine: {
-    bg: "#1f1d27",
-    main: "#9ccfd8",
-    sub: "#c4a7e7",
-    text: "#e0def4",
+  mint: {
+    bg: "#05385b",
+    caret: "#5cdb95",
+    main: "#5cdb95",
+    sub: "#20688a",
+    subAlt: "#07324e",
+    text: "#edf5e1",
+    error: "#f35588",
+    errorExtra: "#a3385a",
+    colorfulError: "#f35588",
+    colorfulErrorExtra: "#a3385a",
   },
-  rose_pine_moon: {
-    bg: "#2a273f",
-    main: "#9ccfd8",
-    sub: "#c4a7e7",
-    text: "#e0def4",
+  mizu: {
+    bg: "#afcbdd",
+    caret: "#fcfbf6",
+    main: "#fcfbf6",
+    sub: "#85a5bb",
+    subAlt: "#9fc1d4",
+    text: "#1a2633",
+    error: "#bf616a",
+    errorExtra: "#793e44",
+    colorfulError: "#bf616a",
+    colorfulErrorExtra: "#793e44",
+  },
+  modern_dolch: {
+    bg: "#2d2e30",
+    caret: "#7eddd3",
+    main: "#7eddd3",
+    sub: "#54585c",
+    subAlt: "#242527",
+    text: "#e3e6eb",
+    error: "#d36a7b",
+    errorExtra: "#994154",
+    colorfulError: "#d36a7b",
+    colorfulErrorExtra: "#994154",
+  },
+  modern_dolch_light: {
+    bg: "#dbdbdb",
+    caret: "#8fd1c3",
+    main: "#8fd1c3",
+    sub: "#a3a2a2",
+    subAlt: "#e8e8e8",
+    text: "#454545",
+    error: "#ea8a9a",
+    errorExtra: "#e0556d",
+    colorfulError: "#ea8a9a",
+    colorfulErrorExtra: "#e0556d",
+  },
+  modern_ink: {
+    bg: "#ffffff",
+    caret: "#ff0000",
+    main: "#ff360d",
+    sub: "#b7b7b7",
+    subAlt: "#ececec",
+    text: "#000000",
+    error: "#d70000",
+    errorExtra: "#b00000",
+    colorfulError: "#000000",
+    colorfulErrorExtra: "#000000",
+    hasCss: true,
+  },
+  monokai: {
+    bg: "#272822",
+    caret: "#66d9ef",
+    main: "#a6e22e",
+    sub: "#e6db74",
+    subAlt: "#1f201b",
+    text: "#e2e2dc",
+    error: "#f92672",
+    errorExtra: "#fd971f",
+    colorfulError: "#f92672",
+    colorfulErrorExtra: "#fd971f",
+  },
+  moonlight: {
+    bg: "#191f28",
+    caret: "#8f744b",
+    main: "#c69f68",
+    sub: "#4b5975",
+    subAlt: "#141a22",
+    text: "#ccccb5",
+    error: "#b81b2c",
+    errorExtra: "#84131f",
+    colorfulError: "#b81b2c",
+    colorfulErrorExtra: "#84131f",
+    hasCss: true,
+  },
+  mountain: {
+    bg: "#0f0f0f",
+    caret: "#f5f5f5",
+    main: "#e7e7e7",
+    sub: "#4c4c4c",
+    subAlt: "#1a1a1a",
+    text: "#e7e7e7",
+    error: "#ac8c8c",
+    errorExtra: "#c49ea0",
+    colorfulError: "#aca98a",
+    colorfulErrorExtra: "#c4c19e",
+  },
+  mr_sleeves: {
+    bg: "#d1d7da",
+    caret: "#8fadc9",
+    main: "#daa99b",
+    sub: "#9a9fa1",
+    subAlt: "#bfcbd1",
+    text: "#1d1d1d",
+    error: "#bf6464",
+    errorExtra: "#793e44",
+    colorfulError: "#8fadc9",
+    colorfulErrorExtra: "#667c91",
+    hasCss: true,
+  },
+  ms_cupcakes: {
+    bg: "#ffffff",
+    caret: "#303030",
+    main: "#5ed5f3",
+    sub: "#d64090",
+    subAlt: "#edf8fa",
+    text: "#0a282f",
+    error: "#a4dd32",
+    errorExtra: "#90bd34",
+    colorfulError: "#a4dd32",
+    colorfulErrorExtra: "#87b330",
+  },
+  muted: {
+    bg: "#525252",
+    caret: "#b1e4e3",
+    main: "#c5b4e3",
+    sub: "#939eae",
+    subAlt: "#494949",
+    text: "#b1e4e3",
+    error: "#edc1cd",
+    errorExtra: "#edc1cd",
+    colorfulError: "#edc1cd",
+    colorfulErrorExtra: "#edc1cd",
+  },
+  nautilus: {
+    bg: "#132237",
+    caret: "#ebb723",
+    main: "#ebb723",
+    sub: "#0b4c6c",
+    subAlt: "#0e1a29",
+    text: "#1cbaac",
+    error: "#da3333",
+    errorExtra: "#791717",
+    colorfulError: "#da3333",
+    colorfulErrorExtra: "#791717",
   },
-  rose_pine_dawn: {
-    bg: "#fffaf3",
-    main: "#56949f",
-    sub: "#c4a7e7",
-    text: "#286983",
+  nebula: {
+    bg: "#212135",
+    caret: "#78c729",
+    main: "#be3c88",
+    sub: "#19b3b8",
+    subAlt: "#191928",
+    text: "#838686",
+    error: "#ca4754",
+    errorExtra: "#7e2a33",
+    colorfulError: "#ca4754",
+    colorfulErrorExtra: "#7e2a33",
   },
-  copper: {
-    bg: "#442f29",
-    main: "#b46a55",
-    sub: "#7ebab5",
-    text: "#e7e0de",
+  night_runner: {
+    bg: "#212121",
+    caret: "#feff04",
+    main: "#feff04",
+    sub: "#5c4a9c",
+    subAlt: "#1a1a1a",
+    text: "#e8e8e8",
+    error: "#da3333",
+    errorExtra: "#791717",
+    colorfulError: "#da3333",
+    colorfulErrorExtra: "#791717",
   },
-  grand_prix: {
-    bg: "#36475c",
-    main: "#c0d036",
-    sub: "#5c6c80",
-    text: "#c1c7d7",
+  nord: {
+    bg: "#242933",
+    caret: "#eceff4",
+    main: "#88c0d0",
+    sub: "#929aaa",
+    subAlt: "#2e3440",
+    text: "#d8dee9",
+    error: "#bf616a",
+    errorExtra: "#793e44",
+    colorfulError: "#bf616a",
+    colorfulErrorExtra: "#793e44",
   },
-  peaches: {
-    bg: "#e0d7c1",
-    main: "#dd7a5f",
-    sub: "#e7b28e",
-    text: "#5f4c41",
+  nord_light: {
+    bg: "#eceff4",
+    caret: "#8fbcbb",
+    main: "#8fbcbb",
+    sub: "#6a7791",
+    subAlt: "#d8dee9",
+    text: "#8fbcbb",
+    error: "#bf616a",
+    errorExtra: "#793e44",
+    colorfulError: "#bf616a",
+    colorfulErrorExtra: "#793e44",
   },
-  bouquet: {
-    bg: "#173f35",
-    main: "#eaa09c",
-    sub: "#408e7b",
-    text: "#e9e0d2",
+  norse: {
+    bg: "#242425",
+    caret: "#2b5f6d",
+    main: "#2b5f6d",
+    sub: "#505b5e",
+    subAlt: "#303333",
+    text: "#ccc2b1",
+    error: "#7e2a2a",
+    errorExtra: "#771d1d",
+    colorfulError: "#ca4754",
+    colorfulErrorExtra: "#7e2a33",
   },
-  midnight: {
-    bg: "#0b0e13",
-    main: "#60759f",
-    sub: "#394760",
-    text: "#9fadc6",
+  oblivion: {
+    bg: "#313231",
+    caret: "#a5a096",
+    main: "#a5a096",
+    sub: "#5d6263",
+    subAlt: "#3a3b3b",
+    text: "#f7f5f1",
+    error: "#dd452e",
+    errorExtra: "#9e3423",
+    colorfulError: "#dd452e",
+    colorfulErrorExtra: "#9e3423",
+    hasCss: true,
   },
-  blueberry_light: {
-    bg: "#dae0f5",
-    main: "#506477",
-    sub: "#92a4be",
-    text: "#678198",
+  olive: {
+    bg: "#e9e5cc",
+    caret: "#92946f",
+    main: "#92946f",
+    sub: "#b7b39e",
+    subAlt: "#d4cfbc",
+    text: "#373731",
+    error: "#cf2f2f",
+    errorExtra: "#a22929",
+    colorfulError: "#cf2f2f",
+    colorfulErrorExtra: "#a22929",
   },
-  blueberry_dark: {
-    bg: "#212b42",
-    main: "#add7ff",
-    sub: "#5c7da5",
-    text: "#91b4d5",
+  olivia: {
+    bg: "#1c1b1d",
+    caret: "#deaf9d",
+    main: "#deaf9d",
+    sub: "#4e3e3e",
+    subAlt: "#262223",
+    text: "#f2efed",
+    error: "#bf616a",
+    errorExtra: "#793e44",
+    colorfulError: "#e03d4e",
+    colorfulErrorExtra: "#aa2f3b",
   },
-  fledgling: {
-    bg: "#3b363f",
-    main: "#fc6e83",
-    sub: "#8e5568",
-    text: "#e6d5d3",
+  onedark: {
+    bg: "#2f343f",
+    caret: "#61afef",
+    main: "#61afef",
+    sub: "#eceff4",
+    subAlt: "#262b34",
+    text: "#98c379",
+    error: "#e06c75",
+    errorExtra: "#d62436",
+    colorfulError: "#d62436",
+    colorfulErrorExtra: "#ff0019",
   },
-  ez_mode: {
-    bg: "#0068c6",
-    main: "#fa62d5",
-    sub: "#138bf7",
+  our_theme: {
+    bg: "#ce1226",
+    caret: "#fcd116",
+    main: "#fcd116",
+    sub: "#6d0f19",
+    subAlt: "#9f1020",
     text: "#ffffff",
+    error: "#fcd116",
+    errorExtra: "#fcd116",
+    colorfulError: "#1672fc",
+    colorfulErrorExtra: "#1672fc",
   },
-  vscode: {
-    bg: "#1e1e1e",
-    main: "#007acc",
-    sub: "#4d4d4d",
-    text: "#d4d4d4",
+  pale_nimbus: {
+    bg: "#433e4c",
+    caret: "#9efffd",
+    main: "#94ffc2",
+    sub: "#ffaca3",
+    subAlt: "#694f5e",
+    text: "#feffdb",
+    error: "#ff5c5c",
+    errorExtra: "#ff0000",
+    colorfulError: "#ff3874",
+    colorfulErrorExtra: "#c2386f",
   },
-  material: {
-    bg: "#263238",
-    main: "#80cbc4",
-    sub: "#4c6772",
-    text: "#e6edf3",
+  paper: {
+    bg: "#eeeeee",
+    caret: "#444444",
+    main: "#444444",
+    sub: "#b2b2b2",
+    subAlt: "#dddddd",
+    text: "#444444",
+    error: "#d70000",
+    errorExtra: "#d70000",
+    colorfulError: "#d70000",
+    colorfulErrorExtra: "#d70000",
   },
-  godspeed: {
-    bg: "#eae4cf",
-    main: "#9abbcd",
-    sub: "#ada998",
-    text: "#646669",
+  passion_fruit: {
+    bg: "#7c2142",
+    caret: "#ffffff",
+    main: "#f4a3b4",
+    sub: "#9994b8",
+    subAlt: "#833c5e",
+    text: "#ffffff",
+    error: "#deb80b",
+    errorExtra: "#deb80b",
+    colorfulError: "#deb80b",
+    colorfulErrorExtra: "#deb80b",
   },
-  witch_girl: {
-    bg: "#f3dbda",
-    main: "#56786a",
-    sub: "#ddb4a7",
-    text: "#56786a",
+  pastel: {
+    bg: "#e0b2bd",
+    caret: "#fbf4b6",
+    main: "#fbf4b6",
+    sub: "#b4e9ff",
+    subAlt: "#d29fab",
+    text: "#6d5c6f",
+    error: "#ff6961",
+    errorExtra: "#c23b22",
+    colorfulError: "#ff6961",
+    colorfulErrorExtra: "#c23b22",
   },
-  terror_below: {
-    bg: "#0b1e1a",
-    main: "#66ac92",
-    sub: "#015c53",
-    text: "#dceae5",
+  peach_blossom: {
+    bg: "#292929",
+    caret: "#616161",
+    main: "#99b898",
+    sub: "#616161",
+    subAlt: "#2a363b",
+    text: "#fecea8",
+    error: "#ff6961",
+    errorExtra: "#e84a5f",
+    colorfulError: "#ff6961",
+    colorfulErrorExtra: "#e84a5f",
   },
-  sewing_tin: {
-    bg: "#241963",
-    main: "#f2ce83",
-    sub: "#446ad5",
-    text: "#ffffff",
+  peaches: {
+    bg: "#e0d7c1",
+    caret: "#dd7a5f",
+    main: "#dd7a5f",
+    sub: "#e7b28e",
+    subAlt: "#e2caaf",
+    text: "#5f4c41",
+    error: "#ff6961",
+    errorExtra: "#c23b22",
+    colorfulError: "#ff6961",
+    colorfulErrorExtra: "#c23b22",
   },
-  soaring_skies: {
-    bg: "#fff9f2",
-    main: "#55c6f0",
-    sub: "#1e107a",
-    text: "#1d1e1e",
+  phantom: {
+    bg: "#001",
+    caret: "#bb9af7",
+    main: "#7aa2f7",
+    sub: "#414868",
+    subAlt: "#24283b",
+    text: "#c0caf5",
+    error: "#f7768e",
+    errorExtra: "#db4b4b",
+    colorfulError: "#ff7a93",
+    colorfulErrorExtra: "#ff9e64",
+    hasCss: true,
   },
-  sewing_tin_light: {
-    bg: "#ffffff",
-    main: "#2d2076",
-    sub: "#385eca",
-    text: "#2d2076",
+  pink_lemonade: {
+    bg: "#f6d992",
+    caret: "#fcfcf8",
+    main: "#f6a192",
+    sub: "#f6b092",
+    subAlt: "#f6cc93",
+    text: "#fcfcf8",
+    error: "#ff6f69",
+    errorExtra: "#ff6f69",
+    colorfulError: "#ff6f69",
+    colorfulErrorExtra: "#ff6f69",
   },
-  chaos_theory: {
-    bg: "#141221",
-    main: "#fd77d7",
-    sub: "#676e8a",
-    text: "#dde5ed",
+  pulse: {
+    bg: "#181818",
+    caret: "#17b8bd",
+    main: "#17b8bd",
+    sub: "#53565a",
+    subAlt: "#121212",
+    text: "#e5f4f4",
+    error: "#da3333",
+    errorExtra: "#791717",
+    colorfulError: "#da3333",
+    colorfulErrorExtra: "#791717",
   },
-  hanok: {
-    bg: "#d8d2c3",
-    main: "#513a2a",
-    sub: "#8b6f5c",
-    text: "#393b3b",
+  purpleish: {
+    bg: "#1e1e32",
+    caret: "#7a52cc",
+    main: "#7a52cc",
+    sub: "#5c5c99",
+    subAlt: "#181829",
+    text: "#a3a3cc",
+    error: "#ff6666",
+    errorExtra: "#ff6666",
+    colorfulError: "#ff6666",
+    colorfulErrorExtra: "#ff6666",
   },
-  comfy: {
-    bg: "#4a5b6e",
-    main: "#f8cdc6",
-    sub: "#9ec1cc",
-    text: "#f5efee",
+  rainbow_trail: {
+    bg: "#f5f5f5",
+    caret: "#0d0d0d",
+    main: "#363636",
+    sub: "#4f4f4f",
+    subAlt: "#e0e0e0",
+    text: "#1f1f1f",
+    error: "#ff0008",
+    errorExtra: "#ff0008",
+    colorfulError: "#ff0008",
+    colorfulErrorExtra: "#ff0008",
+    hasCss: true,
   },
-  tiramisu: {
-    bg: "#cfc6b9",
-    main: "#c0976f",
-    sub: "#c0976f",
-    text: "#7d5448",
+  red_dragon: {
+    bg: "#1a0b0c",
+    caret: "#ff3a32",
+    main: "#ff3a32",
+    sub: "#e2a528",
+    subAlt: "#0e0506",
+    text: "#4a4d4e",
+    error: "#771b1f",
+    errorExtra: "#591317",
+    colorfulError: "#771b1f",
+    colorfulErrorExtra: "#591317",
   },
-  diner: {
-    bg: "#537997",
-    main: "#c3af5b",
-    sub: "#445c7f",
-    text: "#dfdbc8",
+  red_samurai: {
+    bg: "#84202c",
+    caret: "#c79e6e",
+    main: "#c79e6e",
+    sub: "#55131b",
+    subAlt: "#751d26",
+    text: "#e2dad0",
+    error: "#33bbda",
+    errorExtra: "#176b79",
+    colorfulError: "#33bbda",
+    colorfulErrorExtra: "#176779",
   },
-  modern_ink: {
-    bg: "#ffffff",
-    main: "#ff360d",
-    sub: "#b7b7b7",
-    text: "#000000",
+  repose_dark: {
+    bg: "#2f3338",
+    caret: "#d6d2bc",
+    main: "#d6d2bc",
+    sub: "#8f8e84",
+    subAlt: "#3a3c3d",
+    text: "#d6d2bc",
+    error: "#ff4a59",
+    errorExtra: "#c43c53",
+    colorfulError: "#ff4a59",
+    colorfulErrorExtra: "#c43c53",
+  },
+  repose_light: {
+    bg: "#efead0",
+    caret: "#5f605e",
+    main: "#5f605e",
+    sub: "#8f8e84",
+    subAlt: "#dbd6c4",
+    text: "#333538",
+    error: "#c43c53",
+    errorExtra: "#a52632",
+    colorfulError: "#c43c53",
+    colorfulErrorExtra: "#a52632",
   },
-  dev: {
-    bg: "#1b2028",
-    main: "#23a9d5",
-    sub: "#4b5975",
-    text: "#ccccb5",
+  retro: {
+    bg: "#dad3c1",
+    caret: "#1d1b17",
+    main: "#1d1b17",
+    sub: "#918b7d",
+    subAlt: "#c8c3b3",
+    text: "#1d1b17",
+    error: "#bf616a",
+    errorExtra: "#793e44",
+    colorfulError: "#bf616a",
+    colorfulErrorExtra: "#793e44",
   },
-  moonlight: {
-    bg: "#191f28",
-    main: "#c69f68",
-    sub: "#4b5975",
-    text: "#ccccb5",
+  retrocast: {
+    bg: "#07737a",
+    caret: "#88dbdf",
+    main: "#88dbdf",
+    sub: "#f3e03b",
+    subAlt: "#26858b",
+    text: "#ffffff",
+    error: "#ff585d",
+    errorExtra: "#c04455",
+    colorfulError: "#ff585d",
+    colorfulErrorExtra: "#c04455",
+    hasCss: true,
   },
-  pink_lemonade: {
-    bg: "#f6d992",
-    main: "#f6a192",
-    sub: "#f6b092",
-    text: "#fcfcf8",
+  rgb: {
+    bg: "#111",
+    caret: "#eee",
+    main: "#eee",
+    sub: "#444",
+    subAlt: "#1a1a1a",
+    text: "#eee",
+    error: "#eee",
+    errorExtra: "#b3b3b3",
+    colorfulError: "#eee",
+    colorfulErrorExtra: "#b3b3b3",
+    hasCss: true,
   },
-  creamsicle: {
-    bg: "#ff9869",
-    main: "#fcfcf8",
-    sub: "#ff661f",
-    text: "#fcfcf8",
+  rose_pine: {
+    bg: "#1f1d27",
+    caret: "#f6c177",
+    main: "#9ccfd8",
+    sub: "#c4a7e7",
+    subAlt: "#282533",
+    text: "#e0def4",
+    error: "#eb6f92",
+    errorExtra: "#ebbcba",
+    colorfulError: "#eb6f92",
+    colorfulErrorExtra: "#ebbcba",
   },
-  beach: {
-    bg: "#ffeead",
-    main: "#96ceb4",
-    sub: "#ffcc5c",
-    text: "#5b7869",
+  rose_pine_dawn: {
+    bg: "#fffaf3",
+    caret: "#ea9d34",
+    main: "#56949f",
+    sub: "#c4a7e7",
+    subAlt: "#f0e9df",
+    text: "#286983",
+    error: "#b4637a",
+    errorExtra: "#d7827e",
+    colorfulError: "#b4637a",
+    colorfulErrorExtra: "#d7827e",
   },
-  desert_oasis: {
-    bg: "#fff2d5",
-    main: "#d19d01",
-    sub: "#0061fe",
-    text: "#332800",
+  rose_pine_moon: {
+    bg: "#2a273f",
+    caret: "#f6c177",
+    main: "#9ccfd8",
+    sub: "#c4a7e7",
+    subAlt: "#211f32",
+    text: "#e0def4",
+    error: "#eb6f92",
+    errorExtra: "#ebbcba",
+    colorfulError: "#eb6f92",
+    colorfulErrorExtra: "#ebbcba",
   },
-  frozen_llama: {
-    bg: "#9bf2ea",
-    main: "#6d44a6",
-    sub: "#b690fd",
-    text: "#ffffff",
+  rudy: {
+    bg: "#1a2b3e",
+    caret: "#af8f5c",
+    main: "#af8f5c",
+    sub: "#3a506c",
+    subAlt: "#152231",
+    text: "#c9c8bf",
+    error: "#bf616a",
+    errorExtra: "#793e44",
+    colorfulError: "#bf616a",
+    colorfulErrorExtra: "#793e44",
   },
   ryujinscales: {
     bg: "#081426",
+    caret: "#ef6d49",
     main: "#f17754",
     sub: "#ffbc90",
+    subAlt: "#040e1d",
     text: "#ffe4bc",
+    error: "#ca4754",
+    errorExtra: "#7e2a33",
+    colorfulError: "#ca4754",
+    colorfulErrorExtra: "#7e2a33",
+    hasCss: true,
   },
-  trackday: {
-    bg: "#464d66",
-    main: "#e0513e",
-    sub: "#5c7eb9",
-    text: "#cfcfcf",
-  },
-  fruit_chew: {
-    bg: "#d6d3d6",
-    main: "#5c1e5f",
-    sub: "#b49cb5",
-    text: "#282528",
-  },
-  evil_eye: {
-    bg: "#0084c2",
-    main: "#f7f2ea",
-    sub: "#01589f",
-    text: "#171718",
+  serika: {
+    bg: "#e1e1e3",
+    caret: "#e2b714",
+    main: "#e2b714",
+    sub: "#aaaeb3",
+    subAlt: "#d1d3d8",
+    text: "#323437",
+    error: "#da3333",
+    errorExtra: "#791717",
+    colorfulError: "#da3333",
+    colorfulErrorExtra: "#791717",
   },
-  trance: {
-    bg: "#00021b",
-    main: "#e51376",
-    sub: "#3c4c79",
-    text: "#fff",
+  serika_dark: {
+    bg: "#323437",
+    caret: "#e2b714",
+    main: "#e2b714",
+    sub: "#646669",
+    subAlt: "#2c2e31",
+    text: "#d1d0c5",
+    error: "#ca4754",
+    errorExtra: "#7e2a33",
+    colorfulError: "#ca4754",
+    colorfulErrorExtra: "#7e2a33",
   },
-  fire: {
-    bg: "#0f0000",
-    main: "#b31313",
-    sub: "#683434",
+  sewing_tin: {
+    bg: "#241963",
+    caret: "#fbdb8c",
+    main: "#f2ce83",
+    sub: "#446ad5",
+    subAlt: "#2a277a",
     text: "#ffffff",
+    error: "#c6915e",
+    errorExtra: "#c6915e",
+    colorfulError: "#c6915e",
+    colorfulErrorExtra: "#c6915e",
+    hasCss: true,
   },
-  aurora: {
-    bg: "#011926",
-    main: "#00e980",
-    sub: "#245c69",
-    text: "#fff",
-  },
-  leather: {
-    bg: "#a86948",
-    main: "#ffe4bc",
-    sub: "#81482b",
-    text: "#ffe4bc",
+  sewing_tin_light: {
+    bg: "#ffffff",
+    caret: "#fbdb8c",
+    main: "#2d2076",
+    sub: "#385eca",
+    subAlt: "#c8cedf",
+    text: "#2d2076",
+    error: "#f2ce83",
+    errorExtra: "#f2ce83",
+    colorfulError: "#f2ce83",
+    colorfulErrorExtra: "#f2ce83",
+    hasCss: true,
   },
-  fleuriste: {
-    bg: "#c6b294",
-    main: "#405a52",
-    sub: "#64374d",
-    text: "#091914",
+  shadow: {
+    bg: "#000",
+    caret: "#eee",
+    main: "#eee",
+    sub: "#444",
+    subAlt: "#171717",
+    text: "#eee",
+    error: "#fff",
+    errorExtra: "#d8d8d8",
+    colorfulError: "#fff",
+    colorfulErrorExtra: "#d8d8d8",
+    hasCss: true,
   },
-  dmg: {
-    bg: "#dadbdc",
-    main: "#ae185e",
-    sub: "#3846b1",
-    text: "#414141",
+  shoko: {
+    bg: "#ced7e0",
+    caret: "#81c4dd",
+    main: "#81c4dd",
+    sub: "#7599b1",
+    subAlt: "#b7cada",
+    text: "#3b4c58",
+    error: "#bf616a",
+    errorExtra: "#793e44",
+    colorfulError: "#bf616a",
+    colorfulErrorExtra: "#793e44",
   },
-  catppuccin: {
-    bg: "#1e1e2e",
-    main: "#cba6f7",
-    sub: "#7f849c",
-    text: "#cdd6f4",
+  slambook: {
+    bg: "#fffdde",
+    caret: "#367e18",
+    main: "#03001c",
+    sub: "#1c82adc4",
+    subAlt: "#c6dce4",
+    text: "#13005a",
+    error: "#f900bf",
+    errorExtra: "#ce1212",
+    colorfulError: "#ce1212",
+    colorfulErrorExtra: "#3ec70b",
   },
   snes: {
     bg: "#bfbec2",
+    caret: "#523793",
     main: "#553d94",
     sub: "#9f8ad4",
+    subAlt: "#b5b0c2",
     text: "#2e2e2e",
+    error: "#ca4754",
+    errorExtra: "#7e2a33",
+    colorfulError: "#ca4754",
+    colorfulErrorExtra: "#7e2a33",
+    hasCss: true,
   },
-  passion_fruit: {
-    bg: "#7c2142",
-    main: "#f4a3b4",
-    sub: "#9994b8",
-    text: "#ffffff",
-  },
-  blue_dolphin: {
-    bg: "#003950",
-    main: "#ffcefb",
-    sub: "#00e4ff",
-    text: "#82eaff",
-  },
-  mexican: {
-    bg: "#f8ad34",
-    main: "#b12189",
-    sub: "#333",
-    text: "#eee",
-  },
-  husqy: {
-    bg: "#000000",
-    main: "#c58aff",
-    sub: "#972fff",
-    text: "#ebd7ff",
-  },
-  peach_blossom: {
-    bg: "#292929",
-    main: "#99b898",
-    sub: "#616161",
-    text: "#fecea8",
-  },
-  dino: {
-    bg: "#ffffff",
-    main: "#40d672",
-    sub: "#d5d5d5",
-    text: "#1d221f",
-  },
-  tron_orange: {
-    bg: "#0d1c1c",
-    main: "#f0e800",
-    sub: "#ff6600",
-    text: "#ffffff",
-  },
-  hedge: {
-    bg: "#415e31",
-    main: "#6a994e",
-    sub: "#ede5b4",
-    text: "#f7f1d6",
-  },
-  modern_dolch_light: {
-    bg: "#dbdbdb",
-    main: "#8fd1c3",
-    sub: "#acacac",
-    text: "#454545",
+  soaring_skies: {
+    bg: "#fff9f2",
+    caret: "#1e107a",
+    main: "#55c6f0",
+    sub: "#1e107a",
+    subAlt: "#e5ddd4",
+    text: "#1d1e1e",
+    error: "#fb5745",
+    errorExtra: "#b03c30",
+    colorfulError: "#fb5745",
+    colorfulErrorExtra: "#b03c30",
   },
-  iv_spade: {
-    bg: "#0c0c0c",
-    main: "#b7976a",
-    sub: "#404040",
-    text: "#d3c2c3",
+  solarized_dark: {
+    bg: "#002b36",
+    caret: "#dc322f",
+    main: "#859900",
+    sub: "#2aa198",
+    subAlt: "#00222b",
+    text: "#268bd2",
+    error: "#d33682",
+    errorExtra: "#9b225c",
+    colorfulError: "#d33682",
+    colorfulErrorExtra: "#9b225c",
   },
-  iv_clover: {
-    bg: "#a0a0a0",
-    main: "#573e40",
-    sub: "#353535",
-    text: "#3b2d3b",
+  solarized_light: {
+    bg: "#fdf6e3",
+    caret: "#dc322f",
+    main: "#859900",
+    sub: "#2aa198",
+    subAlt: "#e2d8be",
+    text: "#181819",
+    error: "#d33682",
+    errorExtra: "#9b225c",
+    colorfulError: "#d33682",
+    colorfulErrorExtra: "#9b225c",
   },
-  cheesecake: {
-    bg: "#fdf0d5",
-    main: "#8e2949",
-    sub: "#d91c81",
-    text: "#3a3335",
+  solarized_osaka: {
+    bg: "#00141a",
+    caret: "#b58900",
+    main: "#859900",
+    sub: "#2aa198",
+    subAlt: "#00222b",
+    text: "#eee8d5",
+    error: "#dc322f",
+    errorExtra: "#9b225c",
+    colorfulError: "#d33682",
+    colorfulErrorExtra: "#9b225c",
+    hasCss: true,
   },
-  earthsong: {
-    bg: "#292521",
-    main: "#509452",
-    sub: "#f5ae2d",
-    text: "#e6c7a8",
+  sonokai: {
+    bg: "#2c2e34",
+    caret: "#f38c71",
+    main: "#9ed072",
+    sub: "#e7c664",
+    subAlt: "#232429",
+    text: "#e2e2e3",
+    error: "#fc5d7c",
+    errorExtra: "#ecac6a",
+    colorfulError: "#fc5d7c",
+    colorfulErrorExtra: "#ecac6a",
   },
-  purpleish: {
-    bg: "#1e1e32",
-    main: "#7a52cc",
-    sub: "#3d3d66",
-    text: "#7a52cc",
+  spiderman: {
+    bg: "#0d1219",
+    caret: "#e23636",
+    main: "#e23636",
+    sub: "#0476f2",
+    subAlt: "#0b1c2e",
+    text: "#f0f0f0",
+    error: "#0476f2",
+    errorExtra: "#0353a8",
+    colorfulError: "#0476f2",
+    colorfulErrorExtra: "#0353a8",
   },
-  nord_light: {
-    bg: "#eceff4",
-    main: "#8fbcbb",
-    sub: "#6a7791",
-    text: "#8fbcbb",
+  stealth: {
+    bg: "#010203",
+    caret: "#e25303",
+    main: "#383e42",
+    sub: "#5e676e",
+    subAlt: "#121212",
+    text: "#383e42",
+    error: "#e25303",
+    errorExtra: "#73280c",
+    colorfulError: "#e25303",
+    colorfulErrorExtra: "#73280c",
+    hasCss: true,
   },
-  slambook: {
-    bg: "#FFFDDE",
-    main: "#13005A",
-    sub: "#1c82adc4",
-    text: "#125d98",
+  strawberry: {
+    bg: "#f37f83",
+    caret: "#fcfcf8",
+    main: "#fcfcf8",
+    sub: "#e53c58",
+    subAlt: "#ef6e77",
+    text: "#fcfcf8",
+    error: "#fcd23f",
+    errorExtra: "#d7ae1e",
+    colorfulError: "#fcd23f",
+    colorfulErrorExtra: "#d7ae1e",
   },
-  breeze: {
-    bg: "#e8d5c4",
-    main: "#7d67a9",
-    sub: "#3a98b9",
-    text: "#1b4c5e",
+  striker: {
+    bg: "#124883",
+    caret: "#d7dcda",
+    main: "#d7dcda",
+    sub: "#0f2d4e",
+    subAlt: "#104176",
+    text: "#d6dbd9",
+    error: "#fb4934",
+    errorExtra: "#cc241d",
+    colorfulError: "#fb4934",
+    colorfulErrorExtra: "#cc241d",
   },
-  cherry_blossom: {
-    bg: "#323437",
-    main: "#d65ccc",
-    sub: "#787d82",
-    text: "#d1d0c5",
+  suisei: {
+    bg: "#3b4a62",
+    caret: "#bef0ff",
+    main: "#bef0ff",
+    sub: "#fe9841",
+    subAlt: "#313e55",
+    text: "#dbdeeb",
+    error: "#ed2939",
+    errorExtra: "#ce122c",
+    colorfulError: "#ed2939",
+    colorfulErrorExtra: "#ce122c",
+    hasCss: true,
   },
-  everblush: {
-    bg: "#141b1e",
-    main: "#8ccf7e",
-    sub: "#838887",
-    text: "#dadada",
+  sunset: {
+    bg: "#211e24",
+    caret: "#ffca99",
+    main: "#f79777",
+    sub: "#5b578e",
+    subAlt: "#161319",
+    text: "#f4e0c9",
+    error: "#66a1ff",
+    errorExtra: "#376ca4",
+    colorfulError: "#66a1ff",
+    colorfulErrorExtra: "#376ca4",
+    hasCss: true,
   },
-  grape: {
-    bg: "#2c003e",
-    main: "#ff8f00",
-    sub: "#651e56",
-    text: "#fff",
+  superuser: {
+    bg: "#262a33",
+    caret: "#43ffaf",
+    main: "#43ffaf",
+    sub: "#526777",
+    subAlt: "#1f232c",
+    text: "#e5f7ef",
+    error: "#ff5f5f",
+    errorExtra: "#d22a2a",
+    colorfulError: "#ff5f5f",
+    colorfulErrorExtra: "#d22a2a",
   },
-  rainbow_trail: {
-    bg: "#f5f5f5",
-    main: "#363636",
-    sub: "#4f4f4f",
-    text: "#1f1f1f",
+  sweden: {
+    bg: "#0058a3",
+    caret: "#b5b5b5",
+    main: "#ffcc02",
+    sub: "#57abdb",
+    subAlt: "#024f8e",
+    text: "#ffffff",
+    error: "#e74040",
+    errorExtra: "#a22f2f",
+    colorfulError: "#f56674",
+    colorfulErrorExtra: "#e33546",
   },
   tangerine: {
     bg: "#ffede0",
+    caret: "#5d8500",
     main: "#fe5503",
     sub: "#ff9562",
+    subAlt: "#fdd3bf",
     text: "#3d1705",
+    error: "#7fb500",
+    errorExtra: "#5f8700",
+    colorfulError: "#7fb500",
+    colorfulErrorExtra: "#5f8700",
   },
-  macroblank: {
-    bg: "#b2d2c8",
-    main: "#c13117",
-    sub: "#717977",
-    text: "#490909",
-  },
-  anti_hero: {
-    bg: "#00002e",
-    main: "#ffadad",
-    sub: "#ff3d8b",
-    text: "#f1deef",
-  },
-  incognito: {
-    bg: "#0e0e0e",
-    main: "#ff9900",
-    sub: "#2f2f2f",
-    text: "#c6c6c6",
-  },
-  discord: {
-    bg: "#313338",
-    main: "#5a65ea",
-    sub: "#565861",
-    text: "#dcdee3",
-  },
-  cy_red: {
-    bg: "#6e2626",
-    main: "#e55050",
-    sub: "#ff6060",
-    text: "#ffaaaa",
+  taro: {
+    bg: "#b3baff",
+    caret: "#00e9e5",
+    main: "#130f1a",
+    sub: "#6f6c91",
+    subAlt: "#a3a7df",
+    text: "#130f1a",
+    error: "#ffe23e",
+    errorExtra: "#fff1c3",
+    colorfulError: "#ffe23e",
+    colorfulErrorExtra: "#fff1c3",
+    hasCss: true,
   },
-  floret: {
-    bg: "#00272c",
-    main: "#ffdd6d",
-    sub: "#779097",
-    text: "#E5E5E5",
+  terminal: {
+    bg: "#191a1b",
+    caret: "#79a617",
+    main: "#79a617",
+    sub: "#48494b",
+    subAlt: "#141516",
+    text: "#e7eae0",
+    error: "#a61717",
+    errorExtra: "#731010",
+    colorfulError: "#a61717",
+    colorfulErrorExtra: "#731010",
   },
-  lilac_mist: {
-    bg: "#fffbfe",
-    main: "#b94189",
-    sub: "#e094c2",
-    text: "#5c2954",
+  terra: {
+    bg: "#0c100e",
+    caret: "#89c559",
+    main: "#89c559",
+    sub: "#436029",
+    subAlt: "#0f1d18",
+    text: "#f0edd1",
+    error: "#d3ca78",
+    errorExtra: "#89844d",
+    colorfulError: "#d3ca78",
+    colorfulErrorExtra: "#89844d",
   },
   terrazzo: {
     bg: "#f1e5da",
+    caret: "#e0794e",
     main: "#e0794e",
     sub: "#688e8f",
+    subAlt: "#e3d3c6",
     text: "#023e3b",
+    error: "#a01034",
+    errorExtra: "#a01034",
+    colorfulError: "#a01034",
+    colorfulErrorExtra: "#a01034",
+    hasCss: true,
   },
-  suisei: {
-    bg: "#3b4a62",
-    main: "#bef0ff",
-    sub: "#fe9841",
-    text: "#dbdeeb",
+  terror_below: {
+    bg: "#0b1e1a",
+    caret: "#66ac92",
+    main: "#66ac92",
+    sub: "#015c53",
+    subAlt: "#041715",
+    text: "#dceae5",
+    error: "#bf616a",
+    errorExtra: "#793e44",
+    colorfulError: "#bf616a",
+    colorfulErrorExtra: "#793e44",
   },
-  github: {
-    bg: "#212830",
-    main: "#41ce5c",
-    sub: "#788386",
-    text: "#ccdae6",
+  tiramisu: {
+    bg: "#cfc6b9",
+    caret: "#7d5448",
+    main: "#c0976f",
+    sub: "#c0976f",
+    subAlt: "#d0bca7",
+    text: "#7d5448",
+    error: "#e9632d",
+    errorExtra: "#e9632d",
+    colorfulError: "#e9632d",
+    colorfulErrorExtra: "#e9632d",
   },
-  sunset: {
-    bg: "#211e24",
-    main: "#f79777",
-    sub: "#5b578e",
-    text: "#f4e0c9",
+  trackday: {
+    bg: "#464d66",
+    caret: "#475782",
+    main: "#e0513e",
+    sub: "#5c7eb9",
+    subAlt: "#3d4359",
+    text: "#cfcfcf",
+    error: "#e44e4e",
+    errorExtra: "#fd3f3f",
+    colorfulError: "#ff2e2e",
+    colorfulErrorExtra: "#bb2525",
+    hasCss: true,
+  },
+  trance: {
+    bg: "#00021b",
+    caret: "#e51376",
+    main: "#e51376",
+    sub: "#3c4c79",
+    subAlt: "#18214c",
+    text: "#fff",
+    error: "#02d3b0",
+    errorExtra: "#3f887c",
+    colorfulError: "#02d3b0",
+    colorfulErrorExtra: "#3f887c",
+    hasCss: true,
+  },
+  tron_orange: {
+    bg: "#0d1c1c",
+    caret: "#f0e800",
+    main: "#f0e800",
+    sub: "#ff6600",
+    subAlt: "#9c9191",
+    text: "#ffffff",
+    error: "#ff0000",
+    errorExtra: "#ff0000",
+    colorfulError: "#ff0000",
+    colorfulErrorExtra: "#ff0000",
+  },
+  vaporwave: {
+    bg: "#a4a7ea",
+    caret: "#28cafe",
+    main: "#e368da",
+    sub: "#7c7faf",
+    subAlt: "#989bd9",
+    text: "#f1ebf1",
+    error: "#573ca9",
+    errorExtra: "#3d2b77",
+    colorfulError: "#28cafe",
+    colorfulErrorExtra: "#25a9ce",
+  },
+  vesper: {
+    bg: "#101010",
+    caret: "#99ffe4",
+    main: "#ffc799",
+    sub: "#a0a0a0",
+    subAlt: "#1c1c1c",
+    text: "#ffffff",
+    error: "#ff8080",
+    errorExtra: "#b25959",
+    colorfulError: "#ff8080",
+    colorfulErrorExtra: "#b25959",
+    hasCss: true,
   },
   vesper_light: {
     bg: "#ffffff",
+    caret: "#067a6e",
     main: "#fb7100",
-    sub: "#067a6e",
+    sub: "#a0a0a0",
+    subAlt: "#fff8f4",
     text: "#000000",
+    error: "#ed2839",
+    errorExtra: "#ff6c72",
+    colorfulError: "#ed2839",
+    colorfulErrorExtra: "#ff6c72",
+    hasCss: true,
   },
-  pale_nimbus: {
-    bg: "#433e4c",
-    main: "#94ffc2",
-    sub: "#ffaca3",
-    text: "#feffdb",
+  viridescent: {
+    bg: "#2c3333",
+    caret: "#f0d3c9",
+    main: "#95d5b2",
+    sub: "#84a98c",
+    subAlt: "#232828",
+    text: "#e9f5db",
+    error: "#ff4646",
+    errorExtra: "#ab2f2f",
+    colorfulError: "#bd4141",
+    colorfulErrorExtra: "#883434",
   },
-  spiderman: {
-    bg: "#0d1219",
-    main: "#e23636",
-    sub: "#0476f2",
-    text: "#f0f0f0",
+  voc: {
+    bg: "#190618",
+    caret: "#e0caac",
+    main: "#e0caac",
+    sub: "#4c1e48",
+    subAlt: "#2c0c28",
+    text: "#eeeae4",
+    error: "#af3735",
+    errorExtra: "#7e2a29",
+    colorfulError: "#af3735",
+    colorfulErrorExtra: "#7e2a29",
+  },
+  vscode: {
+    bg: "#1e1e1e",
+    caret: "#569cd6",
+    main: "#007acc",
+    sub: "#4d4d4d",
+    subAlt: "#191919",
+    text: "#d4d4d4",
+    error: "#f44747",
+    errorExtra: "#f44747",
+    colorfulError: "#f44747",
+    colorfulErrorExtra: "#f44747",
+  },
+  watermelon: {
+    bg: "#1f4437",
+    caret: "#d6686f",
+    main: "#d6686f",
+    sub: "#3e7a65",
+    subAlt: "#244d3f",
+    text: "#cdc6bc",
+    error: "#c82931",
+    errorExtra: "#ac1823",
+    colorfulError: "#c82931",
+    colorfulErrorExtra: "#ac1823",
+  },
+  wavez: {
+    bg: "#1c292f",
+    caret: "#6bde3b",
+    main: "#6bde3b",
+    sub: "#1f5e6b",
+    subAlt: "#1b3238",
+    text: "#e9efe6",
+    error: "#ca4754",
+    errorExtra: "#7e2a33",
+    colorfulError: "#ca4754",
+    colorfulErrorExtra: "#7e2a33",
+  },
+  witch_girl: {
+    bg: "#f3dbda",
+    caret: "#afc5bd",
+    main: "#56786a",
+    sub: "#ddb4a7",
+    subAlt: "#e7c8be",
+    text: "#56786a",
+    error: "#b29a91",
+    errorExtra: "#b29a91",
+    colorfulError: "#b29a91",
+    colorfulErrorExtra: "#b29a91",
   },
-} as Record<ThemeName, Theme>; //TODO evil,. remove me
+};
 
 export type ThemeWithName = Theme & { name: ThemeName };
 export const ThemesList: ThemeWithName[] = Object.keys(themes)
diff --git a/frontend/static/themes/8008.css b/frontend/static/themes/8008.css
deleted file mode 100644
index fd4aca04d459..000000000000
--- a/frontend/static/themes/8008.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #333a45;
-  --main-color: #f44c7f;
-  --caret-color: #f44c7f;
-  --sub-color: #939eae;
-  --sub-alt-color: #2e343d;
-  --text-color: #e9ecf0;
-  --error-color: #da3333;
-  --error-extra-color: #791717;
-  --colorful-error-color: #c5da33;
-  --colorful-error-extra-color: #849224;
-}
diff --git a/frontend/static/themes/80s_after_dark.css b/frontend/static/themes/80s_after_dark.css
deleted file mode 100644
index 77f05fac8b69..000000000000
--- a/frontend/static/themes/80s_after_dark.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #1b1d36;
-  --main-color: #fca6d1;
-  --caret-color: #99d6ea;
-  --sub-color: #99d6ea;
-  --sub-alt-color: #17182c;
-  --text-color: #e1e7ec;
-  --error-color: #fffb85;
-  --error-extra-color: #fffb85;
-  --colorful-error-color: #fffb85;
-  --colorful-error-extra-color: #fffb85;
-}
diff --git a/frontend/static/themes/9009.css b/frontend/static/themes/9009.css
index 436b004b331a..f8162b7ffc41 100644
--- a/frontend/static/themes/9009.css
+++ b/frontend/static/themes/9009.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #eeebe2;
-  --main-color: #080909;
-  --caret-color: #7fa480;
-  --sub-color: #99947f;
-  --sub-alt-color: #d3cfc1;
-  --text-color: #080909;
-  --error-color: #c87e74;
-  --error-extra-color: #a56961;
-  --colorful-error-color: #c87e74;
-  --colorful-error-extra-color: #a56961;
-}
-
 .word letter.incorrect {
   color: var(--error-color);
 }
diff --git a/frontend/static/themes/aether.css b/frontend/static/themes/aether.css
index efec89292264..d1e05f8ed290 100644
--- a/frontend/static/themes/aether.css
+++ b/frontend/static/themes/aether.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #101820;
-  --main-color: #eedaea;
-  --caret-color: #eedaea;
-  --sub-color: #cf6bdd;
-  --sub-alt-color: #292136;
-  --text-color: #eedaea;
-  --error-color: #ff5253;
-  --error-extra-color: #e3002b;
-  --colorful-error-color: #ff5253;
-  --colorful-error-extra-color: #e3002b;
-}
-
 nav > .textButton:nth-child(1) {
   color: #e4002b;
 }
diff --git a/frontend/static/themes/alduin.css b/frontend/static/themes/alduin.css
deleted file mode 100644
index 6bda332f4c94..000000000000
--- a/frontend/static/themes/alduin.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #1c1c1c;
-  --main-color: #dfd7af;
-  --caret-color: #e3e3e3;
-  --sub-color: #444444;
-  --sub-alt-color: #242424;
-  --text-color: #f5f3ed;
-  --error-color: #af5f5f;
-  --error-extra-color: #4d2113;
-  --colorful-error-color: #af5f5f;
-  --colorful-error-extra-color: #4d2113;
-}
diff --git a/frontend/static/themes/alpine.css b/frontend/static/themes/alpine.css
deleted file mode 100644
index 63197adbf77d..000000000000
--- a/frontend/static/themes/alpine.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #6c687f; /*Background*/
-  --main-color: #ffffff; /*Color after typing, monkeytype logo, WPM Number acc number etc*/
-  --caret-color: #585568; /*Cursor Color*/
-  --sub-color: #9994b8;
-  --sub-alt-color: #77738c; /*WPM text color of scrollbar and general color, before typed color*/
-  --text-color: #ffffff; /*Color of text after hovering over it*/
-  --error-color: #e32b2b;
-  --error-extra-color: #a62626;
-  --colorful-error-color: #e32b2b;
-  --colorful-error-extra-color: #a62626;
-}
diff --git a/frontend/static/themes/anti_hero.css b/frontend/static/themes/anti_hero.css
deleted file mode 100644
index 6924dfa4a09e..000000000000
--- a/frontend/static/themes/anti_hero.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #00002e;
-  --main-color: #ffadad;
-  --caret-color: #ffffff;
-  --sub-color: #ff3d8b;
-  --sub-alt-color: #060548;
-  --text-color: #f1deef;
-  --error-color: #8fecff;
-  --error-extra-color: #558cab;
-  --colorful-error-color: #8fecff;
-  --colorful-error-extra-color: #558cab;
-}
diff --git a/frontend/static/themes/arch.css b/frontend/static/themes/arch.css
deleted file mode 100644
index ad51ec5db202..000000000000
--- a/frontend/static/themes/arch.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #0c0d11;
-  --main-color: #7ebab5;
-  --caret-color: #7ebab5;
-  --sub-color: #454864;
-  --sub-alt-color: #171a25;
-  --text-color: #f6f5f5;
-  --error-color: #ff4754;
-  --error-extra-color: #b02a33;
-  --colorful-error-color: #ff4754;
-  --colorful-error-extra-color: #b02a33;
-}
diff --git a/frontend/static/themes/aurora.css b/frontend/static/themes/aurora.css
index 8a1cefa54046..2e22ecfa0e8e 100644
--- a/frontend/static/themes/aurora.css
+++ b/frontend/static/themes/aurora.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #011926;
-  --main-color: #00e980;
-  --caret-color: #00e980;
-  --sub-color: #245c69;
-  --sub-alt-color: #000c13;
-  --text-color: #fff;
-  --error-color: #b94da1;
-  --error-extra-color: #9b3a76;
-  --colorful-error-color: #b94da1;
-  --colorful-error-extra-color: #9b3a76;
-}
-
 @keyframes aurora {
   0% {
     color: #009fb4;
diff --git a/frontend/static/themes/beach.css b/frontend/static/themes/beach.css
index a742478206a1..8ed2f112d56f 100644
--- a/frontend/static/themes/beach.css
+++ b/frontend/static/themes/beach.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #ffeead;
-  --main-color: #96ceb4;
-  --caret-color: #ffcc5c;
-  --sub-color: #ffcc5c;
-  --sub-alt-color: #f7dc8f;
-  --text-color: #5b7869;
-  --error-color: #ff6f69;
-  --error-extra-color: #ff6f69;
-  --colorful-error-color: #ff6f69;
-  --colorful-error-extra-color: #ff6f69;
-}
-
 nav > .textButton:nth-child(1),
 nav > .textButton:nth-child(2),
 nav > .textButton:nth-child(3),
diff --git a/frontend/static/themes/bento.css b/frontend/static/themes/bento.css
deleted file mode 100644
index 0d4e51bef9b1..000000000000
--- a/frontend/static/themes/bento.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #2d394d;
-  --main-color: #ff7a90;
-  --caret-color: #ff7a90;
-  --sub-color: #4a768d;
-  --sub-alt-color: #263041;
-  --text-color: #fffaf8;
-  --error-color: #ee2a3a;
-  --error-extra-color: #f04040;
-  --colorful-error-color: #fc2032;
-  --colorful-error-extra-color: #f04040;
-}
diff --git a/frontend/static/themes/bingsu.css b/frontend/static/themes/bingsu.css
index 9cbd6d133546..fa16bdd1ef2b 100644
--- a/frontend/static/themes/bingsu.css
+++ b/frontend/static/themes/bingsu.css
@@ -1,17 +1,3 @@
-:root {
-  /* --bg-color: linear-gradient(215deg, #cbb8ba, #706768); */
-  --bg-color: #b8a7aa;
-  --main-color: #83616e;
-  --caret-color: #ebe6ea;
-  --sub-color: #48373d;
-  --sub-alt-color: #ab989e;
-  --text-color: #ebe6ea;
-  --error-color: #921341;
-  --error-extra-color: #640b2c;
-  --colorful-error-color: #921341;
-  --colorful-error-extra-color: #640b2c;
-}
-
 /* .word.error{
   border-bottom: double 4px var(--error-color);
 } */
diff --git a/frontend/static/themes/bliss.css b/frontend/static/themes/bliss.css
deleted file mode 100644
index f6ea01b99ce7..000000000000
--- a/frontend/static/themes/bliss.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #262727;
-  --main-color: #f0d3c9;
-  --caret-color: #f0d3c9;
-  --sub-color: #665957;
-  --sub-alt-color: #343231;
-  --text-color: #fff;
-  --error-color: #bd4141;
-  --error-extra-color: #883434;
-  --colorful-error-color: #bd4141;
-  --colorful-error-extra-color: #883434;
-}
diff --git a/frontend/static/themes/blue_dolphin.css b/frontend/static/themes/blue_dolphin.css
deleted file mode 100644
index 6328341ba60c..000000000000
--- a/frontend/static/themes/blue_dolphin.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #003950;
-  --main-color: #ffcefb;
-  --caret-color: #00bcd4;
-  --sub-color: #00e4ff;
-  --sub-alt-color: #014961;
-  --text-color: #82eaff;
-  --error-color: #ffbde6;
-  --error-extra-color: #ff8188;
-  --colorful-error-color: #d1a5fd;
-  --colorful-error-extra-color: #ff8188;
-}
diff --git a/frontend/static/themes/blueberry_dark.css b/frontend/static/themes/blueberry_dark.css
index 346702c71f6a..4bb07d9f6a91 100644
--- a/frontend/static/themes/blueberry_dark.css
+++ b/frontend/static/themes/blueberry_dark.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #212b42;
-  --main-color: #add7ff;
-  --caret-color: #962f7e;
-  --sub-color: #5c7da5;
-  --sub-alt-color: #1b2334;
-  --text-color: #91b4d5;
-  --error-color: #df4576;
-  --error-extra-color: #d996ac;
-  --colorful-error-color: #df4576;
-  --colorful-error-extra-color: #d996ac;
-}
-
 header #logo .bottom {
   color: #962f7e;
 }
diff --git a/frontend/static/themes/blueberry_light.css b/frontend/static/themes/blueberry_light.css
index 5b5e67b937da..c713fe897986 100644
--- a/frontend/static/themes/blueberry_light.css
+++ b/frontend/static/themes/blueberry_light.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #dae0f5;
-  --main-color: #506477;
-  --caret-color: #df4576;
-  --sub-color: #92a4be;
-  --sub-alt-color: #c1c7df;
-  --text-color: #678198;
-  --error-color: #df4576;
-  --error-extra-color: #d996ac;
-  --colorful-error-color: #df4576;
-  --colorful-error-extra-color: #d996ac;
-}
-
 header #logo .bottom {
   color: #df4576;
 }
diff --git a/frontend/static/themes/botanical.css b/frontend/static/themes/botanical.css
deleted file mode 100644
index 0367232b1e4a..000000000000
--- a/frontend/static/themes/botanical.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #7b9c98;
-  --main-color: #eaf1f3;
-  --caret-color: #abc6c4;
-  --sub-color: #495755;
-  --sub-alt-color: #72908d;
-  --text-color: #eaf1f3;
-  --error-color: #f6c9b4;
-  --error-extra-color: #f59a71;
-  --colorful-error-color: #f6c9b4;
-  --colorful-error-extra-color: #f59a71;
-}
diff --git a/frontend/static/themes/bouquet.css b/frontend/static/themes/bouquet.css
deleted file mode 100644
index e94eae80bf37..000000000000
--- a/frontend/static/themes/bouquet.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #173f35;
-  --main-color: #eaa09c;
-  --caret-color: #eaa09c;
-  --sub-color: #408e7b;
-  --sub-alt-color: #1f4e43;
-  --text-color: #e9e0d2;
-  --error-color: #d44729;
-  --error-extra-color: #8f2f19;
-  --colorful-error-color: #d44729;
-  --colorful-error-extra-color: #8f2f19;
-}
diff --git a/frontend/static/themes/breeze.css b/frontend/static/themes/breeze.css
deleted file mode 100644
index 05b54f679975..000000000000
--- a/frontend/static/themes/breeze.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #e8d5c4;
-  --main-color: #7d67a9;
-  --caret-color: #7d67a9;
-  --sub-color: #3a98b9;
-  --sub-alt-color: #f6e6da;
-  --text-color: #1b4c5e;
-  --error-color: #7d67a9;
-  --error-extra-color: #9f3e6d;
-  --colorful-error-color: #f9f871;
-  --colorful-error-extra-color: #67dfa1;
-}
diff --git a/frontend/static/themes/bushido.css b/frontend/static/themes/bushido.css
deleted file mode 100644
index 6f25cfb1dea7..000000000000
--- a/frontend/static/themes/bushido.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #242933;
-  --main-color: #ec4c56;
-  --caret-color: #ec4c56;
-  --sub-color: #596172;
-  --sub-alt-color: #1c222d;
-  --text-color: #f6f0e9;
-  --error-color: #ec4c56;
-  --error-extra-color: #9b333a;
-  --colorful-error-color: #ecdc4c;
-  --colorful-error-extra-color: #bdb03d;
-}
diff --git a/frontend/static/themes/cafe.css b/frontend/static/themes/cafe.css
deleted file mode 100644
index 402443c17582..000000000000
--- a/frontend/static/themes/cafe.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #ceb18d;
-  --main-color: #14120f;
-  --caret-color: #14120f;
-  --sub-color: #d4d2d1;
-  --sub-alt-color: #bba180;
-  --text-color: #14120f;
-  --error-color: #c82931;
-  --error-extra-color: #ac1823;
-  --colorful-error-color: #c82931;
-  --colorful-error-extra-color: #ac1823;
-}
diff --git a/frontend/static/themes/camping.css b/frontend/static/themes/camping.css
index d00258c20583..fb3dbdd0eea8 100644
--- a/frontend/static/themes/camping.css
+++ b/frontend/static/themes/camping.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #faf1e4;
-  --main-color: #618c56;
-  --caret-color: #618c56;
-  --sub-color: #c2b8aa;
-  --sub-alt-color: #e7dccb;
-  --text-color: #3c403b;
-  --error-color: #ad4f4e;
-  --error-extra-color: #7e3a39;
-  --colorful-error-color: #ad4f4e;
-  --colorful-error-extra-color: #7e3a39;
-}
-
 header #logo .bottom {
   color: #ad4f4e;
 }
diff --git a/frontend/static/themes/carbon.css b/frontend/static/themes/carbon.css
deleted file mode 100644
index 73724e4070b7..000000000000
--- a/frontend/static/themes/carbon.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #313131;
-  --main-color: #f66e0d;
-  --caret-color: #f66e0d;
-  --sub-color: #616161;
-  --sub-alt-color: #2b2b2b;
-  --text-color: #f5e6c8;
-  --error-color: #e72d2d;
-  --error-extra-color: #7e2a33;
-  --colorful-error-color: #e72d2d;
-  --colorful-error-extra-color: #7e2a33;
-}
diff --git a/frontend/static/themes/catppuccin.css b/frontend/static/themes/catppuccin.css
index 9c9218f979a7..d3768ebccf6c 100644
--- a/frontend/static/themes/catppuccin.css
+++ b/frontend/static/themes/catppuccin.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #1e1e2e;
-  --caret-color: #f2cdcd;
-  --main-color: #cba6f7;
-  --sub-color: #7f849c;
-  --sub-alt-color: #181825;
-  --text-color: #cdd6f4;
-  --error-color: #f38ba8;
-  --error-extra-color: #eba0ac;
-  --colorful-error-color: #f38ba8;
-  --colorful-error-extra-color: #eba0ac;
-}
-
 nav .view-start {
   color: #f38ba8;
 }
diff --git a/frontend/static/themes/chaos_theory.css b/frontend/static/themes/chaos_theory.css
index b83c69612526..9f8eb838c9ef 100644
--- a/frontend/static/themes/chaos_theory.css
+++ b/frontend/static/themes/chaos_theory.css
@@ -1,17 +1,3 @@
-:root {
-  --bg-color: #141221;
-  --main-color: #fd77d7;
-  --caret-color: #dde5ed;
-  --text-color: #dde5ed;
-  --error-color: #fd77d7;
-  --sub-color: #676e8a;
-  --sub-alt-color: #1e1d2f;
-  --error-color: #ff5869;
-  --error-extra-color: #b03c47;
-  --colorful-error-color: #ff5869;
-  --colorful-error-extra-color: #b03c47;
-}
-
 header #logo .text {
   transform: rotateY(180deg);
   unicode-bidi: bidi-override;
diff --git a/frontend/static/themes/cheesecake.css b/frontend/static/themes/cheesecake.css
index b9f7c0669e51..76a7609887bc 100644
--- a/frontend/static/themes/cheesecake.css
+++ b/frontend/static/themes/cheesecake.css
@@ -1,15 +1,3 @@
-:root {
-  --bg-color: #fdf0d5;
-  --main-color: #8e2949;
-  --caret-color: #892948;
-  --sub-color: #d91c81;
-  --sub-alt-color: #f3e2bf;
-  --text-color: #3a3335;
-  --error-color: #5cf074;
-  --error-extra-color: #5cf074;
-  --colorful-error-color: #5cf074;
-  --colorful-error-extra-color: #5cf074;
-}
 @keyframes rgb {
   0% {
     fill: #ff0090;
diff --git a/frontend/static/themes/cherry_blossom.css b/frontend/static/themes/cherry_blossom.css
deleted file mode 100644
index 21beeee6ad8f..000000000000
--- a/frontend/static/themes/cherry_blossom.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #323437;
-  --main-color: #d65ccc;
-  --caret-color: #ffffff;
-  --sub-color: #787d82;
-  --sub-alt-color: #2d2f31;
-  --text-color: #d1d0c5;
-  --error-color: #ca4754;
-  --error-extra-color: #d32738;
-  --colorful-error-color: #ec182d;
-  --colorful-error-extra-color: #6e0c16;
-}
diff --git a/frontend/static/themes/comfy.css b/frontend/static/themes/comfy.css
deleted file mode 100644
index 3018531555d6..000000000000
--- a/frontend/static/themes/comfy.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #4a5b6e;
-  --main-color: #f8cdc6;
-  --caret-color: #9ec1cc;
-  --sub-color: #9ec1cc;
-  --sub-alt-color: #425366;
-  --text-color: #f5efee;
-  --error-color: #c9465e;
-  --error-extra-color: #c9465e;
-  --colorful-error-color: #c9465e;
-  --colorful-error-extra-color: #c9465e;
-}
diff --git a/frontend/static/themes/copper.css b/frontend/static/themes/copper.css
deleted file mode 100644
index 0ced080bd018..000000000000
--- a/frontend/static/themes/copper.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #442f29;
-  --main-color: #b46a55;
-  --caret-color: #c25c42;
-  --sub-color: #7ebab5;
-  --sub-alt-color: #50362e;
-  --text-color: #e7e0de;
-  --error-color: #a32424;
-  --error-extra-color: #ec0909;
-  --colorful-error-color: #a32424;
-  --colorful-error-extra-color: #ec0909;
-}
diff --git a/frontend/static/themes/creamsicle.css b/frontend/static/themes/creamsicle.css
deleted file mode 100644
index 49aaad043af6..000000000000
--- a/frontend/static/themes/creamsicle.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #ff9869;
-  --main-color: #fcfcf8;
-  --caret-color: #fcfcf8;
-  --sub-color: #ff661f;
-  --sub-alt-color: #fe8954;
-  --text-color: #fcfcf8;
-  --error-color: #6a0dad;
-  --error-extra-color: #6a0dad;
-  --colorful-error-color: #6a0dad;
-  --colorful-error-extra-color: #6a0dad;
-}
diff --git a/frontend/static/themes/cy_red.css b/frontend/static/themes/cy_red.css
deleted file mode 100644
index 0b41818d3d8a..000000000000
--- a/frontend/static/themes/cy_red.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #6e2626;
-  --main-color: #e55050;
-  --caret-color: #541d1d;
-  --sub-color: #ff6060;
-  --sub-alt-color: #3f1616;
-  --text-color: #ffaaaa;
-  --error-color: #919fd9;
-  --error-extra-color: #4d5d9e;
-  --colorful-error-color: #919fd9;
-  --colorful-error-extra-color: #4d5d9e;
-}
diff --git a/frontend/static/themes/cyberspace.css b/frontend/static/themes/cyberspace.css
deleted file mode 100644
index 6c7b3e30c9b4..000000000000
--- a/frontend/static/themes/cyberspace.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #181c18;
-  --main-color: #00ce7c;
-  --caret-color: #00ce7c;
-  --sub-color: #9578d3;
-  --sub-alt-color: #131613;
-  --text-color: #c2fbe1;
-  --error-color: #ff5f5f;
-  --error-extra-color: #d22a2a;
-  --colorful-error-color: #ff5f5f;
-  --colorful-error-extra-color: #d22a2a;
-}
diff --git a/frontend/static/themes/dark.css b/frontend/static/themes/dark.css
deleted file mode 100644
index 591c1fc5b0ee..000000000000
--- a/frontend/static/themes/dark.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #111;
-  --main-color: #eee;
-  --caret-color: #eee;
-  --sub-color: #444;
-  --sub-alt-color: #191919;
-  --text-color: #eee;
-  --error-color: #da3333;
-  --error-extra-color: #791717;
-  --colorful-error-color: #da3333;
-  --colorful-error-extra-color: #791717;
-}
diff --git a/frontend/static/themes/dark_magic_girl.css b/frontend/static/themes/dark_magic_girl.css
deleted file mode 100644
index 2999ff4fac67..000000000000
--- a/frontend/static/themes/dark_magic_girl.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #091f2c;
-  --main-color: #f5b1cc;
-  --caret-color: #a288d9;
-  --sub-color: #93e8d3;
-  --sub-alt-color: #071823;
-  --text-color: #a288d9;
-  --error-color: #e45c96;
-  --error-extra-color: #e45c96;
-  --colorful-error-color: #00b398;
-  --colorful-error-extra-color: #e45c96;
-}
diff --git a/frontend/static/themes/dark_note.css b/frontend/static/themes/dark_note.css
index 5b156b33ebbf..99fa4f7fd1bf 100644
--- a/frontend/static/themes/dark_note.css
+++ b/frontend/static/themes/dark_note.css
@@ -1,21 +1,3 @@
-:root {
-  --bg-color: #1f1f1f;
-  --main-color: #f2c17b;
-  --caret-color: #e3dce0;
-  --sub-color: #768f95;
-  --sub-alt-color: #141414;
-  --text-color: #d2dff4;
-  --error-color: #ff0000;
-  --error-extra-color: #588498;
-  --colorful-error-color: var(--error-color);
-  --colorful-error-extra-color: var(--error-extra-color);
-  /* custom vars */
-  --theme-bg-stripe-color: #434653;
-  --theme-bg-stripe-opacity: 0.1;
-  --theme-accent-stripe-color: #bf8200;
-  --current-color: var(--text-color);
-}
-
 .colorfulMode {
   --current-color: var(--main-color);
 }
diff --git a/frontend/static/themes/deku.css b/frontend/static/themes/deku.css
deleted file mode 100644
index a321229d6603..000000000000
--- a/frontend/static/themes/deku.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #058b8c;
-  --main-color: #b63530;
-  --caret-color: #b63530;
-  --sub-color: #255458;
-  --sub-alt-color: #0e7d7e;
-  --text-color: #f7f2ea;
-  --error-color: #b63530;
-  --error-extra-color: #530e0e;
-  --colorful-error-color: #ddca1f;
-  --colorful-error-extra-color: #8f8610;
-}
diff --git a/frontend/static/themes/desert_oasis.css b/frontend/static/themes/desert_oasis.css
index 3be4a540b3b5..ade5493f55c3 100644
--- a/frontend/static/themes/desert_oasis.css
+++ b/frontend/static/themes/desert_oasis.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #fff2d5; /*Background*/
-  --main-color: #d19d01; /*Color after typing, monkeytype logo, WPM Number acc number etc*/
-  --caret-color: #3a87fe; /*Cursor Color*/
-  --sub-color: #0061fe; /*WPM text color of scrollbar and general color, before typed color*/
-  --sub-alt-color: #eddebc;
-  --text-color: #332800; /*Color of text after hovering over it*/
-  --error-color: #76bb40;
-  --error-extra-color: #4e7a27;
-  --colorful-error-color: #76bb40;
-  --colorful-error-extra-color: #4e7a27;
-}
-
 nav > .textButton:nth-child(1) {
   color: #76bb40;
 }
diff --git a/frontend/static/themes/dev.css b/frontend/static/themes/dev.css
index b43a50b429cd..544bf308d4af 100644
--- a/frontend/static/themes/dev.css
+++ b/frontend/static/themes/dev.css
@@ -1,13 +1 @@
 /*this theme is based on "Dev theme by KDr3w" color pallet: https://www.deviantart.com/kdr3w/art/Dev-825722799 */
-:root {
-  --bg-color: #1b2028;
-  --main-color: #23a9d5;
-  --caret-color: #4b5975;
-  --sub-color: #4b5975;
-  --sub-alt-color: #151a21;
-  --text-color: #ccccb5;
-  --error-color: #b81b2c;
-  --error-extra-color: #84131f;
-  --colorful-error-color: #b81b2c;
-  --colorful-error-extra-color: #84131f;
-}
diff --git a/frontend/static/themes/diner.css b/frontend/static/themes/diner.css
deleted file mode 100644
index 9f218e2fbe61..000000000000
--- a/frontend/static/themes/diner.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #537997;
-  --main-color: #c3af5b;
-  --caret-color: #ad5145;
-  --sub-color: #445c7f;
-  --sub-alt-color: #4d6f8b;
-  --text-color: #dfdbc8;
-  --error-color: #ad5145;
-  --error-extra-color: #7e2a33;
-  --colorful-error-color: #ad5145;
-  --colorful-error-extra-color: #7e2a33;
-}
diff --git a/frontend/static/themes/dino.css b/frontend/static/themes/dino.css
deleted file mode 100644
index 74625a42a5de..000000000000
--- a/frontend/static/themes/dino.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #ffffff;
-  --main-color: #40d672;
-  --caret-color: #40d672;
-  --sub-color: #d5d5d5;
-  --sub-alt-color: #cafad8;
-  --text-color: #1d221f;
-  --error-color: #ff5f5f;
-  --error-extra-color: #d22a2a;
-  --colorful-error-color: #ff5f5f;
-  --colorful-error-extra-color: #d22a2a;
-}
diff --git a/frontend/static/themes/discord.css b/frontend/static/themes/discord.css
deleted file mode 100644
index 7384caf097d4..000000000000
--- a/frontend/static/themes/discord.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #313338;
-  --main-color: #5a65ea;
-  --caret-color: #5a65ea;
-  --sub-color: #565861;
-  --sub-alt-color: #2b2d31;
-  --text-color: #dcdee3;
-  --error-color: #df4f4b;
-  --error-extra-color: #df4f4b;
-  --colorful-error-color: #df4f4b;
-  --colorful-error-extra-color: #df4f4b;
-}
diff --git a/frontend/static/themes/dmg.css b/frontend/static/themes/dmg.css
index 265e47bd1243..342d5acc11b9 100644
--- a/frontend/static/themes/dmg.css
+++ b/frontend/static/themes/dmg.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #dadbdc;
-  --main-color: #ae185e;
-  --caret-color: #384693;
-  --sub-color: #3846b1;
-  --sub-alt-color: #bec1d2;
-  --text-color: #414141;
-  --error-color: #ae185e;
-  --error-extra-color: #93335c;
-  --colorful-error-color: #80a053;
-  --colorful-error-extra-color: #306230;
-}
-
 nav {
   gap: 0.5rem;
 }
diff --git a/frontend/static/themes/dollar.css b/frontend/static/themes/dollar.css
deleted file mode 100644
index 07511e4ce4be..000000000000
--- a/frontend/static/themes/dollar.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #e4e4d4;
-  --main-color: #6b886b;
-  --caret-color: #424643;
-  --sub-color: #8a9b69;
-  --sub-alt-color: #cbd0bf;
-  --text-color: #555a56;
-  --error-color: #d60000;
-  --error-extra-color: #f68484;
-  --colorful-error-color: #ca4754;
-  --colorful-error-extra-color: #7e2a33;
-}
diff --git a/frontend/static/themes/dracula.css b/frontend/static/themes/dracula.css
index c667d3df568d..67871079376b 100644
--- a/frontend/static/themes/dracula.css
+++ b/frontend/static/themes/dracula.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #282a36;
-  --main-color: #bd93f9;
-  --caret-color: #bd93f9;
-  --sub-color: #6272a4;
-  --sub-alt-color: #20222c;
-  --text-color: #f8f8f2;
-  --error-color: #ff5555;
-  --error-extra-color: #f1fa8c;
-  --colorful-error-color: #ff5555;
-  --colorful-error-extra-color: #f1fa8c;
-}
-
 nav > .textButton:nth-child(1) {
   color: #ec75c4;
 }
diff --git a/frontend/static/themes/drowning.css b/frontend/static/themes/drowning.css
deleted file mode 100644
index dc1f1228212e..000000000000
--- a/frontend/static/themes/drowning.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #191826;
-  --main-color: #4a6fb5;
-  --caret-color: #4f85e8;
-  --sub-color: #50688c;
-  --sub-alt-color: #1e1f2f;
-  --text-color: #9393a7;
-  --error-color: #be555f;
-  --error-extra-color: #7e2a33;
-  --colorful-error-color: #be555f;
-  --colorful-error-extra-color: #7e2a33;
-}
diff --git a/frontend/static/themes/dualshot.css b/frontend/static/themes/dualshot.css
index 1fb26f432af5..a33e7487807d 100644
--- a/frontend/static/themes/dualshot.css
+++ b/frontend/static/themes/dualshot.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #737373;
-  --main-color: #212222;
-  --caret-color: #212222;
-  --sub-color: #aaaaaa;
-  --sub-alt-color: #646464;
-  --text-color: #212222;
-  --error-color: #c82931;
-  --error-extra-color: #ac1823;
-  --colorful-error-color: #c82931;
-  --colorful-error-extra-color: #ac1823;
-}
-
 nav > .textButton:nth-child(1) {
   color: #2884bb;
 }
diff --git a/frontend/static/themes/earthsong.css b/frontend/static/themes/earthsong.css
deleted file mode 100644
index fe2a0dc47b26..000000000000
--- a/frontend/static/themes/earthsong.css
+++ /dev/null
@@ -1,13 +0,0 @@
-:root {
-  /*Personal preference: 'flip test colors'= on*/
-  --bg-color: #292521;
-  --main-color: #509452;
-  --caret-color: #1298ba;
-  --sub-color: #f5ae2d;
-  --sub-alt-color: #1d1b18;
-  --text-color: #e6c7a8;
-  --error-color: #7e2a33;
-  --error-extra-color: #ff645a;
-  --colorful-error-color: #7e2a33;
-  --colorful-error-extra-color: #ff645a;
-}
diff --git a/frontend/static/themes/everblush.css b/frontend/static/themes/everblush.css
deleted file mode 100644
index 6632386efc6c..000000000000
--- a/frontend/static/themes/everblush.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #141b1e;
-  --caret-color: #6cbfbf;
-  --main-color: #8ccf7e;
-  --sub-color: #838887;
-  --sub-alt-color: #232a2d;
-  --text-color: #dadada;
-  --error-color: #e57474;
-  --error-extra-color: #ef7e7e;
-  --colorful-error-color: #e57474;
-  --colorful-error-extra-color: #ef7e7e;
-}
diff --git a/frontend/static/themes/evil_eye.css b/frontend/static/themes/evil_eye.css
deleted file mode 100644
index 6c69b6c6c907..000000000000
--- a/frontend/static/themes/evil_eye.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #0084c2;
-  --main-color: #f7f2ea;
-  --caret-color: #f7f2ea;
-  --sub-color: #01589f;
-  --sub-alt-color: #0c79be;
-  --text-color: #171718;
-  --error-color: #ca4754;
-  --error-extra-color: #7e2a33;
-  --colorful-error-color: #ca4754;
-  --colorful-error-extra-color: #7e2a33;
-}
diff --git a/frontend/static/themes/ez_mode.css b/frontend/static/themes/ez_mode.css
index c81d5c1788aa..c84b5bf0bd69 100644
--- a/frontend/static/themes/ez_mode.css
+++ b/frontend/static/themes/ez_mode.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #0068c6;
-  --main-color: #fa62d5;
-  --caret-color: #4ddb47;
-  --sub-color: #138bf7;
-  --sub-alt-color: #005bac;
-  --text-color: #ffffff;
-  --error-color: #4ddb47;
-  --error-extra-color: #42ba3b;
-  --colorful-error-color: #4ddb47;
-  --colorful-error-extra-color: #42ba3b;
-}
-
 .pageSettings .section h1 {
   color: var(--text-color);
 }
diff --git a/frontend/static/themes/fire.css b/frontend/static/themes/fire.css
index 944e384d9a2b..2b93ce928502 100644
--- a/frontend/static/themes/fire.css
+++ b/frontend/static/themes/fire.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #0f0000;
-  --main-color: #b31313;
-  --caret-color: #b31313;
-  --sub-color: #683434;
-  --sub-alt-color: #200a0a;
-  --text-color: #ffffff;
-  --error-color: #2f3cb6;
-  --error-extra-color: #434a8f;
-  --colorful-error-color: #2f3cb6;
-  --colorful-error-extra-color: #434a8f;
-}
-
 @keyframes fire {
   0% {
     color: #b31313;
diff --git a/frontend/static/themes/fledgling.css b/frontend/static/themes/fledgling.css
deleted file mode 100644
index 2fc7ba576eeb..000000000000
--- a/frontend/static/themes/fledgling.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #3b363f;
-  --main-color: #fc6e83;
-  --caret-color: #474747;
-  --sub-color: #8e5568;
-  --sub-alt-color: #332e38;
-  --text-color: #e6d5d3;
-  --error-color: #f52443;
-  --error-extra-color: #bd001c;
-  --colorful-error-color: #ff0a2f;
-  --colorful-error-extra-color: #000000;
-}
diff --git a/frontend/static/themes/fleuriste.css b/frontend/static/themes/fleuriste.css
index 259db5bc494f..31ee3b5d59ed 100644
--- a/frontend/static/themes/fleuriste.css
+++ b/frontend/static/themes/fleuriste.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #c6b294;
-  --main-color: #405a52;
-  --caret-color: #8a785b;
-  --sub-color: #64374d;
-  --sub-alt-color: #b4a389;
-  --text-color: #091914;
-  --error-color: #990000;
-  --error-extra-color: #8a1414;
-  --colorful-error-color: #a63a3a;
-  --colorful-error-extra-color: #bd4c4c;
-}
-
 /* nav .textButton:nth-child(1, 3, 5) {
   background: #405a52;
 }
diff --git a/frontend/static/themes/floret.css b/frontend/static/themes/floret.css
deleted file mode 100644
index a070a041105e..000000000000
--- a/frontend/static/themes/floret.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #00272c;
-  --main-color: #ffdd6d;
-  --caret-color: #c3bd40;
-  --sub-color: #779097;
-  --sub-alt-color: #173033;
-  --text-color: #e5e5e5;
-  --error-color: #8a4000;
-  --error-extra-color: #00708d;
-  --colorful-error-color: #8a4000;
-  --colorful-error-extra-color: #628b96;
-}
diff --git a/frontend/static/themes/froyo.css b/frontend/static/themes/froyo.css
index c2852315ebb6..62d3fd73822a 100644
--- a/frontend/static/themes/froyo.css
+++ b/frontend/static/themes/froyo.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #e1dacb;
-  --main-color: #7b7d7d;
-  --caret-color: #7b7d7d;
-  --sub-color: #b29c5e;
-  --sub-alt-color: #d3cdc1;
-  --text-color: #7b7d7d;
-  --error-color: #f28578;
-  --error-extra-color: #d56558;
-  --colorful-error-color: #f28578;
-  --colorful-error-extra-color: #d56558;
-}
-
 nav > .textButton:nth-child(1) {
   color: #ff7e73;
 }
diff --git a/frontend/static/themes/frozen_llama.css b/frontend/static/themes/frozen_llama.css
deleted file mode 100644
index 7b0d39917d9d..000000000000
--- a/frontend/static/themes/frozen_llama.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #9bf2ea;
-  --main-color: #6d44a6;
-  --caret-color: #ffffff;
-  --sub-color: #b690fd;
-  --sub-alt-color: #7fe7dd;
-  --text-color: #ffffff;
-  --error-color: #e42629;
-  --error-extra-color: #e42629;
-  --colorful-error-color: #e42629;
-  --colorful-error-extra-color: #e42629;
-}
diff --git a/frontend/static/themes/fruit_chew.css b/frontend/static/themes/fruit_chew.css
index 07043e552bf6..e62daddc3e19 100644
--- a/frontend/static/themes/fruit_chew.css
+++ b/frontend/static/themes/fruit_chew.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #d6d3d6;
-  --main-color: #5c1e5f;
-  --caret-color: #b92221;
-  --sub-color: #b49cb5;
-  --sub-alt-color: #cabfca;
-  --text-color: #282528;
-  --error-color: #bd2621;
-  --error-extra-color: #a62626;
-  --colorful-error-color: #bd2621;
-  --colorful-error-extra-color: #a62626;
-}
-
 nav > .textButton:nth-child(1) {
   color: #a6bf50;
 }
diff --git a/frontend/static/themes/fundamentals.css b/frontend/static/themes/fundamentals.css
index 7c960443ef61..94cb67db41e2 100644
--- a/frontend/static/themes/fundamentals.css
+++ b/frontend/static/themes/fundamentals.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #727474;
-  --main-color: #7fa482;
-  --caret-color: #196378;
-  --sub-color: #cac4be;
-  --sub-alt-color: #666868;
-  --text-color: #131313;
-  --error-color: #5e477c;
-  --error-extra-color: #413157;
-  --colorful-error-color: #5e477c;
-  --colorful-error-extra-color: #413157;
-}
-
 header #logo .bottom {
   color: #196378;
 }
diff --git a/frontend/static/themes/future_funk.css b/frontend/static/themes/future_funk.css
index ba9e5a5496d0..2be582304cb0 100644
--- a/frontend/static/themes/future_funk.css
+++ b/frontend/static/themes/future_funk.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #2e1a47;
-  --main-color: #f7f2ea;
-  --caret-color: #f7f2ea;
-  --sub-color: #c18fff;
-  --sub-alt-color: #27173c;
-  --text-color: #f7f2ea;
-  --error-color: #f04e98;
-  --error-extra-color: #bd1c66;
-  --colorful-error-color: #f04e98;
-  --colorful-error-extra-color: #bd1c66;
-}
-
 nav > .textButton:nth-child(1) {
   color: #f04e98;
 }
diff --git a/frontend/static/themes/github.css b/frontend/static/themes/github.css
deleted file mode 100644
index c5a670722837..000000000000
--- a/frontend/static/themes/github.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #212830;
-  --main-color: #41ce5c;
-  --caret-color: #41ce5c;
-  --sub-color: #788386;
-  --sub-alt-color: #141b23;
-  --text-color: #ccdae6;
-  --error-color: #c23e3a;
-  --error-extra-color: #c23e3a;
-  --colorful-error-color: #c23e3a;
-  --colorful-error-extra-color: #c23e3a;
-}
diff --git a/frontend/static/themes/godspeed.css b/frontend/static/themes/godspeed.css
deleted file mode 100644
index 079d593dc57c..000000000000
--- a/frontend/static/themes/godspeed.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #eae4cf;
-  --main-color: #9abbcd;
-  --caret-color: #f4d476;
-  --sub-color: #ada998;
-  --sub-alt-color: #ded9c9;
-  --text-color: #646669;
-  --error-color: #ca4754;
-  --error-extra-color: #7e2a33;
-  --colorful-error-color: #ca4754;
-  --colorful-error-extra-color: #7e2a33;
-}
diff --git a/frontend/static/themes/graen.css b/frontend/static/themes/graen.css
index 45cb11e214ec..ba4b2cc72b00 100644
--- a/frontend/static/themes/graen.css
+++ b/frontend/static/themes/graen.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #303c36;
-  --main-color: #a59682;
-  --caret-color: #601420;
-  --sub-color: #181d1a;
-  --sub-alt-color: #36453c;
-  --text-color: #a59682;
-  --error-color: #601420;
-  --error-extra-color: #5f0715;
-  --colorful-error-color: #601420;
-  --colorful-error-extra-color: #5f0715;
-}
-
 nav > .textButton:nth-child(1),
 nav > .textButton:nth-child(2),
 nav > .textButton:nth-child(3),
diff --git a/frontend/static/themes/grand_prix.css b/frontend/static/themes/grand_prix.css
deleted file mode 100644
index 5a956a0389f9..000000000000
--- a/frontend/static/themes/grand_prix.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #36475c;
-  --main-color: #c0d036;
-  --caret-color: #c0d036;
-  --sub-color: #5c6c80;
-  --sub-alt-color: #42536b;
-  --text-color: #c1c7d7;
-  --error-color: #fc5727;
-  --error-extra-color: #fc5727;
-  --colorful-error-color: #fc5727;
-  --colorful-error-extra-color: #fc5727;
-}
diff --git a/frontend/static/themes/grape.css b/frontend/static/themes/grape.css
index 92b6b23b5ccc..aa5bc080fedc 100644
--- a/frontend/static/themes/grape.css
+++ b/frontend/static/themes/grape.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #2c003e;
-  --main-color: #ff8f00;
-  --caret-color: #ff8f00;
-  --sub-color: #6e225e;
-  --sub-alt-color: #1f002d;
-  --text-color: #fff;
-  --error-color: #ff4081;
-  --error-extra-color: #bf2054;
-  --colorful-error-color: #ff4081;
-  --colorful-error-extra-color: #bf2054;
-}
-
 @keyframes pastel {
   0% {
     color: #00b8d4;
diff --git a/frontend/static/themes/gruvbox_dark.css b/frontend/static/themes/gruvbox_dark.css
deleted file mode 100644
index 3f82cb9eb96e..000000000000
--- a/frontend/static/themes/gruvbox_dark.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #282828;
-  --main-color: #d79921;
-  --caret-color: #fabd2f;
-  --sub-color: #665c54;
-  --sub-alt-color: #212121;
-  --text-color: #ebdbb2;
-  --error-color: #fb4934;
-  --error-extra-color: #cc241d;
-  --colorful-error-color: #cc241d;
-  --colorful-error-extra-color: #9d0006;
-}
diff --git a/frontend/static/themes/gruvbox_light.css b/frontend/static/themes/gruvbox_light.css
deleted file mode 100644
index 0138fd32865c..000000000000
--- a/frontend/static/themes/gruvbox_light.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #fbf1c7;
-  --main-color: #689d6a;
-  --caret-color: #689d6a;
-  --sub-color: #a89984;
-  --sub-alt-color: #daceae;
-  --text-color: #3c3836;
-  --error-color: #cc241d;
-  --error-extra-color: #9d0006;
-  --colorful-error-color: #cc241d;
-  --colorful-error-extra-color: #9d0006;
-}
diff --git a/frontend/static/themes/hammerhead.css b/frontend/static/themes/hammerhead.css
deleted file mode 100644
index 5eb2d60f5a73..000000000000
--- a/frontend/static/themes/hammerhead.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #030613;
-  --main-color: #4fcdb9;
-  --caret-color: #4fcdb9;
-  --sub-color: #213c53;
-  --sub-alt-color: #0a1928;
-  --text-color: #e2f1f5;
-  --error-color: #e32b2b;
-  --error-extra-color: #a62626;
-  --colorful-error-color: #e32b2b;
-  --colorful-error-extra-color: #a62626;
-}
diff --git a/frontend/static/themes/hanok.css b/frontend/static/themes/hanok.css
deleted file mode 100644
index 5493fb1fc4f3..000000000000
--- a/frontend/static/themes/hanok.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #d8d2c3;
-  --main-color: #513a2a;
-  --caret-color: #513a2a;
-  --sub-color: #8b6f5c;
-  --sub-alt-color: #cdc0af;
-  --text-color: #393b3b;
-  --error-color: #ca4754;
-  --error-extra-color: #7e2a33;
-  --colorful-error-color: #ca4754;
-  --colorful-error-extra-color: #7e2a33;
-}
diff --git a/frontend/static/themes/hedge.css b/frontend/static/themes/hedge.css
deleted file mode 100644
index f71bcf40d7c5..000000000000
--- a/frontend/static/themes/hedge.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #415e31;
-  --main-color: #6a994e;
-  --caret-color: #f2efbb;
-  --sub-color: #ede5b4;
-  --sub-alt-color: #38502a;
-  --text-color: #f7f1d6;
-  --error-color: #ca3d3f;
-  --error-extra-color: #782832;
-  --colorful-error-color: #e76f51;
-  --colorful-error-extra-color: #f4a261;
-}
diff --git a/frontend/static/themes/honey.css b/frontend/static/themes/honey.css
deleted file mode 100644
index 91949cbb1e8b..000000000000
--- a/frontend/static/themes/honey.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #f2aa00;
-  --main-color: #fff546;
-  --caret-color: #795200;
-  --sub-color: #a66b00;
-  --sub-alt-color: #e19e00;
-  --text-color: #f3eecb;
-  --error-color: #df3333;
-  --error-extra-color: #6d1f1f;
-  --colorful-error-color: #df3333;
-  --colorful-error-extra-color: #6d1f1f;
-}
diff --git a/frontend/static/themes/horizon.css b/frontend/static/themes/horizon.css
index 701eecedded8..b430fa2d3a05 100644
--- a/frontend/static/themes/horizon.css
+++ b/frontend/static/themes/horizon.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #1c1e26;
-  --main-color: #c4a88a;
-  --caret-color: #bbbbbb;
-  --sub-color: #db886f;
-  --sub-alt-color: #17181f;
-  --text-color: #bbbbbb;
-  --error-color: #d55170;
-  --error-extra-color: #ff3d3d;
-  --colorful-error-color: #d55170;
-  --colorful-error-extra-color: #d55170;
-}
-
 nav > .textButton:nth-child(1) {
   color: #d55170;
 }
diff --git a/frontend/static/themes/husqy.css b/frontend/static/themes/husqy.css
index 3596750b4503..8eda898afedd 100644
--- a/frontend/static/themes/husqy.css
+++ b/frontend/static/themes/husqy.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #000000;
-  --main-color: #c58aff;
-  --caret-color: #c58aff;
-  --sub-color: #972fff;
-  --sub-alt-color: #1e001e;
-  --text-color: #ebd7ff;
-  --error-color: #da3333;
-  --error-extra-color: #791717;
-  --colorful-error-color: #da3333;
-  --colorful-error-extra-color: #791717;
-}
-
 #liveWpm,
 #liveStatsTextTop {
   color: #c58aff;
diff --git a/frontend/static/themes/iceberg_dark.css b/frontend/static/themes/iceberg_dark.css
deleted file mode 100644
index 97f9b5f8d0bb..000000000000
--- a/frontend/static/themes/iceberg_dark.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #161821;
-  --caret-color: #d2d4de;
-  --main-color: #84a0c6;
-  --sub-color: #595e76;
-  --sub-alt-color: #232531;
-  --text-color: #c6c8d1;
-  --error-color: #e27878;
-  --error-extra-color: #e2a478;
-  --colorful-error-color: #e27878;
-  --colorful-error-extra-color: #e2a478;
-}
diff --git a/frontend/static/themes/iceberg_light.css b/frontend/static/themes/iceberg_light.css
deleted file mode 100644
index 7ab04ef665fd..000000000000
--- a/frontend/static/themes/iceberg_light.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #e8e9ec;
-  --caret-color: #262a3f;
-  --main-color: #2d539e;
-  --sub-color: #adb1c4;
-  --sub-alt-color: #ccceda;
-  --text-color: #33374c;
-  --error-color: #cc517a;
-  --error-extra-color: #cc3768;
-  --colorful-error-color: #cc517a;
-  --colorful-error-extra-color: #cc3768;
-}
diff --git a/frontend/static/themes/incognito.css b/frontend/static/themes/incognito.css
index 60a014ebcfa1..f51a6bef6930 100644
--- a/frontend/static/themes/incognito.css
+++ b/frontend/static/themes/incognito.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #0e0e0e;
-  --main-color: #ff9900;
-  --caret-color: #ff9900;
-  --sub-color: #555555;
-  --sub-alt-color: #151515;
-  --text-color: #c6c6c6;
-  --error-color: #e44545;
-  --error-extra-color: #e44545;
-  --colorful-error-color: #b13535;
-  --colorful-error-extra-color: #b13535;
-}
-
 header #logo .text {
   background: linear-gradient(
     90deg,
diff --git a/frontend/static/themes/ishtar.css b/frontend/static/themes/ishtar.css
index 89b7b8afc7ee..1c0f22be93ed 100644
--- a/frontend/static/themes/ishtar.css
+++ b/frontend/static/themes/ishtar.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #202020;
-  --main-color: #91170c;
-  --caret-color: #c58940;
-  --sub-color: #847869;
-  --sub-alt-color: #272727;
-  --text-color: #fae1c3;
-  --error-color: #bb1e10;
-  --error-extra-color: #791717;
-  --colorful-error-color: #c5da33;
-  --colorful-error-extra-color: #849224;
-}
-
 header #logo .bottom {
   color: #fae1c3;
 }
diff --git a/frontend/static/themes/iv_clover.css b/frontend/static/themes/iv_clover.css
deleted file mode 100644
index f330cfc12a61..000000000000
--- a/frontend/static/themes/iv_clover.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #a0a0a0;
-  --main-color: #573e40;
-  --caret-color: #8d8d8d;
-  --sub-color: #353535;
-  --sub-alt-color: #bebebe;
-  --text-color: #3b2d3b;
-  --error-color: #937173;
-  --error-extra-color: #987678;
-  --colorful-error-color: #ad8d60;
-  --colorful-error-extra-color: #b7976a;
-}
diff --git a/frontend/static/themes/iv_spade.css b/frontend/static/themes/iv_spade.css
deleted file mode 100644
index 8e9a930b0d42..000000000000
--- a/frontend/static/themes/iv_spade.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #0c0c0c;
-  --main-color: #b7976a;
-  --caret-color: #bebebe;
-  --sub-color: #404040;
-  --sub-alt-color: #121212;
-  --text-color: #d3c2c3;
-  --error-color: #9d7b7d;
-  --error-extra-color: #a78587;
-  --colorful-error-color: #b7976a;
-  --colorful-error-extra-color: #c1a174;
-}
diff --git a/frontend/static/themes/joker.css b/frontend/static/themes/joker.css
deleted file mode 100644
index 28daf85e1301..000000000000
--- a/frontend/static/themes/joker.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #1a0e25;
-  --main-color: #99de1e;
-  --caret-color: #99de1e;
-  --sub-color: #7554a3;
-  --sub-alt-color: #14081f;
-  --text-color: #e9e2f5;
-  --error-color: #e32b2b;
-  --error-extra-color: #a62626;
-  --colorful-error-color: #e32b2b;
-  --colorful-error-extra-color: #a62626;
-}
diff --git a/frontend/static/themes/laser.css b/frontend/static/themes/laser.css
deleted file mode 100644
index de0c7c54cfc5..000000000000
--- a/frontend/static/themes/laser.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #221b44;
-  --main-color: #009eaf;
-  --caret-color: #009eaf;
-  --sub-color: #b82356;
-  --sub-alt-color: #1e173b;
-  --text-color: #dbe7e8;
-  --error-color: #a8d400;
-  --error-extra-color: #668000;
-  --colorful-error-color: #a8d400;
-  --colorful-error-extra-color: #668000;
-}
diff --git a/frontend/static/themes/lavender.css b/frontend/static/themes/lavender.css
index 4c7b513e3ba8..3b95e05fe667 100644
--- a/frontend/static/themes/lavender.css
+++ b/frontend/static/themes/lavender.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #ada6c2;
-  --main-color: #e4e3e9;
-  --caret-color: #e4e3e9;
-  --sub-color: #e4e3e9;
-  --sub-alt-color: #a19bb9;
-  --text-color: #2f2a41;
-  --error-color: #ca4754;
-  --error-extra-color: #7e2a33;
-  --colorful-error-color: #ca4754;
-  --colorful-error-extra-color: #7e2a33;
-}
-
 nav .textButton {
   border-radius: 10rem !important;
   background: var(--text-color);
diff --git a/frontend/static/themes/leather.css b/frontend/static/themes/leather.css
deleted file mode 100644
index fd92dd4bb944..000000000000
--- a/frontend/static/themes/leather.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #a86948;
-  --main-color: #ffe4bc;
-  --caret-color: #ef6d49;
-  --sub-color: #81482b;
-  --sub-alt-color: #9a5f3f;
-  --text-color: #ffe4bc;
-  --error-color: #ca4754;
-  --error-extra-color: #7e2a33;
-  --colorful-error-color: #ca4754;
-  --colorful-error-extra-color: #7e2a33;
-}
diff --git a/frontend/static/themes/lil_dragon.css b/frontend/static/themes/lil_dragon.css
index d5f8fa0e73a2..aeb13923bc6d 100644
--- a/frontend/static/themes/lil_dragon.css
+++ b/frontend/static/themes/lil_dragon.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #ebe1ef;
-  --main-color: #8a5bd6;
-  --caret-color: #212b43;
-  --sub-color: #a28db8;
-  --sub-alt-color: #dac7e2;
-  --text-color: #212b43;
-  --error-color: #f794ca;
-  --error-extra-color: #f279c2;
-  --colorful-error-color: #f794ca;
-  --colorful-error-extra-color: #f279c2;
-}
-
 nav .textButton {
   color: #ba96db;
 }
diff --git a/frontend/static/themes/lilac_mist.css b/frontend/static/themes/lilac_mist.css
deleted file mode 100644
index 9d8a813d1315..000000000000
--- a/frontend/static/themes/lilac_mist.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #fffbfe;
-  --main-color: #b94189;
-  --caret-color: #e099d6;
-  --sub-color: #e094c2;
-  --sub-alt-color: #ecdcee;
-  --text-color: #5c2954;
-  --error-color: #ff6f69;
-  --error-extra-color: #ff6f69;
-  --colorful-error-color: #bc7fc0;
-  --colorful-error-extra-color: #bc41b1;
-}
diff --git a/frontend/static/themes/lime.css b/frontend/static/themes/lime.css
deleted file mode 100644
index 73243ef94925..000000000000
--- a/frontend/static/themes/lime.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #7c878e;
-  --main-color: #93c247;
-  --caret-color: #93c247;
-  --sub-color: #4b5257;
-  --sub-alt-color: #737d82;
-  --text-color: #bfcfdc;
-  --error-color: #ea4221;
-  --error-extra-color: #7e2a33;
-  --colorful-error-color: #ea4221;
-  --colorful-error-extra-color: #7e2a33;
-}
diff --git a/frontend/static/themes/luna.css b/frontend/static/themes/luna.css
deleted file mode 100644
index ab5bfc35b550..000000000000
--- a/frontend/static/themes/luna.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #221c35;
-  --main-color: #f67599;
-  --caret-color: #f67599;
-  --sub-color: #5a3a7e;
-  --sub-alt-color: #2f2346;
-  --text-color: #ffe3eb;
-  --error-color: #efc050;
-  --error-extra-color: #c5972c;
-  --colorful-error-color: #efc050;
-  --colorful-error-extra-color: #c5972c;
-}
diff --git a/frontend/static/themes/macroblank.css b/frontend/static/themes/macroblank.css
deleted file mode 100644
index 01390d07c80b..000000000000
--- a/frontend/static/themes/macroblank.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #b2d2c8;
-  --main-color: #c13117;
-  --caret-color: #766f71;
-  --sub-color: #717977;
-  --sub-alt-color: #c6ddd3;
-  --text-color: #490909;
-  --error-color: #c13117;
-  --error-extra-color: #fff5f5;
-  --colorful-error-color: #fff5f5;
-  --colorful-error-extra-color: #ffe9c2;
-}
diff --git a/frontend/static/themes/magic_girl.css b/frontend/static/themes/magic_girl.css
deleted file mode 100644
index 63e7a33b9451..000000000000
--- a/frontend/static/themes/magic_girl.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #ffffff;
-  --main-color: #f5b1cc;
-  --caret-color: #e45c96;
-  --sub-color: #93e8d3;
-  --sub-alt-color: #f2f2f2;
-  --text-color: #00ac8c;
-  --error-color: #ffe495;
-  --error-extra-color: #e45c96;
-  --colorful-error-color: #ffe485;
-  --colorful-error-extra-color: #e45c96;
-}
diff --git a/frontend/static/themes/mashu.css b/frontend/static/themes/mashu.css
deleted file mode 100644
index 7f18b1571f97..000000000000
--- a/frontend/static/themes/mashu.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #2b2b2c;
-  --main-color: #76689a;
-  --caret-color: #76689a;
-  --sub-color: #d8a0a6;
-  --sub-alt-color: #27242c;
-  --text-color: #f1e2e4;
-  --error-color: #d44729;
-  --error-extra-color: #8f2f19;
-  --colorful-error-color: #d44729;
-  --colorful-error-extra-color: #8f2f19;
-}
diff --git a/frontend/static/themes/matcha_moccha.css b/frontend/static/themes/matcha_moccha.css
deleted file mode 100644
index 6adc7f356f69..000000000000
--- a/frontend/static/themes/matcha_moccha.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #523525;
-  --main-color: #7ec160;
-  --caret-color: #7ec160;
-  --sub-color: #9e6749;
-  --sub-alt-color: #422b1e;
-  --text-color: #ecddcc;
-  --error-color: #fb4934;
-  --error-extra-color: #cc241d;
-  --colorful-error-color: #fb4934;
-  --colorful-error-extra-color: #cc241d;
-}
diff --git a/frontend/static/themes/material.css b/frontend/static/themes/material.css
deleted file mode 100644
index e73759a9f3a5..000000000000
--- a/frontend/static/themes/material.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #263238;
-  --main-color: #80cbc4;
-  --caret-color: #80cbc4;
-  --sub-color: #4c6772;
-  --sub-alt-color: #2e3c43;
-  --text-color: #e6edf3;
-  --error-color: #fb4934;
-  --error-extra-color: #cc241d;
-  --colorful-error-color: #fb4934;
-  --colorful-error-extra-color: #cc241d;
-}
diff --git a/frontend/static/themes/matrix.css b/frontend/static/themes/matrix.css
index f6257d885e68..9d39cee42b0e 100644
--- a/frontend/static/themes/matrix.css
+++ b/frontend/static/themes/matrix.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #000000;
-  --main-color: #15ff00;
-  --caret-color: #15ff00;
-  --sub-color: #006500;
-  --sub-alt-color: #032000;
-  --text-color: #d1ffcd;
-  --error-color: #da3333;
-  --error-extra-color: #791717;
-  --colorful-error-color: #da3333;
-  --colorful-error-extra-color: #791717;
-}
-
 #liveWpm,
 #liveStatsTextTop {
   color: white;
diff --git a/frontend/static/themes/menthol.css b/frontend/static/themes/menthol.css
deleted file mode 100644
index 9882c0fea175..000000000000
--- a/frontend/static/themes/menthol.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #00c18c;
-  --main-color: #ffffff;
-  --caret-color: #99fdd8;
-  --sub-color: #186544;
-  --sub-alt-color: #17ae7d;
-  --text-color: #ffffff;
-  --error-color: #e03c3c;
-  --error-extra-color: #b12525;
-  --colorful-error-color: #e03c3c;
-  --colorful-error-extra-color: #b12525;
-}
diff --git a/frontend/static/themes/metaverse.css b/frontend/static/themes/metaverse.css
deleted file mode 100644
index 8c0ded1cf7e4..000000000000
--- a/frontend/static/themes/metaverse.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #232323;
-  --main-color: #d82934;
-  --caret-color: #d82934;
-  --sub-color: #5e5e5e;
-  --sub-alt-color: #1d1d1d;
-  --text-color: #e8e8e8;
-  --error-color: #da3333;
-  --error-extra-color: #791717;
-  --colorful-error-color: #d7da33;
-  --colorful-error-extra-color: #737917;
-}
diff --git a/frontend/static/themes/metropolis.css b/frontend/static/themes/metropolis.css
index 319aea9775e5..829a0637ffb8 100644
--- a/frontend/static/themes/metropolis.css
+++ b/frontend/static/themes/metropolis.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #0f1f2c;
-  --main-color: #56c3b7;
-  --caret-color: #56c3b7;
-  --sub-color: #326984;
-  --sub-alt-color: #0b1822;
-  --text-color: #e4edf1;
-  --error-color: #d44729;
-  --error-extra-color: #8f2f19;
-  --colorful-error-color: #d44729;
-  --colorful-error-extra-color: #8f2f19;
-}
-
 header #logo .bottom {
   color: #f4bc46;
 }
diff --git a/frontend/static/themes/mexican.css b/frontend/static/themes/mexican.css
deleted file mode 100644
index 31f21b94e5f3..000000000000
--- a/frontend/static/themes/mexican.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #f8ad34;
-  --main-color: #b12189;
-  --caret-color: #eee;
-  --sub-color: #333;
-  --sub-alt-color: #f9b951;
-  --text-color: #eee;
-  --error-color: #da3333;
-  --error-extra-color: #791717;
-  --colorful-error-color: #da3333;
-  --colorful-error-extra-color: #791717;
-}
diff --git a/frontend/static/themes/miami.css b/frontend/static/themes/miami.css
deleted file mode 100644
index 54bc7cf12194..000000000000
--- a/frontend/static/themes/miami.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #f35588;
-  --main-color: #05dfd7;
-  --caret-color: #a3f7bf;
-  --text-color: #f0e9ec;
-  --sub-color: #94294c;
-  --sub-alt-color: #db4979;
-  --error-color: #fff591;
-  --error-extra-color: #b9b269;
-  --colorful-error-color: #fff591;
-  --colorful-error-extra-color: #b9b269;
-}
diff --git a/frontend/static/themes/miami_nights.css b/frontend/static/themes/miami_nights.css
deleted file mode 100644
index 2e9050819f0d..000000000000
--- a/frontend/static/themes/miami_nights.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #18181a;
-  --main-color: #e4609b;
-  --caret-color: #e4609b;
-  --sub-color: #47bac0;
-  --sub-alt-color: #0f0f10;
-  --text-color: #fff;
-  --error-color: #fff591;
-  --error-extra-color: #b6af68;
-  --colorful-error-color: #fff591;
-  --colorful-error-extra-color: #b6af68;
-}
diff --git a/frontend/static/themes/midnight.css b/frontend/static/themes/midnight.css
deleted file mode 100644
index bbc2de204bbf..000000000000
--- a/frontend/static/themes/midnight.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #0b0e13;
-  --main-color: #60759f;
-  --caret-color: #60759f;
-  --sub-color: #394760;
-  --sub-alt-color: #141a24;
-  --text-color: #9fadc6;
-  --error-color: #c27070;
-  --error-extra-color: #c28b70;
-  --colorful-error-color: #c27070;
-  --colorful-error-extra-color: #c28b70;
-}
diff --git a/frontend/static/themes/milkshake.css b/frontend/static/themes/milkshake.css
index 8530bc7d6a81..214f374f92d9 100644
--- a/frontend/static/themes/milkshake.css
+++ b/frontend/static/themes/milkshake.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #ffffff;
-  --main-color: #212b43;
-  --caret-color: #212b43;
-  --sub-color: #62cfe6;
-  --sub-alt-color: #ddeff3;
-  --text-color: #212b43;
-  --error-color: #f19dac;
-  --error-extra-color: #e58c9d;
-  --colorful-error-color: #f19dac;
-  --colorful-error-extra-color: #e58c9d;
-}
-
 nav > .textButton:nth-child(1) {
   color: #f19dac;
 }
diff --git a/frontend/static/themes/mint.css b/frontend/static/themes/mint.css
deleted file mode 100644
index 5970fa0e64a9..000000000000
--- a/frontend/static/themes/mint.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #05385b;
-  --main-color: #5cdb95;
-  --caret-color: #5cdb95;
-  --sub-color: #20688a;
-  --sub-alt-color: #07324e;
-  --text-color: #edf5e1;
-  --error-color: #f35588;
-  --error-extra-color: #a3385a;
-  --colorful-error-color: #f35588;
-  --colorful-error-extra-color: #a3385a;
-}
diff --git a/frontend/static/themes/mizu.css b/frontend/static/themes/mizu.css
deleted file mode 100644
index b454ed416204..000000000000
--- a/frontend/static/themes/mizu.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #afcbdd;
-  --main-color: #fcfbf6;
-  --caret-color: #fcfbf6;
-  --sub-color: #85a5bb;
-  --sub-alt-color: #9fc1d4;
-  --text-color: #1a2633;
-  --error-color: #bf616a;
-  --error-extra-color: #793e44;
-  --colorful-error-color: #bf616a;
-  --colorful-error-extra-color: #793e44;
-}
diff --git a/frontend/static/themes/modern_dolch.css b/frontend/static/themes/modern_dolch.css
deleted file mode 100644
index 227ca55864de..000000000000
--- a/frontend/static/themes/modern_dolch.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #2d2e30;
-  --main-color: #7eddd3;
-  --caret-color: #7eddd3;
-  --sub-color: #54585c;
-  --sub-alt-color: #242527;
-  --text-color: #e3e6eb;
-  --error-color: #d36a7b;
-  --error-extra-color: #994154;
-  --colorful-error-color: #d36a7b;
-  --colorful-error-extra-color: #994154;
-}
diff --git a/frontend/static/themes/modern_dolch_light.css b/frontend/static/themes/modern_dolch_light.css
deleted file mode 100644
index b977e9fbcaba..000000000000
--- a/frontend/static/themes/modern_dolch_light.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #dbdbdb;
-  --caret-color: #8fd1c3;
-  --main-color: #8fd1c3;
-  --sub-color: #a3a2a2;
-  --sub-alt-color: #e8e8e8;
-  --text-color: #454545;
-  --error-color: #ea8a9a;
-  --error-extra-color: #e0556d;
-  --colorful-error-color: #ea8a9a;
-  --colorful-error-extra-color: #e0556d;
-}
diff --git a/frontend/static/themes/modern_ink.css b/frontend/static/themes/modern_ink.css
index e1bfa2c51db1..f36f904cbf12 100644
--- a/frontend/static/themes/modern_ink.css
+++ b/frontend/static/themes/modern_ink.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #ffffff;
-  --main-color: #ff360d;
-  --caret-color: #ff0000;
-  --sub-color: #b7b7b7;
-  --sub-alt-color: #ececec;
-  --text-color: #000000;
-  --error-color: #d70000;
-  --error-extra-color: #b00000;
-  --colorful-error-color: #000000;
-  --colorful-error-extra-color: #000000;
-}
-
 nav .textButton:nth-child(1) {
   color: #ff0000;
 }
diff --git a/frontend/static/themes/monokai.css b/frontend/static/themes/monokai.css
deleted file mode 100644
index 613507252123..000000000000
--- a/frontend/static/themes/monokai.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #272822;
-  --main-color: #a6e22e;
-  --caret-color: #66d9ef;
-  --sub-color: #e6db74;
-  --sub-alt-color: #1f201b;
-  --text-color: #e2e2dc;
-  --error-color: #f92672;
-  --error-extra-color: #fd971f;
-  --colorful-error-color: #f92672;
-  --colorful-error-extra-color: #fd971f;
-}
diff --git a/frontend/static/themes/moonlight.css b/frontend/static/themes/moonlight.css
index 916bae0336b0..f9991696c686 100644
--- a/frontend/static/themes/moonlight.css
+++ b/frontend/static/themes/moonlight.css
@@ -1,16 +1,4 @@
 /*inspired by GMK MOONLIGHT*/
-:root {
-  --bg-color: #191f28;
-  --main-color: #c69f68;
-  --caret-color: #8f744b;
-  --sub-color: #4b5975;
-  --sub-alt-color: #141a22;
-  --text-color: #ccccb5;
-  --error-color: #b81b2c;
-  --error-extra-color: #84131f;
-  --colorful-error-color: #b81b2c;
-  --colorful-error-extra-color: #84131f;
-}
 
 nav {
   gap: 0.5rem;
diff --git a/frontend/static/themes/mountain.css b/frontend/static/themes/mountain.css
deleted file mode 100644
index 2d4d7379f663..000000000000
--- a/frontend/static/themes/mountain.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #0f0f0f;
-  --main-color: #e7e7e7;
-  --caret-color: #f5f5f5;
-  --sub-color: #4c4c4c;
-  --sub-alt-color: #1a1a1a;
-  --text-color: #e7e7e7;
-  --error-color: #ac8c8c;
-  --error-extra-color: #c49ea0;
-  --colorful-error-color: #aca98a;
-  --colorful-error-extra-color: #c4c19e;
-}
diff --git a/frontend/static/themes/mr_sleeves.css b/frontend/static/themes/mr_sleeves.css
index b1a6fc742be5..231c2cc78082 100644
--- a/frontend/static/themes/mr_sleeves.css
+++ b/frontend/static/themes/mr_sleeves.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #d1d7da;
-  --main-color: #daa99b;
-  --caret-color: #8fadc9;
-  --sub-color: #9a9fa1;
-  --sub-alt-color: #bfcbd1;
-  --text-color: #1d1d1d;
-  --error-color: #bf6464;
-  --error-extra-color: #793e44;
-  --colorful-error-color: #8fadc9;
-  --colorful-error-extra-color: #667c91;
-}
-
 header #logo .bottom {
   color: #8fadc9;
 }
diff --git a/frontend/static/themes/ms_cupcakes.css b/frontend/static/themes/ms_cupcakes.css
deleted file mode 100644
index a928092cd935..000000000000
--- a/frontend/static/themes/ms_cupcakes.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #ffffff;
-  --main-color: #5ed5f3;
-  --caret-color: #303030;
-  --sub-color: #d64090;
-  --sub-alt-color: #edf8fa;
-  --text-color: #0a282f;
-  --error-color: #a4dd32;
-  --error-extra-color: #90bd34;
-  --colorful-error-color: #a4dd32;
-  --colorful-error-extra-color: #87b330;
-}
diff --git a/frontend/static/themes/muted.css b/frontend/static/themes/muted.css
deleted file mode 100644
index e915fffadee8..000000000000
--- a/frontend/static/themes/muted.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #525252;
-  --main-color: #c5b4e3;
-  --caret-color: #b1e4e3;
-  --sub-color: #939eae;
-  --sub-alt-color: #494949;
-  --text-color: #b1e4e3;
-  --error-color: #edc1cd;
-  --error-extra-color: #edc1cd;
-  --colorful-error-color: #edc1cd;
-  --colorful-error-extra-color: #edc1cd;
-}
diff --git a/frontend/static/themes/nautilus.css b/frontend/static/themes/nautilus.css
deleted file mode 100644
index e64863089df8..000000000000
--- a/frontend/static/themes/nautilus.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #132237;
-  --main-color: #ebb723;
-  --caret-color: #ebb723;
-  --sub-color: #0b4c6c;
-  --sub-alt-color: #0e1a29;
-  --text-color: #1cbaac;
-  --error-color: #da3333;
-  --error-extra-color: #791717;
-  --colorful-error-color: #da3333;
-  --colorful-error-extra-color: #791717;
-}
diff --git a/frontend/static/themes/nebula.css b/frontend/static/themes/nebula.css
deleted file mode 100644
index 340a64b4feff..000000000000
--- a/frontend/static/themes/nebula.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #212135;
-  --main-color: #be3c88;
-  --caret-color: #78c729;
-  --sub-color: #19b3b8;
-  --sub-alt-color: #191928;
-  --text-color: #838686;
-  --error-color: #ca4754;
-  --error-extra-color: #7e2a33;
-  --colorful-error-color: #ca4754;
-  --colorful-error-extra-color: #7e2a33;
-}
diff --git a/frontend/static/themes/night_runner.css b/frontend/static/themes/night_runner.css
deleted file mode 100644
index a9588935f30e..000000000000
--- a/frontend/static/themes/night_runner.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #212121;
-  --main-color: #feff04;
-  --caret-color: #feff04;
-  --sub-color: #5c4a9c;
-  --sub-alt-color: #1a1a1a;
-  --text-color: #e8e8e8;
-  --error-color: #da3333;
-  --error-extra-color: #791717;
-  --colorful-error-color: #da3333;
-  --colorful-error-extra-color: #791717;
-}
diff --git a/frontend/static/themes/nord.css b/frontend/static/themes/nord.css
deleted file mode 100644
index 6ac6ce15e398..000000000000
--- a/frontend/static/themes/nord.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #242933;
-  --caret-color: #eceff4;
-  --main-color: #88c0d0;
-  --sub-color: #929aaa;
-  --sub-alt-color: #2e3440;
-  --text-color: #d8dee9;
-  --error-color: #bf616a;
-  --error-extra-color: #793e44;
-  --colorful-error-color: #bf616a;
-  --colorful-error-extra-color: #793e44;
-}
diff --git a/frontend/static/themes/nord_light.css b/frontend/static/themes/nord_light.css
deleted file mode 100644
index eafa8b48c889..000000000000
--- a/frontend/static/themes/nord_light.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #eceff4;
-  --caret-color: #8fbcbb;
-  --main-color: #8fbcbb;
-  --sub-color: #6a7791;
-  --sub-alt-color: #d8dee9;
-  --text-color: #8fbcbb;
-  --error-color: #bf616a;
-  --error-extra-color: #793e44;
-  --colorful-error-color: #bf616a;
-  --colorful-error-extra-color: #793e44;
-}
diff --git a/frontend/static/themes/norse.css b/frontend/static/themes/norse.css
deleted file mode 100644
index 7183b1c2f837..000000000000
--- a/frontend/static/themes/norse.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #242425;
-  --main-color: #2b5f6d;
-  --caret-color: #2b5f6d;
-  --sub-color: #505b5e;
-  --sub-alt-color: #303333;
-  --text-color: #ccc2b1;
-  --error-color: #7e2a2a;
-  --error-extra-color: #771d1d;
-  --colorful-error-color: #ca4754;
-  --colorful-error-extra-color: #7e2a33;
-}
diff --git a/frontend/static/themes/oblivion.css b/frontend/static/themes/oblivion.css
index 62fb2d66b85a..70923f48f5ba 100644
--- a/frontend/static/themes/oblivion.css
+++ b/frontend/static/themes/oblivion.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #313231;
-  --main-color: #a5a096;
-  --caret-color: #a5a096;
-  --sub-color: #5d6263;
-  --sub-alt-color: #3a3b3b;
-  --text-color: #f7f5f1;
-  --error-color: #dd452e;
-  --error-extra-color: #9e3423;
-  --colorful-error-color: #dd452e;
-  --colorful-error-extra-color: #9e3423;
-}
-
 nav > .textButton:nth-child(1) {
   color: #9a90b4;
 }
diff --git a/frontend/static/themes/olive.css b/frontend/static/themes/olive.css
deleted file mode 100644
index 79893a223e58..000000000000
--- a/frontend/static/themes/olive.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #e9e5cc;
-  --caret-color: #92946f;
-  --main-color: #92946f;
-  --sub-color: #b7b39e;
-  --sub-alt-color: #d4cfbc;
-  --text-color: #373731;
-  --error-color: #cf2f2f;
-  --error-extra-color: #a22929;
-  --colorful-error-color: #cf2f2f;
-  --colorful-error-extra-color: #a22929;
-}
diff --git a/frontend/static/themes/olivia.css b/frontend/static/themes/olivia.css
deleted file mode 100644
index 06ade62cc5f6..000000000000
--- a/frontend/static/themes/olivia.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #1c1b1d;
-  --main-color: #deaf9d;
-  --caret-color: #deaf9d;
-  --sub-color: #4e3e3e;
-  --sub-alt-color: #262223;
-  --text-color: #f2efed;
-  --error-color: #bf616a;
-  --error-extra-color: #793e44;
-  --colorful-error-color: #e03d4e;
-  --colorful-error-extra-color: #aa2f3b;
-}
diff --git a/frontend/static/themes/onedark.css b/frontend/static/themes/onedark.css
deleted file mode 100644
index 65b5ca176b54..000000000000
--- a/frontend/static/themes/onedark.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #2f343f;
-  --caret-color: #61afef;
-  --main-color: #61afef;
-  --sub-color: #eceff4;
-  --sub-alt-color: #262b34;
-  --text-color: #98c379;
-  --error-color: #e06c75;
-  --error-extra-color: #d62436;
-  --colorful-error-color: #d62436;
-  --colorful-error-extra-color: #ff0019;
-}
diff --git a/frontend/static/themes/our_theme.css b/frontend/static/themes/our_theme.css
deleted file mode 100644
index ca52bb7b7b40..000000000000
--- a/frontend/static/themes/our_theme.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #ce1226;
-  --main-color: #fcd116;
-  --caret-color: #fcd116;
-  --sub-color: #6d0f19;
-  --sub-alt-color: #9f1020;
-  --text-color: #ffffff;
-  --error-color: #fcd116;
-  --error-extra-color: #fcd116;
-  --colorful-error-color: #1672fc;
-  --colorful-error-extra-color: #1672fc;
-}
diff --git a/frontend/static/themes/pale_nimbus.css b/frontend/static/themes/pale_nimbus.css
deleted file mode 100644
index ec639f07ee5c..000000000000
--- a/frontend/static/themes/pale_nimbus.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #433e4c;
-  --main-color: #94ffc2;
-  --caret-color: #9efffd;
-  --sub-color: #ffaca3;
-  --sub-alt-color: #694f5e;
-  --text-color: #feffdb;
-  --error-color: #ff5c5c;
-  --error-extra-color: #ff0000;
-  --colorful-error-color: #ff3874;
-  --colorful-error-extra-color: #c2386f;
-}
diff --git a/frontend/static/themes/paper.css b/frontend/static/themes/paper.css
deleted file mode 100644
index f41d06ac26ca..000000000000
--- a/frontend/static/themes/paper.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #eeeeee;
-  --main-color: #444444;
-  --caret-color: #444444;
-  --sub-color: #b2b2b2;
-  --sub-alt-color: #dddddd;
-  --text-color: #444444;
-  --error-color: #d70000;
-  --error-extra-color: #d70000;
-  --colorful-error-color: #d70000;
-  --colorful-error-extra-color: #d70000;
-}
diff --git a/frontend/static/themes/passion_fruit.css b/frontend/static/themes/passion_fruit.css
deleted file mode 100644
index 0644a7aa8324..000000000000
--- a/frontend/static/themes/passion_fruit.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #7c2142;
-  --main-color: #f4a3b4;
-  --caret-color: #ffffff;
-  --sub-color: #9994b8;
-  --sub-alt-color: #833c5e;
-  --text-color: #ffffff;
-  --error-color: #deb80b;
-  --error-extra-color: #deb80b;
-  --colorful-error-color: #deb80b;
-  --colorful-error-extra-color: #deb80b;
-}
diff --git a/frontend/static/themes/pastel.css b/frontend/static/themes/pastel.css
deleted file mode 100644
index fdbba2690e0c..000000000000
--- a/frontend/static/themes/pastel.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #e0b2bd;
-  --main-color: #fbf4b6;
-  --caret-color: #fbf4b6;
-  --sub-color: #b4e9ff;
-  --sub-alt-color: #d29fab;
-  --text-color: #6d5c6f;
-  --error-color: #ff6961;
-  --error-extra-color: #c23b22;
-  --colorful-error-color: #ff6961;
-  --colorful-error-extra-color: #c23b22;
-}
diff --git a/frontend/static/themes/peach_blossom.css b/frontend/static/themes/peach_blossom.css
deleted file mode 100644
index b0ffdffe70bb..000000000000
--- a/frontend/static/themes/peach_blossom.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #292929;
-  --main-color: #99b898;
-  --caret-color: #616161;
-  --sub-color: #616161;
-  --sub-alt-color: #2a363b;
-  --text-color: #fecea8;
-  --error-color: #ff6961;
-  --error-extra-color: #e84a5f;
-  --colorful-error-color: #ff6961;
-  --colorful-error-extra-color: #e84a5f;
-}
diff --git a/frontend/static/themes/peaches.css b/frontend/static/themes/peaches.css
deleted file mode 100644
index bbaddc8c5b4b..000000000000
--- a/frontend/static/themes/peaches.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #e0d7c1;
-  --main-color: #dd7a5f;
-  --caret-color: #dd7a5f;
-  --sub-color: #e7b28e;
-  --sub-alt-color: #e2caaf;
-  --text-color: #5f4c41;
-  --error-color: #ff6961;
-  --error-extra-color: #c23b22;
-  --colorful-error-color: #ff6961;
-  --colorful-error-extra-color: #c23b22;
-}
diff --git a/frontend/static/themes/phantom.css b/frontend/static/themes/phantom.css
index 718de9968d02..6e0d2fc27a4c 100644
--- a/frontend/static/themes/phantom.css
+++ b/frontend/static/themes/phantom.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #001;
-  --main-color: #7aa2f7;
-  --caret-color: #bb9af7;
-  --sub-color: #414868;
-  --sub-alt-color: #24283b;
-  --text-color: #c0caf5;
-  --error-color: #f7768e;
-  --error-extra-color: #db4b4b;
-  --colorful-error-color: #ff7a93;
-  --colorful-error-extra-color: #ff9e64;
-}
-
 @keyframes tokyo-glow {
   0% {
     color: #c0caf5;
diff --git a/frontend/static/themes/pink_lemonade.css b/frontend/static/themes/pink_lemonade.css
deleted file mode 100644
index 19f5424d2c13..000000000000
--- a/frontend/static/themes/pink_lemonade.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #f6d992;
-  --main-color: #f6a192;
-  --caret-color: #fcfcf8;
-  --sub-color: #f6b092;
-  --sub-alt-color: #f6cc93;
-  --text-color: #fcfcf8;
-  --error-color: #ff6f69;
-  --error-extra-color: #ff6f69;
-  --colorful-error-color: #ff6f69;
-  --colorful-error-extra-color: #ff6f69;
-}
diff --git a/frontend/static/themes/pulse.css b/frontend/static/themes/pulse.css
deleted file mode 100644
index 604ee84a97fa..000000000000
--- a/frontend/static/themes/pulse.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #181818;
-  --main-color: #17b8bd;
-  --caret-color: #17b8bd;
-  --sub-color: #53565a;
-  --sub-alt-color: #121212;
-  --text-color: #e5f4f4;
-  --error-color: #da3333;
-  --error-extra-color: #791717;
-  --colorful-error-color: #da3333;
-  --colorful-error-extra-color: #791717;
-}
diff --git a/frontend/static/themes/purpleish.css b/frontend/static/themes/purpleish.css
deleted file mode 100644
index d79dc2875e96..000000000000
--- a/frontend/static/themes/purpleish.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #1e1e32;
-  --main-color: #7a52cc;
-  --caret-color: #7a52cc;
-  --sub-color: #5c5c99;
-  --sub-alt-color: #181829;
-  --text-color: #a3a3cc;
-  --error-color: #ff6666;
-  --error-extra-color: #ff6666;
-  --colorful-error-color: #ff6666;
-  --colorful-error-extra-color: #ff6666;
-}
diff --git a/frontend/static/themes/rainbow_trail.css b/frontend/static/themes/rainbow_trail.css
index f7a8c466eb24..64e50c8a7e48 100644
--- a/frontend/static/themes/rainbow_trail.css
+++ b/frontend/static/themes/rainbow_trail.css
@@ -1,14 +1,3 @@
-:root {
-  --bg-color: #f5f5f5;
-  --main-color: #363636;
-  --caret-color: #0d0d0d;
-  --sub-color: #4f4f4f;
-  --sub-alt-color: #e0e0e0;
-  --text-color: #1f1f1f;
-  --error-color: #ff0008;
-  --colorful-error-color: #ff0008;
-}
-
 header #logo .text {
   background: linear-gradient(
     90deg,
diff --git a/frontend/static/themes/red_dragon.css b/frontend/static/themes/red_dragon.css
deleted file mode 100644
index 78305aad76d7..000000000000
--- a/frontend/static/themes/red_dragon.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #1a0b0c;
-  --main-color: #ff3a32;
-  --caret-color: #ff3a32;
-  --sub-color: #e2a528;
-  --sub-alt-color: #0e0506;
-  --text-color: #4a4d4e;
-  --error-color: #771b1f;
-  --error-extra-color: #591317;
-  --colorful-error-color: #771b1f;
-  --colorful-error-extra-color: #591317;
-}
diff --git a/frontend/static/themes/red_samurai.css b/frontend/static/themes/red_samurai.css
deleted file mode 100644
index 959fc24151ab..000000000000
--- a/frontend/static/themes/red_samurai.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #84202c;
-  --main-color: #c79e6e;
-  --caret-color: #c79e6e;
-  --sub-color: #55131b;
-  --sub-alt-color: #751d26;
-  --text-color: #e2dad0;
-  --error-color: #33bbda;
-  --error-extra-color: #176b79;
-  --colorful-error-color: #33bbda;
-  --colorful-error-extra-color: #176779;
-}
diff --git a/frontend/static/themes/repose_dark.css b/frontend/static/themes/repose_dark.css
deleted file mode 100644
index 9d1bb1cef49d..000000000000
--- a/frontend/static/themes/repose_dark.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #2f3338;
-  --main-color: #d6d2bc;
-  --caret-color: #d6d2bc;
-  --sub-color: #8f8e84;
-  --sub-alt-color: #3a3c3d;
-  --text-color: #d6d2bc;
-  --error-color: #ff4a59;
-  --error-extra-color: #c43c53;
-  --colorful-error-color: #ff4a59;
-  --colorful-error-extra-color: #c43c53;
-}
diff --git a/frontend/static/themes/repose_light.css b/frontend/static/themes/repose_light.css
deleted file mode 100644
index 4dc674274818..000000000000
--- a/frontend/static/themes/repose_light.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #efead0;
-  --main-color: #5f605e;
-  --caret-color: #5f605e;
-  --sub-color: #8f8e84;
-  --sub-alt-color: #dbd6c4;
-  --text-color: #333538;
-  --error-color: #c43c53;
-  --error-extra-color: #a52632;
-  --colorful-error-color: #c43c53;
-  --colorful-error-extra-color: #a52632;
-}
diff --git a/frontend/static/themes/retro.css b/frontend/static/themes/retro.css
deleted file mode 100644
index 3bb6dff213d4..000000000000
--- a/frontend/static/themes/retro.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #dad3c1;
-  --main-color: #1d1b17;
-  --caret-color: #1d1b17;
-  --sub-color: #918b7d;
-  --sub-alt-color: #c8c3b3;
-  --text-color: #1d1b17;
-  --error-color: #bf616a;
-  --error-extra-color: #793e44;
-  --colorful-error-color: #bf616a;
-  --colorful-error-extra-color: #793e44;
-}
diff --git a/frontend/static/themes/retrocast.css b/frontend/static/themes/retrocast.css
index 405df18e9c2c..f8b8e4159189 100644
--- a/frontend/static/themes/retrocast.css
+++ b/frontend/static/themes/retrocast.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #07737a;
-  --main-color: #88dbdf;
-  --caret-color: #88dbdf;
-  --sub-color: #f3e03b;
-  --sub-alt-color: #26858b;
-  --text-color: #ffffff;
-  --error-color: #ff585d;
-  --error-extra-color: #c04455;
-  --colorful-error-color: #ff585d;
-  --colorful-error-extra-color: #c04455;
-}
-
 nav > .textButton:nth-child(1) {
   color: #88dbdf;
 }
diff --git a/frontend/static/themes/rgb.css b/frontend/static/themes/rgb.css
index e0f71d726bda..4e3f9af09641 100644
--- a/frontend/static/themes/rgb.css
+++ b/frontend/static/themes/rgb.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #111;
-  --main-color: #eee;
-  --caret-color: #eee;
-  --sub-color: #444;
-  --sub-alt-color: #1a1a1a;
-  --text-color: #eee;
-  --error-color: #eee;
-  --error-extra-color: #b3b3b3;
-  --colorful-error-color: #eee;
-  --colorful-error-extra-color: #b3b3b3;
-}
-
 @keyframes rgb {
   0% {
     color: hsl(120, 39%, 49%);
diff --git a/frontend/static/themes/rose_pine.css b/frontend/static/themes/rose_pine.css
deleted file mode 100644
index 9ad9abbeae25..000000000000
--- a/frontend/static/themes/rose_pine.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #1f1d27; /*Background*/
-  --main-color: #9ccfd8; /*Color after typing, monkeytype logo, WPM Number acc number etc*/
-  --caret-color: #f6c177; /*Cursor Color*/
-  --sub-color: #c4a7e7;
-  --sub-alt-color: #282533; /*WPM text color of scrollbar and general color, before typed color*/
-  --text-color: #e0def4; /*Color of text after hovering over it*/
-  --error-color: #eb6f92;
-  --error-extra-color: #ebbcba;
-  --colorful-error-color: #eb6f92;
-  --colorful-error-extra-color: #ebbcba;
-}
diff --git a/frontend/static/themes/rose_pine_dawn.css b/frontend/static/themes/rose_pine_dawn.css
deleted file mode 100644
index d3e1eaf2bfe5..000000000000
--- a/frontend/static/themes/rose_pine_dawn.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #fffaf3; /*Background*/
-  --main-color: #56949f; /*Color after typing, monkeytype logo, WPM Number acc number etc*/
-  --caret-color: #ea9d34; /*Cursor Color*/
-  --sub-color: #c4a7e7;
-  --sub-alt-color: #f0e9df;
-  --text-color: #286983; /*Color of text after hovering over it*/
-  --error-color: #b4637a;
-  --error-extra-color: #d7827e;
-  --colorful-error-color: #b4637a;
-  --colorful-error-extra-color: #d7827e;
-}
diff --git a/frontend/static/themes/rose_pine_moon.css b/frontend/static/themes/rose_pine_moon.css
deleted file mode 100644
index 6985a521a5eb..000000000000
--- a/frontend/static/themes/rose_pine_moon.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #2a273f; /*Background*/
-  --main-color: #9ccfd8; /*Color after typing, monkeytype logo, WPM Number acc number etc*/
-  --caret-color: #f6c177; /*Cursor Color*/
-  --sub-color: #c4a7e7;
-  --sub-alt-color: #211f32; /*WPM text color of scrollbar and general color, before typed color*/
-  --text-color: #e0def4; /*Color of text after hovering over it*/
-  --error-color: #eb6f92;
-  --error-extra-color: #ebbcba;
-  --colorful-error-color: #eb6f92;
-  --colorful-error-extra-color: #ebbcba;
-}
diff --git a/frontend/static/themes/rudy.css b/frontend/static/themes/rudy.css
deleted file mode 100644
index 3cef564a370e..000000000000
--- a/frontend/static/themes/rudy.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #1a2b3e;
-  --caret-color: #af8f5c;
-  --main-color: #af8f5c;
-  --sub-color: #3a506c;
-  --sub-alt-color: #152231;
-  --text-color: #c9c8bf;
-  --error-color: #bf616a;
-  --error-extra-color: #793e44;
-  --colorful-error-color: #bf616a;
-  --colorful-error-extra-color: #793e44;
-}
diff --git a/frontend/static/themes/ryujinscales.css b/frontend/static/themes/ryujinscales.css
index 39a8dd1b8658..983713300eb2 100644
--- a/frontend/static/themes/ryujinscales.css
+++ b/frontend/static/themes/ryujinscales.css
@@ -1,14 +1 @@
-:root {
-  --bg-color: #081426;
-  --main-color: #f17754;
-  --caret-color: #ef6d49;
-  --sub-color: #ffbc90;
-  --sub-alt-color: #040e1d;
-  --text-color: #ffe4bc;
-  --error-color: #ca4754;
-  --error-extra-color: #7e2a33;
-  --colorful-error-color: #ca4754;
-  --colorful-error-extra-color: #7e2a33;
-}
-
 /* your theme has been added to the _list file and the textColor property is the theme's main color */
diff --git a/frontend/static/themes/serika.css b/frontend/static/themes/serika.css
deleted file mode 100644
index 2a335c5329b8..000000000000
--- a/frontend/static/themes/serika.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --main-color: #e2b714;
-  --caret-color: #e2b714;
-  --sub-color: #aaaeb3;
-  --sub-alt-color: #d1d3d8;
-  --bg-color: #e1e1e3;
-  --text-color: #323437;
-  --error-color: #da3333;
-  --error-extra-color: #791717;
-  --colorful-error-color: #da3333;
-  --colorful-error-extra-color: #791717;
-}
diff --git a/frontend/static/themes/sewing_tin.css b/frontend/static/themes/sewing_tin.css
index d7843ecb2f24..3b0574b50b41 100644
--- a/frontend/static/themes/sewing_tin.css
+++ b/frontend/static/themes/sewing_tin.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #241963;
-  --main-color: #f2ce83;
-  --caret-color: #fbdb8c;
-  --sub-color: #446ad5;
-  --sub-alt-color: #2a277a;
-  --text-color: #ffffff;
-  --error-color: #c6915e;
-  --error-extra-color: #c6915e;
-  --colorful-error-color: #c6915e;
-  --colorful-error-extra-color: #c6915e;
-}
-
 nav > .textButton {
   color: #f2ce83;
 }
diff --git a/frontend/static/themes/sewing_tin_light.css b/frontend/static/themes/sewing_tin_light.css
index b37243152ccf..1e4fe75292d7 100644
--- a/frontend/static/themes/sewing_tin_light.css
+++ b/frontend/static/themes/sewing_tin_light.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #ffffff;
-  --main-color: #2d2076;
-  --caret-color: #fbdb8c;
-  --sub-color: #385eca;
-  --sub-alt-color: #c8cedf;
-  --text-color: #2d2076;
-  --error-color: #f2ce83;
-  --error-extra-color: #f2ce83;
-  --colorful-error-color: #f2ce83;
-  --colorful-error-extra-color: #f2ce83;
-}
-
 nav > .textButton {
   color: #f2ce83;
 }
diff --git a/frontend/static/themes/shadow.css b/frontend/static/themes/shadow.css
index 411279afdf6a..87db97316095 100644
--- a/frontend/static/themes/shadow.css
+++ b/frontend/static/themes/shadow.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #000;
-  --main-color: #eee;
-  --caret-color: #eee;
-  --sub-color: #444;
-  --sub-alt-color: #171717;
-  --text-color: #eee;
-  --error-color: #fff;
-  --error-extra-color: #d8d8d8;
-  --colorful-error-color: #fff;
-  --colorful-error-extra-color: #d8d8d8;
-}
-
 header #logo .icon {
   color: #8c3230;
 }
diff --git a/frontend/static/themes/shoko.css b/frontend/static/themes/shoko.css
deleted file mode 100644
index 6ddb545ec5a8..000000000000
--- a/frontend/static/themes/shoko.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #ced7e0;
-  --main-color: #81c4dd;
-  --caret-color: #81c4dd;
-  --sub-color: #7599b1;
-  --sub-alt-color: #b7cada;
-  --text-color: #3b4c58;
-  --error-color: #bf616a;
-  --error-extra-color: #793e44;
-  --colorful-error-color: #bf616a;
-  --colorful-error-extra-color: #793e44;
-}
diff --git a/frontend/static/themes/slambook.css b/frontend/static/themes/slambook.css
deleted file mode 100644
index d112cb59d18e..000000000000
--- a/frontend/static/themes/slambook.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #fffdde;
-  --main-color: #03001c;
-  --caret-color: #367e18;
-  --sub-color: #1c82adc4;
-  --sub-alt-color: #c6dce4;
-  --text-color: #13005a;
-  --error-color: #f900bf;
-  --error-extra-color: #ce1212;
-  --colorful-error-color: #ce1212;
-  --colorful-error-extra-color: #3ec70b;
-}
diff --git a/frontend/static/themes/snes.css b/frontend/static/themes/snes.css
index 460250393071..2466c7b7d7f0 100644
--- a/frontend/static/themes/snes.css
+++ b/frontend/static/themes/snes.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #bfbec2;
-  --main-color: #553d94;
-  --caret-color: #523793;
-  --sub-color: #9f8ad4;
-  --sub-alt-color: #b5b0c2;
-  --text-color: #2e2e2e;
-  --error-color: #ca4754;
-  --error-extra-color: #7e2a33;
-  --colorful-error-color: #ca4754;
-  --colorful-error-extra-color: #7e2a33;
-}
-
 nav {
   gap: 0.5rem;
 }
diff --git a/frontend/static/themes/soaring_skies.css b/frontend/static/themes/soaring_skies.css
deleted file mode 100644
index a394ed18e370..000000000000
--- a/frontend/static/themes/soaring_skies.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #fff9f2;
-  --main-color: #55c6f0;
-  --caret-color: #1e107a;
-  --sub-color: #1e107a;
-  --sub-alt-color: #e5ddd4;
-  --text-color: #1d1e1e;
-  --error-color: #fb5745;
-  --error-extra-color: #b03c30;
-  --colorful-error-color: #fb5745;
-  --colorful-error-extra-color: #b03c30;
-}
diff --git a/frontend/static/themes/solarized_dark.css b/frontend/static/themes/solarized_dark.css
deleted file mode 100644
index 8af1fe4e5e35..000000000000
--- a/frontend/static/themes/solarized_dark.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #002b36;
-  --main-color: #859900;
-  --caret-color: #dc322f;
-  --sub-color: #2aa198;
-  --sub-alt-color: #00222b;
-  --text-color: #268bd2;
-  --error-color: #d33682;
-  --error-extra-color: #9b225c;
-  --colorful-error-color: #d33682;
-  --colorful-error-extra-color: #9b225c;
-}
diff --git a/frontend/static/themes/solarized_light.css b/frontend/static/themes/solarized_light.css
deleted file mode 100644
index 2705bc764cce..000000000000
--- a/frontend/static/themes/solarized_light.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #fdf6e3;
-  --main-color: #859900;
-  --caret-color: #dc322f;
-  --sub-color: #2aa198;
-  --sub-alt-color: #e2d8be;
-  --text-color: #181819;
-  --error-color: #d33682;
-  --error-extra-color: #9b225c;
-  --colorful-error-color: #d33682;
-  --colorful-error-extra-color: #9b225c;
-}
diff --git a/frontend/static/themes/solarized_osaka.css b/frontend/static/themes/solarized_osaka.css
index c2cfea3469f4..954152ff4daa 100644
--- a/frontend/static/themes/solarized_osaka.css
+++ b/frontend/static/themes/solarized_osaka.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #00141a;
-  --main-color: #859900;
-  --caret-color: #b58900;
-  --sub-color: #2aa198;
-  --sub-alt-color: #00222b;
-  --text-color: #eee8d5;
-  --error-color: #dc322f;
-  --error-extra-color: #9b225c;
-  --colorful-error-color: #d33682;
-  --colorful-error-extra-color: #9b225c;
-}
-
 #words {
   --correct-letter-color: var(--text-color);
   --untyped-letter-color: #586e75;
diff --git a/frontend/static/themes/sonokai.css b/frontend/static/themes/sonokai.css
deleted file mode 100644
index b644953ce3a0..000000000000
--- a/frontend/static/themes/sonokai.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #2c2e34;
-  --main-color: #9ed072;
-  --caret-color: #f38c71;
-  --sub-color: #e7c664;
-  --sub-alt-color: #232429;
-  --text-color: #e2e2e3;
-  --error-color: #fc5d7c;
-  --error-extra-color: #ecac6a;
-  --colorful-error-color: #fc5d7c;
-  --colorful-error-extra-color: #ecac6a;
-}
diff --git a/frontend/static/themes/spiderman.css b/frontend/static/themes/spiderman.css
deleted file mode 100644
index 33f5c5dffd66..000000000000
--- a/frontend/static/themes/spiderman.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #0d1219;
-  --main-color: #e23636;
-  --caret-color: #e23636;
-  --sub-color: #0476f2;
-  --sub-alt-color: #0b1c2e;
-  --text-color: #f0f0f0;
-  --error-color: #0476f2;
-  --error-extra-color: #0353a8;
-  --colorful-error-color: #0476f2;
-  --colorful-error-extra-color: #0353a8;
-}
diff --git a/frontend/static/themes/stealth.css b/frontend/static/themes/stealth.css
index fb132e95ba9b..83c919f8986e 100644
--- a/frontend/static/themes/stealth.css
+++ b/frontend/static/themes/stealth.css
@@ -1,15 +1,3 @@
-:root {
-  --bg-color: #010203;
-  --main-color: #383e42;
-  --caret-color: #e25303;
-  --sub-color: #5e676e;
-  --sub-alt-color: #121212;
-  --text-color: #383e42;
-  --error-color: #e25303;
-  --error-extra-color: #73280c;
-  --colorful-error-color: #e25303;
-  --colorful-error-extra-color: #73280c;
-}
 nav .textButton:nth-child(4) {
   color: #e25303;
 }
diff --git a/frontend/static/themes/strawberry.css b/frontend/static/themes/strawberry.css
deleted file mode 100644
index dacd5c190f56..000000000000
--- a/frontend/static/themes/strawberry.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #f37f83;
-  --main-color: #fcfcf8;
-  --caret-color: #fcfcf8;
-  --sub-color: #e53c58;
-  --sub-alt-color: #ef6e77;
-  --text-color: #fcfcf8;
-  --error-color: #fcd23f;
-  --error-extra-color: #d7ae1e;
-  --colorful-error-color: #fcd23f;
-  --colorful-error-extra-color: #d7ae1e;
-}
diff --git a/frontend/static/themes/striker.css b/frontend/static/themes/striker.css
deleted file mode 100644
index 377b8b2cf404..000000000000
--- a/frontend/static/themes/striker.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #124883;
-  --main-color: #d7dcda;
-  --caret-color: #d7dcda;
-  --sub-color: #0f2d4e;
-  --sub-alt-color: #104176;
-  --text-color: #d6dbd9;
-  --error-color: #fb4934;
-  --error-extra-color: #cc241d;
-  --colorful-error-color: #fb4934;
-  --colorful-error-extra-color: #cc241d;
-}
diff --git a/frontend/static/themes/suisei.css b/frontend/static/themes/suisei.css
index 5923984d8ed8..dd59ae43593f 100644
--- a/frontend/static/themes/suisei.css
+++ b/frontend/static/themes/suisei.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #3b4a62;
-  --main-color: #bef0ff;
-  --caret-color: #bef0ff;
-  --sub-color: #fe9841;
-  --sub-alt-color: #313e55;
-  --text-color: #dbdeeb;
-  --error-color: #ed2939;
-  --error-extra-color: #ce122c;
-  --colorful-error-color: #ed2939;
-  --colorful-error-extra-color: #ce122c;
-}
-
 @keyframes pulse {
   0% {
     transform: scale(1);
diff --git a/frontend/static/themes/sunset.css b/frontend/static/themes/sunset.css
index 6b867a87f679..a8b8d238f1aa 100644
--- a/frontend/static/themes/sunset.css
+++ b/frontend/static/themes/sunset.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #211e24;
-  --main-color: #f79777;
-  --caret-color: #ffca99;
-  --sub-color: #5b578e;
-  --sub-alt-color: #161319;
-  --text-color: #f4e0c9;
-  --error-color: #66a1ff;
-  --error-extra-color: #376ca4;
-  --colorful-error-color: #66a1ff;
-  --colorful-error-extra-color: #376ca4;
-}
-
 nav > .textButton:nth-child(1),
 nav > .textButton:nth-child(2),
 nav > .textButton:nth-child(3),
diff --git a/frontend/static/themes/superuser.css b/frontend/static/themes/superuser.css
deleted file mode 100644
index a9a1a479c2be..000000000000
--- a/frontend/static/themes/superuser.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #262a33;
-  --main-color: #43ffaf;
-  --caret-color: #43ffaf;
-  --sub-color: #526777;
-  --sub-alt-color: #1f232c;
-  --text-color: #e5f7ef;
-  --error-color: #ff5f5f;
-  --error-extra-color: #d22a2a;
-  --colorful-error-color: #ff5f5f;
-  --colorful-error-extra-color: #d22a2a;
-}
diff --git a/frontend/static/themes/sweden.css b/frontend/static/themes/sweden.css
deleted file mode 100644
index 25aa0a038bf5..000000000000
--- a/frontend/static/themes/sweden.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #0058a3;
-  --main-color: #ffcc02;
-  --caret-color: #b5b5b5;
-  --sub-color: #57abdb;
-  --sub-alt-color: #024f8e;
-  --text-color: #ffffff;
-  --error-color: #e74040;
-  --error-extra-color: #a22f2f;
-  --colorful-error-color: #f56674;
-  --colorful-error-extra-color: #e33546;
-}
diff --git a/frontend/static/themes/tangerine.css b/frontend/static/themes/tangerine.css
deleted file mode 100644
index 853d2c26daea..000000000000
--- a/frontend/static/themes/tangerine.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #ffede0;
-  --main-color: #fe5503;
-  --caret-color: #5d8500;
-  --sub-color: #ff9562;
-  --sub-alt-color: #fdd3bf;
-  --text-color: #3d1705;
-  --error-color: #7fb500;
-  --error-extra-color: #5f8700;
-  --colorful-error-color: #7fb500;
-  --colorful-error-extra-color: #5f8700;
-}
diff --git a/frontend/static/themes/taro.css b/frontend/static/themes/taro.css
index 2ba361b2f0c6..85ae4b6eb01b 100644
--- a/frontend/static/themes/taro.css
+++ b/frontend/static/themes/taro.css
@@ -1,17 +1,3 @@
-:root {
-  /* --bg-color: linear-gradient(215deg, #cbb8ba, #706768); */
-  --bg-color: #b3baff;
-  --main-color: #130f1a;
-  --caret-color: #00e9e5;
-  --sub-color: #6f6c91;
-  --sub-alt-color: #a3a7df;
-  --text-color: #130f1a;
-  --error-color: #ffe23e;
-  --error-extra-color: #fff1c3;
-  --colorful-error-color: #ffe23e;
-  --colorful-error-extra-color: #fff1c3;
-}
-
 .word.error {
   border-bottom: dotted 2px var(--text-color);
 }
diff --git a/frontend/static/themes/terminal.css b/frontend/static/themes/terminal.css
deleted file mode 100644
index 9297ba947b00..000000000000
--- a/frontend/static/themes/terminal.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #191a1b;
-  --caret-color: #79a617;
-  --main-color: #79a617;
-  --sub-color: #48494b;
-  --sub-alt-color: #141516;
-  --text-color: #e7eae0;
-  --error-color: #a61717;
-  --error-extra-color: #731010;
-  --colorful-error-color: #a61717;
-  --colorful-error-extra-color: #731010;
-}
diff --git a/frontend/static/themes/terra.css b/frontend/static/themes/terra.css
deleted file mode 100644
index ebd08c383392..000000000000
--- a/frontend/static/themes/terra.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #0c100e;
-  --main-color: #89c559;
-  --caret-color: #89c559;
-  --sub-color: #436029;
-  --sub-alt-color: #0f1d18;
-  --text-color: #f0edd1;
-  --error-color: #d3ca78;
-  --error-extra-color: #89844d;
-  --colorful-error-color: #d3ca78;
-  --colorful-error-extra-color: #89844d;
-}
diff --git a/frontend/static/themes/terrazzo.css b/frontend/static/themes/terrazzo.css
index 852ded94039e..141625d9ef04 100644
--- a/frontend/static/themes/terrazzo.css
+++ b/frontend/static/themes/terrazzo.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #f1e5da;
-  --main-color: #e0794e;
-  --caret-color: #e0794e;
-  --sub-color: #688e8f;
-  --sub-alt-color: #e3d3c6;
-  --text-color: #023e3b;
-  --error-color: #a01034;
-  --error-extra-color: #a01034;
-  --colorful-error-color: #a01034;
-  --colorful-error-extra-color: #a01034;
-}
-
 /* hide buttons while typing */
 header.focus nav > .textButton {
   background: none;
diff --git a/frontend/static/themes/terror_below.css b/frontend/static/themes/terror_below.css
deleted file mode 100644
index 4532483efeed..000000000000
--- a/frontend/static/themes/terror_below.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #0b1e1a;
-  --caret-color: #66ac92;
-  --main-color: #66ac92;
-  --sub-color: #015c53;
-  --sub-alt-color: #041715;
-  --text-color: #dceae5;
-  --error-color: #bf616a;
-  --error-extra-color: #793e44;
-  --colorful-error-color: #bf616a;
-  --colorful-error-extra-color: #793e44;
-}
diff --git a/frontend/static/themes/tiramisu.css b/frontend/static/themes/tiramisu.css
deleted file mode 100644
index 8eb2abf46b88..000000000000
--- a/frontend/static/themes/tiramisu.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #cfc6b9;
-  --main-color: #c0976f;
-  --caret-color: #7d5448;
-  --sub-color: #c0976f;
-  --sub-alt-color: #d0bca7;
-  --text-color: #7d5448;
-  --error-color: #e9632d;
-  --error-extra-color: #e9632d;
-  --colorful-error-color: #e9632d;
-  --colorful-error-extra-color: #e9632d;
-}
diff --git a/frontend/static/themes/trackday.css b/frontend/static/themes/trackday.css
index 3eb531213d46..d972d8b1f488 100644
--- a/frontend/static/themes/trackday.css
+++ b/frontend/static/themes/trackday.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #464d66;
-  --main-color: #e0513e;
-  --caret-color: #475782;
-  --sub-color: #5c7eb9;
-  --sub-alt-color: #3d4359;
-  --text-color: #cfcfcf;
-  --error-color: #e44e4e;
-  --error-extra-color: #fd3f3f;
-  --colorful-error-color: #ff2e2e;
-  --colorful-error-extra-color: #bb2525;
-}
-
 nav > .textButton:nth-child(1) {
   color: #e0513e;
 }
diff --git a/frontend/static/themes/trance.css b/frontend/static/themes/trance.css
index 08e1cf37654b..9d314fe4418d 100644
--- a/frontend/static/themes/trance.css
+++ b/frontend/static/themes/trance.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #00021b;
-  --main-color: #e51376;
-  --caret-color: #e51376;
-  --sub-color: #3c4c79;
-  --sub-alt-color: #18214c;
-  --text-color: #fff;
-  --error-color: #02d3b0;
-  --error-extra-color: #3f887c;
-  --colorful-error-color: #02d3b0;
-  --colorful-error-extra-color: #3f887c;
-}
-
 @keyframes trance {
   0% {
     color: #e51376;
diff --git a/frontend/static/themes/tron_orange.css b/frontend/static/themes/tron_orange.css
deleted file mode 100644
index 23dd35d79154..000000000000
--- a/frontend/static/themes/tron_orange.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #0d1c1c;
-  --main-color: #f0e800;
-  --caret-color: #f0e800;
-  --sub-color: #ff6600;
-  --sub-alt-color: #9c9191;
-  --text-color: #ffffff;
-  --error-color: #ff0000;
-  --error-extra-color: #ff0000;
-  --colorful-error-color: #ff0000;
-  --colorful-error-extra-color: #ff0000;
-}
diff --git a/frontend/static/themes/vaporwave.css b/frontend/static/themes/vaporwave.css
deleted file mode 100644
index e9d007c22373..000000000000
--- a/frontend/static/themes/vaporwave.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #a4a7ea;
-  --main-color: #e368da;
-  --caret-color: #28cafe;
-  --sub-color: #7c7faf;
-  --sub-alt-color: #989bd9;
-  --text-color: #f1ebf1;
-  --error-color: #573ca9;
-  --error-extra-color: #3d2b77;
-  --colorful-error-color: #28cafe;
-  --colorful-error-extra-color: #25a9ce;
-}
diff --git a/frontend/static/themes/vesper.css b/frontend/static/themes/vesper.css
index c13b9a85e7fa..daacec339263 100644
--- a/frontend/static/themes/vesper.css
+++ b/frontend/static/themes/vesper.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #101010;
-  --main-color: #ffc799;
-  --caret-color: #99ffe4;
-  --sub-color: #a0a0a0;
-  --sub-alt-color: #1c1c1c;
-  --text-color: #ffffff;
-  --error-color: #ff8080;
-  --error-extra-color: #b25959;
-  --colorful-error-color: #ff8080;
-  --colorful-error-extra-color: #b25959;
-}
-
 /* Background & Text Colors */
 #notificationCenter .notif.bad {
   --notif-border-color: #b25959;
diff --git a/frontend/static/themes/vesper_light.css b/frontend/static/themes/vesper_light.css
index 00e227249399..d8c4e586c75a 100644
--- a/frontend/static/themes/vesper_light.css
+++ b/frontend/static/themes/vesper_light.css
@@ -1,16 +1,3 @@
-:root {
-  --bg-color: #ffffff;
-  --main-color: #fb7100;
-  --caret-color: #067a6e;
-  --sub-color: #a0a0a0;
-  --sub-alt-color: #fff8f4;
-  --text-color: #000000;
-  --error-color: #ed2839;
-  --error-extra-color: #ff6c72;
-  --colorful-error-color: #ed2839;
-  --colorful-error-extra-color: #ff6c72;
-}
-
 #testConfig .spacer {
   background: #efefef;
 }
diff --git a/frontend/static/themes/viridescent.css b/frontend/static/themes/viridescent.css
deleted file mode 100644
index f0bcaca8d446..000000000000
--- a/frontend/static/themes/viridescent.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #2c3333;
-  --main-color: #95d5b2;
-  --caret-color: #f0d3c9;
-  --sub-color: #84a98c;
-  --sub-alt-color: #232828;
-  --text-color: #e9f5db;
-  --error-color: #ff4646;
-  --error-extra-color: #ab2f2f;
-  --colorful-error-color: #bd4141;
-  --colorful-error-extra-color: #883434;
-}
diff --git a/frontend/static/themes/voc.css b/frontend/static/themes/voc.css
deleted file mode 100644
index bc80ba861e01..000000000000
--- a/frontend/static/themes/voc.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #190618;
-  --main-color: #e0caac;
-  --caret-color: #e0caac;
-  --sub-color: #4c1e48;
-  --sub-alt-color: #2c0c28;
-  --text-color: #eeeae4;
-  --error-color: #af3735;
-  --error-extra-color: #7e2a29;
-  --colorful-error-color: #af3735;
-  --colorful-error-extra-color: #7e2a29;
-}
diff --git a/frontend/static/themes/vscode.css b/frontend/static/themes/vscode.css
deleted file mode 100644
index 7fd41d46db61..000000000000
--- a/frontend/static/themes/vscode.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #1e1e1e;
-  --main-color: #007acc;
-  --caret-color: #569cd6;
-  --sub-color: #4d4d4d;
-  --sub-alt-color: #191919;
-  --text-color: #d4d4d4;
-  --error-color: #f44747;
-  --error-extra-color: #f44747;
-  --colorful-error-color: #f44747;
-  --colorful-error-extra-color: #f44747;
-}
diff --git a/frontend/static/themes/watermelon.css b/frontend/static/themes/watermelon.css
deleted file mode 100644
index c8c40e9459a7..000000000000
--- a/frontend/static/themes/watermelon.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #1f4437;
-  --main-color: #d6686f;
-  --caret-color: #d6686f;
-  --sub-color: #3e7a65;
-  --sub-alt-color: #244d3f;
-  --text-color: #cdc6bc;
-  --error-color: #c82931;
-  --error-extra-color: #ac1823;
-  --colorful-error-color: #c82931;
-  --colorful-error-extra-color: #ac1823;
-}
diff --git a/frontend/static/themes/wavez.css b/frontend/static/themes/wavez.css
deleted file mode 100644
index 4b383f00720d..000000000000
--- a/frontend/static/themes/wavez.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #1c292f;
-  --main-color: #6bde3b;
-  --caret-color: #6bde3b;
-  --sub-color: #1f5e6b;
-  --sub-alt-color: #1b3238;
-  --text-color: #e9efe6;
-  --error-color: #ca4754;
-  --error-extra-color: #7e2a33;
-  --colorful-error-color: #ca4754;
-  --colorful-error-extra-color: #7e2a33;
-}
diff --git a/frontend/static/themes/witch_girl.css b/frontend/static/themes/witch_girl.css
deleted file mode 100644
index df603eef4964..000000000000
--- a/frontend/static/themes/witch_girl.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --bg-color: #f3dbda;
-  --main-color: #56786a;
-  --caret-color: #afc5bd;
-  --sub-color: #ddb4a7;
-  --sub-alt-color: #e7c8be;
-  --text-color: #56786a;
-  --error-color: #b29a91;
-  --error-extra-color: #b29a91;
-  --colorful-error-color: #b29a91;
-  --colorful-error-extra-color: #b29a91;
-}

From b3efd3d6f4917e986578ef9f0b9a2aa532e96273 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 15 Jan 2026 17:55:35 +0100
Subject: [PATCH 07/51] add loader and error handling to css loading

---
 frontend/src/ts/components/layout/Theme.tsx   | 19 +++++++++++++++----
 .../src/ts/controllers/theme-controller.ts    |  5 -----
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/src/ts/components/layout/Theme.tsx b/frontend/src/ts/components/layout/Theme.tsx
index 62dfc85976c1..a291a48f70ed 100644
--- a/frontend/src/ts/components/layout/Theme.tsx
+++ b/frontend/src/ts/components/layout/Theme.tsx
@@ -4,6 +4,8 @@ import { useRefWithUtils } from "../../hooks/useRefWithUtils";
 import { getThemeIndicator } from "../../signals/core";
 import { themes, Theme as ThemeType } from "../../constants/themes";
 import { ThemeName } from "@monkeytype/schemas/configs";
+import * as Loader from "../../elements/loader";
+import * as Notifications from "../../elements/notifications";
 
 export function Theme(): JSXElement {
   // Refs are assigned by SolidJS via the ref attribute
@@ -35,13 +37,22 @@ export function Theme(): JSXElement {
   });
 
   createEffect(() => {
-    //console.log("#### update css", themeName());
-    const theme: ThemeType | undefined = themes[themeName() as ThemeName];
+    const name = themeName();
+    const theme: ThemeType | undefined = themes[name as ThemeName];
+    console.debug("Theme controller loading style", name);
 
     const cssFile = theme?.hasCss ? `/themes/${themeName()}.css` : "";
 
-    //TODO move the code here or add loader animation?
-    //void loadStyle(themeName(), { hasCss: theme?.hasCss ?? false });
+    if (cssFile !== "") Loader.show();
+    linkEl()?.on("load", () => {
+      console.debug("Theme controller loaded style", name);
+      Loader.hide();
+    });
+    linkEl()?.on("error", (e) => {
+      console.debug("Theme controller failed to load style", name, e);
+      console.error(`Failed to load theme ${name}`, e);
+      Notifications.add("Failed to load theme", 0);
+    });
     linkEl()?.setAttribute("href", cssFile);
   });
 
diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index 1af145118c81..1ad91f1e8720 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -207,16 +207,11 @@ async function apply(
     }
   }*/
 
-  qsa("#keymap .keymapKey")?.setStyle({});
-  //TODO moved
-  //await loadStyle(name, { hasCss: themeColors.hasCss ?? false });
-
   //TODO not needed?!
   //if (name !== "custom") {
   //    clearCustomTheme();
   //  }
 
-  // if (!isPreview) {
   qsa("#keymap .keymapKey")?.setStyle({});
   ChartController.updateAllChartColors();
   void updateFavicon();

From c4bd55f052d2ad9076aebdbda1c29a8c802d2434 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 15 Jan 2026 19:17:45 +0100
Subject: [PATCH 08/51] fix color picker, remove colorVars

---
 frontend/src/html/pages/settings.html         | 139 ++++++------------
 frontend/src/ts/components/layout/Theme.tsx   |  10 +-
 .../src/ts/controllers/theme-controller.ts    |  81 ++++------
 .../src/ts/elements/settings/theme-picker.ts  | 116 +++++++--------
 frontend/src/ts/modals/share-custom-theme.ts  |   9 +-
 frontend/src/ts/modals/simple-modals.ts       |  25 ++--
 6 files changed, 143 insertions(+), 237 deletions(-)

diff --git a/frontend/src/html/pages/settings.html b/frontend/src/html/pages/settings.html
index d15168db53ef..4db59d3e4745 100644
--- a/frontend/src/html/pages/settings.html
+++ b/frontend/src/html/pages/settings.html
@@ -1535,15 +1535,10 @@
           <div class="customThemeInputs">
             <div class="customThemeInput">
               <label class="colorText">background</label>
-              <div class="colorPicker inputAndButton">
-                <input
-                  type="text"
-                  value="#000000"
-                  class="input"
-                  id="--bg-color-txt"
-                />
+              <div class="colorPicker inputAndButton" data-key="bg">
+                <input type="text" value="#000000" class="input" />
                 <label
-                  for="--bg-color"
+                  for="colorPickerBg"
                   class="button"
                   style="
                     color: var(--text-color);
@@ -1556,22 +1551,16 @@
                   type="color"
                   class="color"
                   value="#000000"
-                  id="--bg-color"
-                  data-key="bg"
+                  id="colorPickerBg"
                 />
               </div>
             </div>
             <div class="customThemeInput">
               <label class="colorText">sub alt</label>
-              <div class="colorPicker inputAndButton">
-                <input
-                  type="text"
-                  value="#000000"
-                  class="input"
-                  id="--sub-alt-color-txt"
-                />
+              <div class="colorPicker inputAndButton" data-key="subAlt">
+                <input type="text" value="#000000" class="input" />
                 <label
-                  for="--sub-alt-color"
+                  for="colorPickerSubAlt"
                   class="button"
                   style="
                     color: var(--text-color);
@@ -1584,41 +1573,29 @@
                   type="color"
                   class="color"
                   value="#000000"
-                  id="--sub-alt-color"
-                  data-key="subAlt"
+                  id="colorPickerSubAlt"
                 />
               </div>
             </div>
             <div class="customThemeInput">
               <label class="colorText">main</label>
-              <div class="colorPicker inputAndButton">
-                <input
-                  type="text"
-                  value="#000000"
-                  class="input"
-                  id="--main-color-txt"
-                />
-                <label for="--main-color" class="button">
+              <div class="colorPicker inputAndButton" data-key="main">
+                <input type="text" value="#000000" class="input" />
+                <label for="colorPickerMain" class="button">
                   <i class="fas fa-fw fa-palette"></i>
                 </label>
                 <input
                   type="color"
                   class="color"
                   value="#000000"
-                  id="--main-color"
-                  data-key="main"
+                  id="colorPickerMain"
                 />
               </div>
             </div>
             <div class="customThemeInput">
               <label class="colorText">sub</label>
-              <div class="colorPicker inputAndButton">
-                <input
-                  type="text"
-                  value="#000000"
-                  class="input"
-                  id="--sub-color-txt"
-                />
+              <div class="colorPicker inputAndButton" data-key="sub">
+                <input type="text" value="#000000" class="input" />
                 <label for="--sub-color" class="button">
                   <i class="fas fa-fw fa-palette"></i>
                 </label>
@@ -1627,49 +1604,36 @@
                   class="color"
                   value="#000000"
                   id="--sub-color"
-                  data-key="sub"
                 />
               </div>
             </div>
             <div class="customThemeInput">
               <label class="colorText">caret</label>
-              <div class="colorPicker inputAndButton">
-                <input
-                  type="text"
-                  value="#000000"
-                  class="input"
-                  id="--caret-color-txt"
-                />
-                <label for="--caret-color" class="button">
+              <div class="colorPicker inputAndButton" data-key="caret">
+                <input type="text" value="#000000" class="input" />
+                <label for="colorPickerCaret" class="button">
                   <i class="fas fa-fw fa-palette"></i>
                 </label>
                 <input
                   type="color"
                   class="color"
                   value="#000000"
-                  id="--caret-color"
-                  data-key="caret"
+                  id="colorPickerCaret"
                 />
               </div>
             </div>
             <div class="customThemeInput">
               <label class="colorText">text</label>
-              <div class="colorPicker inputAndButton">
-                <input
-                  type="text"
-                  value="#000000"
-                  class="input"
-                  id="--text-color-txt"
-                />
-                <label for="--text-color" class="button">
+              <div class="colorPicker inputAndButton" data-key="text">
+                <input type="text" value="#000000" class="input" />
+                <label for="colorPickerText" class="button">
                   <i class="fas fa-fw fa-palette"></i>
                 </label>
                 <input
                   type="color"
                   class="color"
                   value="#000000"
-                  id="--text-color"
-                  data-key="text"
+                  id="colorPickerText"
                 />
               </div>
             </div>
@@ -1678,43 +1642,31 @@
 
             <div class="customThemeInput">
               <label class="colorText">error</label>
-              <div class="colorPicker inputAndButton">
-                <input
-                  type="text"
-                  value="#000000"
-                  class="input"
-                  id="--error-color-txt"
-                />
-                <label for="--error-color" class="button">
+              <div class="colorPicker inputAndButton" data-key="error">
+                <input type="text" value="#000000" class="input" />
+                <label for="colorPickerError" class="button">
                   <i class="fas fa-fw fa-palette"></i>
                 </label>
                 <input
                   type="color"
                   class="color"
                   value="#000000"
-                  id="--error-color"
-                  data-key="error"
+                  id="colorPickerError"
                 />
               </div>
             </div>
             <div class="customThemeInput">
               <label class="colorText">extra error</label>
-              <div class="colorPicker inputAndButton">
-                <input
-                  type="text"
-                  value="#000000"
-                  class="input"
-                  id="--error-extra-color-txt"
-                />
-                <label for="--error-extra-color" class="button">
+              <div class="colorPicker inputAndButton" data-key="errorExtra">
+                <input type="text" value="#000000" class="input" />
+                <label for="colorPickerExtraError" class="button">
                   <i class="fas fa-fw fa-palette"></i>
                 </label>
                 <input
                   type="color"
                   class="color"
                   value="#000000"
-                  id="--error-extra-color"
-                  data-key="errorExtra"
+                  id="colorPickerExtraError"
                 />
               </div>
             </div>
@@ -1722,43 +1674,34 @@
             <span class="colorfulHeader">colorful mode</span>
             <div class="customThemeInput">
               <label class="colorText">error</label>
-              <div class="colorPicker inputAndButton">
-                <input
-                  type="text"
-                  value="#000000"
-                  class="input"
-                  id="--colorful-error-color-txt"
-                />
-                <label for="--colorful-error-color" class="button">
+              <div class="colorPicker inputAndButton" data-key="colorfulError">
+                <input type="text" value="#000000" class="input" />
+                <label for="colorPickerColorfulError" class="button">
                   <i class="fas fa-fw fa-palette"></i>
                 </label>
                 <input
                   type="color"
                   class="color"
                   value="#000000"
-                  id="--colorful-error-color"
-                  data-key="colorfulError"
+                  id="colorPickerColorfulError"
                 />
               </div>
             </div>
             <div class="customThemeInput">
               <label class="colorText">extra error</label>
-              <div class="colorPicker inputAndButton">
-                <input
-                  type="text"
-                  value="#000000"
-                  class="input"
-                  id="--colorful-error-extra-color-txt"
-                />
-                <label for="--colorful-error-extra-color" class="button">
+              <div
+                class="colorPicker inputAndButton"
+                data-key="colorfulErrorExtra"
+              >
+                <input type="text" value="#000000" class="input" />
+                <label for="colorPickerColorfulErrorExtra" class="button">
                   <i class="fas fa-fw fa-palette"></i>
                 </label>
                 <input
                   type="color"
                   class="color"
                   value="#000000"
-                  id="--colorful-error-extra-color"
-                  data-key="colorfulErrorExtra"
+                  id="colorPickerColorfulErrorExtra"
                 />
               </div>
             </div>
diff --git a/frontend/src/ts/components/layout/Theme.tsx b/frontend/src/ts/components/layout/Theme.tsx
index a291a48f70ed..8184ef28db47 100644
--- a/frontend/src/ts/components/layout/Theme.tsx
+++ b/frontend/src/ts/components/layout/Theme.tsx
@@ -18,7 +18,7 @@ export function Theme(): JSXElement {
 
   createEffect(() => {
     const colors = themeColors();
-    console.debug("Theme update colors", themeColors());
+    console.debug("Theme controller update colors", colors);
     styleEl()?.setHtml(`
 :root {
 
@@ -41,11 +41,11 @@ export function Theme(): JSXElement {
     const theme: ThemeType | undefined = themes[name as ThemeName];
     console.debug("Theme controller loading style", name);
 
-    const cssFile = theme?.hasCss ? `/themes/${themeName()}.css` : "";
+    const hasCss = theme?.hasCss ?? false;
 
-    if (cssFile !== "") Loader.show();
+    if (hasCss) Loader.show();
     linkEl()?.on("load", () => {
-      console.debug("Theme controller loaded style", name);
+      if (hasCss) console.debug("Theme controller loaded style", name);
       Loader.hide();
     });
     linkEl()?.on("error", (e) => {
@@ -53,7 +53,7 @@ export function Theme(): JSXElement {
       console.error(`Failed to load theme ${name}`, e);
       Notifications.add("Failed to load theme", 0);
     });
-    linkEl()?.setAttribute("href", cssFile);
+    linkEl()?.setAttribute("href", hasCss ? `/themes/${themeName()}.css` : "");
   });
 
   return (
diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index 1ad91f1e8720..9bfc0f97a447 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -8,7 +8,7 @@ import * as ConfigEvent from "../observables/config-event";
 import * as DB from "../db";
 import * as Notifications from "../elements/notifications";
 import { debounce } from "throttle-debounce";
-import { ThemeName } from "@monkeytype/schemas/configs";
+import { CustomThemeColors, ThemeName } from "@monkeytype/schemas/configs";
 import { Theme, themes, ThemesList } from "../constants/themes";
 import fileStorage from "../utils/file-storage";
 import { qs, qsa } from "../utils/dom";
@@ -19,19 +19,6 @@ export let randomTheme: ThemeName | string | null = null;
 let isPreviewingTheme = false;
 let randomThemeIndex = 0;
 
-export const colorVars = [
-  "--bg-color",
-  "--main-color",
-  "--caret-color",
-  "--sub-color",
-  "--sub-alt-color",
-  "--text-color",
-  "--error-color",
-  "--error-extra-color",
-  "--colorful-error-color",
-  "--colorful-error-extra-color",
-];
-
 async function updateFavicon(): Promise<void> {
   setTimeout(async () => {
     let { main, bg } = getThemeColors();
@@ -62,13 +49,6 @@ async function updateFavicon(): Promise<void> {
   }, 125);
 }
 
-function _clearCustomTheme(): void {
-  console.debug("Theme controller clearing custom theme");
-  for (const e of colorVars) {
-    document.documentElement.style.setProperty(e, "");
-  }
-}
-
 export function applyPreset(name: ThemeName): void {
   void apply(name);
 }
@@ -152,24 +132,38 @@ export async function loadStyle(
 //   UpdateConfig.setConfig("customThemeColors", colors,nosave);
 // }
 
-export function convertCustomColorsToTheme(colors: string[]): Theme {
+export function convertCustomColorsToTheme(colors: CustomThemeColors): Theme {
   return {
-    bg: colors[0] as string,
-    main: colors[1] as string,
-    caret: colors[2] as string,
-    sub: colors[3] as string,
-    subAlt: colors[4] as string,
-    text: colors[5] as string,
-    error: colors[6] as string,
-    errorExtra: colors[7] as string,
-    colorfulError: colors[8] as string,
-    colorfulErrorExtra: colors[9] as string,
+    bg: colors[0],
+    main: colors[1],
+    caret: colors[2],
+    sub: colors[3],
+    subAlt: colors[4],
+    text: colors[5],
+    error: colors[6],
+    errorExtra: colors[7],
+    colorfulError: colors[8],
+    colorfulErrorExtra: colors[9],
   };
 }
+export function convertThemeToCustomColors(theme: Theme): CustomThemeColors {
+  return [
+    theme.bg,
+    theme.main,
+    theme.caret,
+    theme.sub,
+    theme.subAlt,
+    theme.text,
+    theme.error,
+    theme.errorExtra,
+    theme.colorfulError,
+    theme.colorfulErrorExtra,
+  ];
+}
 
 async function apply(
   themeName: string,
-  customColorsOverride?: string[],
+  customColorsOverride?: CustomThemeColors,
   isPreview = false,
 ): Promise<void> {
   console.debug(
@@ -197,21 +191,6 @@ async function apply(
   });
   setThemeColor(themeColors);
 
-  /*
-  if ((Config.customTheme && !isPreview) || customColorsOverride) {
-    const colors = customColorsOverride ?? Config.customThemeColors;
-
-    for (let i = 0; i < colorVars.length; i++) {
-      const colorVar = colorVars[i] as string;
-      document.documentElement.style.setProperty(colorVar, colors[i] as string);
-    }
-  }*/
-
-  //TODO not needed?!
-  //if (name !== "custom") {
-  //    clearCustomTheme();
-  //  }
-
   qsa("#keymap .keymapKey")?.setStyle({});
   ChartController.updateAllChartColors();
   void updateFavicon();
@@ -245,14 +224,14 @@ function updateFooterIndicator(nameOverride?: string): void {
 
 type PreviewState = {
   theme: string;
-  colors?: string[];
+  colors?: CustomThemeColors;
 } | null;
 
 let previewState: PreviewState = null;
 
 export function preview(
   themeIdentifier: string,
-  customColorsOverride?: string[],
+  customColorsOverride?: CustomThemeColors,
 ): void {
   previewState = { theme: themeIdentifier, colors: customColorsOverride };
   debouncedPreview();
@@ -342,7 +321,7 @@ export async function randomizeTheme(): Promise<void> {
     }
   } while (!filter(nextTheme.bg));
 
-  let colorsOverride: string[] | undefined;
+  let colorsOverride: CustomThemeColors | undefined;
 
   if (Config.randomTheme === "custom") {
     const theme = DB.getSnapshot()?.customThemes?.find(
diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index ae3feaf3db82..a87caa609933 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -8,7 +8,7 @@ import * as DB from "../../db";
 import * as ConfigEvent from "../../observables/config-event";
 import { isAuthenticated } from "../../firebase";
 import { getActivePage } from "../../signals/core";
-import { CustomThemeColors, ThemeName } from "@monkeytype/schemas/configs";
+import { ThemeName } from "@monkeytype/schemas/configs";
 import { captureException } from "../../sentry";
 import { ColorName, ThemesListSorted } from "../../constants/themes";
 import { qs, qsa, qsr } from "../../utils/dom";
@@ -37,61 +37,19 @@ function updateActiveButton(): void {
 }
 
 function updateColors(key: ColorName, color: string, onlyStyle = false): void {
-  const colorPicker = qsr(`.colorPicker input[data-key="${key}"]`).getParent();
+  const colorPicker = qsr(`.colorPicker[data-key="${key}"]`);
   if (colorPicker === null) return;
 
-  console.log("#### update colors", { key, color, onlyStyle });
   if (!onlyStyle) {
-    const colorREGEX = [
-      {
-        rule: /\b[0-9]{1,3},\s?[0-9]{1,3},\s?[0-9]{1,3}\s*\b/,
-        start: "rgb(",
-        end: ")",
-      },
-      {
-        rule: /\b[A-Z, a-z, 0-9]{6}\b/,
-        start: "#",
-        end: "",
-      },
-      {
-        rule: /\b[0-9]{1,3},\s?[0-9]{1,3}%,\s?[0-9]{1,3}%?\s*\b/,
-        start: "hsl(",
-        end: ")",
-      },
-    ];
-
-    color = color.replace("°", "");
-
-    for (const regex of colorREGEX) {
-      if (color.match(regex.rule)) {
-        color = regex.start + color + regex.end;
-        break;
-      }
-    }
-
-    color = color.replace("##", "#");
-
-    $(".colorConverter").css("color", color);
-    const hexColor: string | undefined = Colors.rgbStringtoHex(
-      $(".colorConverter").css("color"),
-    );
-    if (hexColor === undefined) {
-      return;
-    }
-
-    color = hexColor;
+    color = convertColorToHex(color) ?? color;
   }
 
   updateThemeColor(key, color);
-  /* handled by theme-controller
-    if (!noThemeUpdate && colorID !== undefined) {
-      document.documentElement.style.setProperty(colorID, color);
-    }
-    */
+
   const pickerButton = colorPicker.qsr<HTMLLabelElement>("label");
   pickerButton.setAttribute("value", color);
-  if (pickerButton.getAttribute("for") !== "--bg-color") {
-    pickerButton.setStyle({ backgroundColor: color });
+  if (key === "bg") {
+    //don't update the color for the background picker
   }
   colorPicker.qsr<HTMLInputElement>("input.input").setValue(color);
   colorPicker.qsr("input.color").setAttribute("value", color);
@@ -235,12 +193,11 @@ export function setCustomInputs(): void {
     Config.customThemeColors,
   );
   qsa<HTMLInputElement>(
-    ".pageSettings .section.themes .tabContainer .customTheme .colorPicker input[type=color]",
+    ".pageSettings .section.themes .tabContainer .customTheme .colorPicker",
   ).forEach((element) => {
     const key = element.getAttribute("data-key") as ColorName;
     const color = theme[key] as string;
     updateColors(key, color, false);
-    //updateColors($(element), currentColor, false);
   });
 }
 
@@ -261,15 +218,9 @@ function toggleFavourite(themeName: ThemeName): void {
 }
 
 function saveCustomThemeColors(): void {
-  const newColors: string[] = [];
-  for (const color of ThemeController.colorVars) {
-    newColors.push(
-      $(`.pageSettings .tabContent.customTheme #${color}[type='color']`).attr(
-        "value",
-      ) as string,
-    );
-  }
-  setConfig("customThemeColors", newColors as CustomThemeColors);
+  const colors = ThemeController.convertThemeToCustomColors(getThemeColors());
+
+  setConfig("customThemeColors", colors);
   Notifications.add("Custom theme saved", 1);
 }
 
@@ -304,6 +255,48 @@ export async function updateThemeUI(): Promise<void> {
   updateActiveButton();
 }
 
+/**
+ *  some system color pickers return rgb or hsl values. We need to convert them to hex before storing
+ * @param color as hex, hsl or rgb
+ * @returns  hex color
+ */
+function convertColorToHex(color: string): string | undefined {
+  const colorREGEX = [
+    {
+      rule: /\b[0-9]{1,3},\s?[0-9]{1,3},\s?[0-9]{1,3}\s*\b/,
+      start: "rgb(",
+      end: ")",
+    },
+    {
+      rule: /\b[A-Z, a-z, 0-9]{6}\b/,
+      start: "#",
+      end: "",
+    },
+    {
+      rule: /\b[0-9]{1,3},\s?[0-9]{1,3}%,\s?[0-9]{1,3}%?\s*\b/,
+      start: "hsl(",
+      end: ")",
+    },
+  ];
+
+  color = color.replace("°", "");
+
+  for (const regex of colorREGEX) {
+    if (color.match(regex.rule)) {
+      color = regex.start + color + regex.end;
+      break;
+    }
+  }
+
+  color = color.replace("##", "#");
+
+  $(".colorConverter").css("color", color);
+  const hexColor: string | undefined = Colors.rgbStringtoHex(
+    $(".colorConverter").css("color"),
+  );
+  return hexColor;
+}
+
 // Add events to the DOM
 
 // Handle click on theme: preset or custom tab
@@ -366,10 +359,13 @@ $(".pageSettings").on("click", ".section.themes .theme.button", (e) => {
 
 function handleColorInput(e: Event): void {
   const target = e.currentTarget as HTMLInputElement;
-  const key = target.getAttribute("data-key") as ColorName;
+  const key = target
+    ?.closest(".colorPicker")
+    ?.getAttribute("data-key") as ColorName;
 
   updateColors(key, target.value, true);
 }
+
 qsa(
   ".pageSettings .section.themes .tabContainer .customTheme input[type=color]",
 )
diff --git a/frontend/src/ts/modals/share-custom-theme.ts b/frontend/src/ts/modals/share-custom-theme.ts
index e50185823474..f64809ad5189 100644
--- a/frontend/src/ts/modals/share-custom-theme.ts
+++ b/frontend/src/ts/modals/share-custom-theme.ts
@@ -2,7 +2,7 @@ import * as ThemeController from "../controllers/theme-controller";
 import Config from "../config";
 import * as Notifications from "../elements/notifications";
 import AnimatedModal from "../utils/animated-modal";
-import { qsr } from "../utils/dom";
+import { getThemeColors } from "../signals/theme";
 
 type State = {
   includeBackground: boolean;
@@ -28,12 +28,7 @@ async function generateUrl(): Promise<string> {
     s?: string; //size
     f?: object; //filter
   } = {
-    c: ThemeController.colorVars.map(
-      (color) =>
-        qsr<HTMLInputElement>(
-          `.pageSettings .tabContent.customTheme #${color}[type='color']`,
-        ).getValue() as string,
-    ),
+    c: ThemeController.convertThemeToCustomColors(getThemeColors()),
   };
 
   if (state.includeBackground) {
diff --git a/frontend/src/ts/modals/simple-modals.ts b/frontend/src/ts/modals/simple-modals.ts
index a0b2baca2d54..f1726ee24194 100644
--- a/frontend/src/ts/modals/simple-modals.ts
+++ b/frontend/src/ts/modals/simple-modals.ts
@@ -27,7 +27,6 @@ import {
 } from "../utils/misc";
 import * as CustomTextState from "../states/custom-text-name";
 import * as ThemeController from "../controllers/theme-controller";
-import { CustomThemeColors } from "@monkeytype/schemas/configs";
 import * as AccountSettings from "../pages/account-settings";
 import {
   ExecReturn,
@@ -46,8 +45,10 @@ import { goToPage } from "../pages/leaderboards";
 import FileStorage from "../utils/file-storage";
 import { z } from "zod";
 import { remoteValidation } from "../utils/remote-validation";
-import { qs, qsr } from "../utils/dom";
+
+import { qs } from "../utils/dom";
 import { list, PopupKey, showPopup } from "./simple-modals-base";
+import { getThemeColors } from "../signals/theme";
 
 export { list, showPopup };
 export type { PopupKey };
@@ -1091,22 +1092,14 @@ list.updateCustomTheme = new SimpleModal({
       };
     }
 
-    let newColors: string[] = [];
-    if (updateColors === "true") {
-      for (const color of ThemeController.colorVars) {
-        newColors.push(
-          qsr<HTMLInputElement>(
-            `.pageSettings .tabContent.customTheme #${color}[type='color']`,
-          ).getValue() as string,
-        );
-      }
-    } else {
-      newColors = customTheme.colors;
-    }
+    let newColors =
+      updateColors === "true"
+        ? ThemeController.convertThemeToCustomColors(getThemeColors())
+        : customTheme.colors;
 
     const newTheme = {
       name: name.replaceAll(" ", "_"),
-      colors: newColors as CustomThemeColors,
+      colors: newColors,
     };
     const validation = await DB.editCustomTheme(customTheme._id, newTheme);
     if (!validation) {
@@ -1115,7 +1108,7 @@ list.updateCustomTheme = new SimpleModal({
         message: "Failed to update custom theme",
       };
     }
-    setConfig("customThemeColors", newColors as CustomThemeColors);
+    setConfig("customThemeColors", newColors);
     void ThemePicker.fillCustomButtons();
 
     return {

From 1fa02f42f009890297e9a7a855b374631ac478d7 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 15 Jan 2026 19:26:47 +0100
Subject: [PATCH 09/51] fallback variables

---
 frontend/src/html/head.html | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/frontend/src/html/head.html b/frontend/src/html/head.html
index 34e74e3dfdc2..9b0065f56454 100644
--- a/frontend/src/html/head.html
+++ b/frontend/src/html/head.html
@@ -26,6 +26,20 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Monkeytype | A minimalistic, customizable typing test</title>
+  <style id="themeFallback">
+    :root {
+      --bg-color: #323437;
+      --main-color: #e2b714;
+      --caret-color: #e2b714;
+      --sub-color: #646669;
+      --sub-alt-color: #2c2e31;
+      --text-color: #d1d0c5;
+      --error-color: #ca4754;
+      --error-extra-color: #7e2a33;
+      --colorful-error-color: #ca4754;
+      --colorful-error-extra-color: #7e2a33;
+    }
+  </style>
   <Theme />
   <link
     rel="icon"

From 57851748733bc4fda8672eed7ec6112a8459188c Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 15 Jan 2026 19:48:41 +0100
Subject: [PATCH 10/51] update themes documentation

---
 docs/THEMES.md | 79 +++++++++++++++++++++++++++++---------------------
 1 file changed, 46 insertions(+), 33 deletions(-)

diff --git a/docs/THEMES.md b/docs/THEMES.md
index d796d4b55e19..b80eebc684c7 100644
--- a/docs/THEMES.md
+++ b/docs/THEMES.md
@@ -13,55 +13,68 @@ First you will have to make a personal copy of the Monkeytype repository, also k
 
 ## Creating Themes
 
-After you have forked the repository you can now add your theme. Create a CSS file in `./frontend/static/themes/`. Call it whatever you want but make sure that it is all lowercase and replace spaces with underscores. It should look something like this:
-`theme_name.css`.
-
-Then add this code to your file:
-
-```css
-:root {
-  --bg-color: #ffffff;
-  --main-color: #ffffff;
-  --caret-color: #ffffff;
-  --sub-color: #ffffff;
-  --sub-alt-color: #ffffff;
-  --text-color: #ffffff;
-  --error-color: #ffffff;
-  --error-extra-color: #ffffff;
-  --colorful-error-color: #ffffff;
-  --colorful-error-extra-color: #ffffff;
-}
-```
-
-Here is an image showing what all the properties correspond to:
-<img width="1552" alt="Screenshot showing the page elements controlled by each color property" src="https://user-images.githubusercontent.com/83455454/149196967-abb69795-0d38-466b-a867-5aaa46452976.png">
+Pick a name for your theme. It must be all lowercase, with spaces replaced by underscores.
 
-Change the corresponding hex codes to create your theme.
-Then, go to `./packages/schemas/src/themes.ts` and add your new theme name at the _end_ of the `ThemeNameSchema` enum. Make sure to end the line with a comma.
+Go to `./packages/schemas/src/themes.ts` and add your new theme name to the __end__ of the `ThemeNameSchema` enum. Make sure to end the line with a comma.
 
 ```typescript
 export const ThemeNameSchema = z.enum([
   "8008",
   "80s_after_dark",
-  ...
+  ... all existing theme names
   "your_theme_name",
+]);
+```
+
+Then, go to `./frontend/src/ts/constants/themes.ts` and add the following code to the __end__ of the `themes` object near to the very end of the file:
+
+```typescript
+export const themes: Record<ThemeName, Theme>  = {
+  ... all existing themes
+  your_theme_name: {
+    bg: "#ffffff",
+    caret: "#ffffff",
+    main: "#ffffff",
+    sub: "#ffffff",
+    subAlt: "#ffffff",
+    text: "#ffffff",
+    error: "#ffffff",
+    errorExtra: "#ffffff",
+    colorfulError: "#ffffff",
+    colorfulErrorExtra: "#ffffff",
+  },
+}
 ```
 
-Then, go to `./frontend/src/ts/constants/themes.ts` and add the following code to the _end_ of the `themes` object near to the very end of the file:
+Here is an image showing what all the properties correspond to:
+<img width="1552" alt="Screenshot showing the page elements controlled by each color property" src="https://user-images.githubusercontent.com/83455454/149196967-abb69795-0d38-466b-a867-5aaa46452976.png">
+
+If you don't want to add any custom styling you can skip the next section.
+
+
+#### Adding custom CSS (optional)
+
+Create a CSS file in `./frontend/static/themes/` matching the name you picked earlier. Update the theme configuration in `./frontend/src/ts/constants/themes.ts`  and add `hasCss: true` like this:
 
 ```typescript
-export const themes: Record<ThemeName, Omit<Theme, "name">> = {
-  ...
+export const themes: Record<ThemeName, Theme>  = {
+  ... all existing themes
   your_theme_name: {
-    bgColor: "#ffffff",
-    mainColor: "#ffffff",
-    subColor: "#ffffff",
-    textColor: "#ffffff",
+    bg: "#ffffff",
+    caret: "#ffffff",
+    main: "#ffffff",
+    sub: "#ffffff",
+    subAlt: "#ffffff",
+    text: "#ffffff",
+    error: "#ffffff",
+    errorExtra: "#ffffff",
+    colorfulError: "#ffffff",
+    colorfulErrorExtra: "#ffffff",
+    hasCss: true,
   },
 }
 ```
 
-Make sure the name you put matches the name of the file you created (without the `.css` file extension). Add the text color and background color of your theme to their respective fields.
 
 ### Committing Themes
 

From 97cf5e95663c81335fb283b8e2bc2fae685d2a79 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 15 Jan 2026 19:49:42 +0100
Subject: [PATCH 11/51] update pr template

---
 .github/pull_request_template.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index dad9bfb5985e..44a5bb933664 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -17,14 +17,14 @@
   - Make sure to follow the [themes documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/THEMES.md)
   - [ ] Add theme to `packages/schemas/src/themes.ts`
   - [ ] Add theme to `frontend/src/ts/constants/themes.ts`
-  - [ ] Add theme css file to `frontend/static/themes`
+  - [ ] (optional) Add theme css file to `frontend/static/themes`
   - [ ] Add some screenshots of the theme, especially with different test settings (colorful, flip colors) to your pull request
 - [ ] Adding a layout?
   - [ ] Make sure to follow the [layouts documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/LAYOUTS.md)
   - [ ] Add layout to `packages/schemas/src/layouts.ts`
   - [ ] Add layout json file to `frontend/static/layouts`
 - [ ] Adding a font?
-  - Make sure to follow the [themes documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/FONTS.md)
+  - Make sure to follow the [fonts documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/FONTS.md)
   - [ ] Add font file to `frontend/static/webfonts`
   - [ ] Add font to `packages/schemas/src/fonts.ts`
   - [ ] Add font to `frontend/src/ts/constants/fonts.ts`

From aea03e6b62800a317e85fbf30c08c007af043d17 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 15 Jan 2026 19:56:43 +0100
Subject: [PATCH 12/51] review comments

---
 frontend/src/html/pages/settings.html             | 4 ++--
 frontend/src/ts/components/layout/Theme.tsx       | 2 +-
 frontend/src/ts/elements/settings/theme-picker.ts | 1 -
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/html/pages/settings.html b/frontend/src/html/pages/settings.html
index 4db59d3e4745..2af08f94bf9a 100644
--- a/frontend/src/html/pages/settings.html
+++ b/frontend/src/html/pages/settings.html
@@ -1596,14 +1596,14 @@
               <label class="colorText">sub</label>
               <div class="colorPicker inputAndButton" data-key="sub">
                 <input type="text" value="#000000" class="input" />
-                <label for="--sub-color" class="button">
+                <label for="colorPickerSub" class="button">
                   <i class="fas fa-fw fa-palette"></i>
                 </label>
                 <input
                   type="color"
                   class="color"
                   value="#000000"
-                  id="--sub-color"
+                  id="colorPickerSub"
                 />
               </div>
             </div>
diff --git a/frontend/src/ts/components/layout/Theme.tsx b/frontend/src/ts/components/layout/Theme.tsx
index 8184ef28db47..5af60697968f 100644
--- a/frontend/src/ts/components/layout/Theme.tsx
+++ b/frontend/src/ts/components/layout/Theme.tsx
@@ -29,7 +29,7 @@ export function Theme(): JSXElement {
     --sub-alt-color: ${colors.subAlt};
     --text-color: ${colors.text};
     --error-color: ${colors.error};
-    --error-extra-color:${colors.errorExtra};
+    --error-extra-color: ${colors.errorExtra};
     --colorful-error-color: ${colors.colorfulError};
     --colorful-error-extra-color: ${colors.colorfulErrorExtra};
 }
diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index a87caa609933..eb46ca969acc 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -38,7 +38,6 @@ function updateActiveButton(): void {
 
 function updateColors(key: ColorName, color: string, onlyStyle = false): void {
   const colorPicker = qsr(`.colorPicker[data-key="${key}"]`);
-  if (colorPicker === null) return;
 
   if (!onlyStyle) {
     color = convertColorToHex(color) ?? color;

From 60b2080105bec92034f655901e831988bbe912fa Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 15 Jan 2026 21:34:53 +0100
Subject: [PATCH 13/51] fix colorpicker buttons

---
 frontend/src/ts/elements/settings/theme-picker.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index eb46ca969acc..f94fe7524521 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -47,8 +47,9 @@ function updateColors(key: ColorName, color: string, onlyStyle = false): void {
 
   const pickerButton = colorPicker.qsr<HTMLLabelElement>("label");
   pickerButton.setAttribute("value", color);
-  if (key === "bg") {
+  if (key !== "bg") {
     //don't update the color for the background picker
+    pickerButton.setStyle({ backgroundColor: color });
   }
   colorPicker.qsr<HTMLInputElement>("input.input").setValue(color);
   colorPicker.qsr("input.color").setAttribute("value", color);

From 10b68e96c4b7a527c0d743cc41ebed5319f690fc Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 15 Jan 2026 21:41:28 +0100
Subject: [PATCH 14/51] speed up converter

---
 frontend/src/ts/elements/settings/theme-picker.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index f94fe7524521..d330abeebf8d 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -255,6 +255,7 @@ export async function updateThemeUI(): Promise<void> {
   updateActiveButton();
 }
 
+const converter = qsr(".colorConverter");
 /**
  *  some system color pickers return rgb or hsl values. We need to convert them to hex before storing
  * @param color as hex, hsl or rgb
@@ -290,9 +291,9 @@ function convertColorToHex(color: string): string | undefined {
 
   color = color.replace("##", "#");
 
-  $(".colorConverter").css("color", color);
+  converter.setStyle({ color: color });
   const hexColor: string | undefined = Colors.rgbStringtoHex(
-    $(".colorConverter").css("color"),
+    converter.native.style.color,
   );
   return hexColor;
 }

From a03bb633dfabb357536973977afcdaa69d1fccd8 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 15 Jan 2026 22:19:33 +0100
Subject: [PATCH 15/51] fix theme color reset, optimise convertToHex

---
 .../src/ts/elements/settings/theme-picker.ts  | 52 +++++++++++++------
 1 file changed, 37 insertions(+), 15 deletions(-)

diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index d330abeebf8d..4f63bb4703dc 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -36,14 +36,20 @@ function updateActiveButton(): void {
     ?.classList.add("active");
 }
 
-function updateColors(key: ColorName, color: string, onlyStyle = false): void {
+function updateColors(
+  key: ColorName,
+  color: string,
+  props?: { convertColor?: boolean; noThemeUpdate?: boolean },
+): void {
   const colorPicker = qsr(`.colorPicker[data-key="${key}"]`);
 
-  if (!onlyStyle) {
+  if (!props?.convertColor) {
     color = convertColorToHex(color) ?? color;
   }
 
-  updateThemeColor(key, color);
+  if (!props?.noThemeUpdate) {
+    updateThemeColor(key, color);
+  }
 
   const pickerButton = colorPicker.qsr<HTMLLabelElement>("label");
   pickerButton.setAttribute("value", color);
@@ -197,7 +203,7 @@ export function setCustomInputs(): void {
   ).forEach((element) => {
     const key = element.getAttribute("data-key") as ColorName;
     const color = theme[key] as string;
-    updateColors(key, color, false);
+    updateColors(key, color, { convertColor: false, noThemeUpdate: true });
   });
 }
 
@@ -267,30 +273,40 @@ function convertColorToHex(color: string): string | undefined {
       rule: /\b[0-9]{1,3},\s?[0-9]{1,3},\s?[0-9]{1,3}\s*\b/,
       start: "rgb(",
       end: ")",
+      type: "rgb",
     },
     {
       rule: /\b[A-Z, a-z, 0-9]{6}\b/,
       start: "#",
       end: "",
+      type: "hex",
     },
     {
       rule: /\b[0-9]{1,3},\s?[0-9]{1,3}%,\s?[0-9]{1,3}%?\s*\b/,
       start: "hsl(",
       end: ")",
+      type: "hsl",
     },
   ];
 
   color = color.replace("°", "");
 
+  let matchedType;
   for (const regex of colorREGEX) {
     if (color.match(regex.rule)) {
       color = regex.start + color + regex.end;
+      matchedType = regex.type;
       break;
     }
   }
 
   color = color.replace("##", "#");
 
+  if (matchedType === "hex") {
+    console.log("quick exit");
+    return color;
+  }
+
   converter.setStyle({ color: color });
   const hexColor: string | undefined = Colors.rgbStringtoHex(
     converter.native.style.color,
@@ -358,32 +374,38 @@ $(".pageSettings").on("click", ".section.themes .theme.button", (e) => {
   }
 });
 
-function handleColorInput(e: Event): void {
-  const target = e.currentTarget as HTMLInputElement;
-  const key = target
-    ?.closest(".colorPicker")
-    ?.getAttribute("data-key") as ColorName;
-
-  updateColors(key, target.value, true);
+function handleColorInput(props?: {
+  convertColor: boolean;
+}): (e: Event) => void {
+  return (e) => {
+    const target = e.currentTarget as HTMLInputElement;
+    const key = target
+      ?.closest(".colorPicker")
+      ?.getAttribute("data-key") as ColorName;
+
+    updateColors(key, target.value, {
+      convertColor: props?.convertColor ?? true,
+    });
+  };
 }
 
 qsa(
   ".pageSettings .section.themes .tabContainer .customTheme input[type=color]",
 )
-  .on("input", handleColorInput)
-  .on("change", handleColorInput);
+  .on("input", handleColorInput({ convertColor: false }))
+  .on("change", handleColorInput());
 
 qsa(".pageSettings .section.themes .tabContainer .customTheme input.input")
   .on("blur", (e) => {
     if ((e.target as HTMLInputElement).id === "name") return;
-    handleColorInput(e);
+    handleColorInput()(e);
   })
   .on("keypress", function (e) {
     const target = e.target as HTMLInputElement;
     if (target.id === "name") return;
     if (e.code === "Enter") {
       target.setAttribute("disabled", "disabled");
-      handleColorInput(e);
+      handleColorInput()(e);
       target.removeAttribute("disabled");
     }
   });

From f1b75831edcdaf046c18abbcdb598af23f61dc26 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 15 Jan 2026 22:56:07 +0100
Subject: [PATCH 16/51] convert without dom

---
 frontend/src/html/pages/settings.html         |  2 -
 .../src/ts/elements/settings/theme-picker.ts  | 74 ++++++++-----------
 frontend/src/ts/utils/colors.ts               | 31 ++++++++
 packages/util/src/numbers.ts                  |  4 +
 4 files changed, 67 insertions(+), 44 deletions(-)

diff --git a/frontend/src/html/pages/settings.html b/frontend/src/html/pages/settings.html
index 2af08f94bf9a..bfd4fd9ceee2 100644
--- a/frontend/src/html/pages/settings.html
+++ b/frontend/src/html/pages/settings.html
@@ -1529,8 +1529,6 @@
 
       <div class="tabContainer">
         <div tabContent="custom" class="tabContent customTheme hidden">
-          <!-- Used to convert colors to hex  -->
-          <div class="colorConverter"></div>
           <div class="allCustomThemes buttons"></div>
           <div class="customThemeInputs">
             <div class="customThemeInput">
diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index 4f63bb4703dc..7911b5e7d63d 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -41,10 +41,12 @@ function updateColors(
   color: string,
   props?: { convertColor?: boolean; noThemeUpdate?: boolean },
 ): void {
+  console.log("### update colors", { key, color, props });
   const colorPicker = qsr(`.colorPicker[data-key="${key}"]`);
 
-  if (!props?.convertColor) {
-    color = convertColorToHex(color) ?? color;
+  if (props?.convertColor) {
+    color = convertColorToHex(color) ?? "error";
+    console.log("converted value", color);
   }
 
   if (!props?.noThemeUpdate) {
@@ -261,57 +263,45 @@ export async function updateThemeUI(): Promise<void> {
   updateActiveButton();
 }
 
-const converter = qsr(".colorConverter");
 /**
  *  some system color pickers return rgb or hsl values. We need to convert them to hex before storing
  * @param color as hex, hsl or rgb
  * @returns  hex color
  */
 function convertColorToHex(color: string): string | undefined {
-  const colorREGEX = [
-    {
-      rule: /\b[0-9]{1,3},\s?[0-9]{1,3},\s?[0-9]{1,3}\s*\b/,
-      start: "rgb(",
-      end: ")",
-      type: "rgb",
-    },
-    {
-      rule: /\b[A-Z, a-z, 0-9]{6}\b/,
-      start: "#",
-      end: "",
-      type: "hex",
-    },
-    {
-      rule: /\b[0-9]{1,3},\s?[0-9]{1,3}%,\s?[0-9]{1,3}%?\s*\b/,
-      start: "hsl(",
-      end: ")",
-      type: "hsl",
-    },
-  ];
-
-  color = color.replace("°", "");
-
-  let matchedType;
-  for (const regex of colorREGEX) {
-    if (color.match(regex.rule)) {
-      color = regex.start + color + regex.end;
-      matchedType = regex.type;
-      break;
-    }
+  const input = color.trim().toLocaleLowerCase();
+  if (/^#[0-9a-f]{6}$/i.test(input)) {
+    return input;
   }
 
-  color = color.replace("##", "#");
+  const rgbMatch =
+    input.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/) ??
+    input.match(/^(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})$/);
+
+  if (rgbMatch !== null) {
+    const clamp = (n: string): number =>
+      Math.max(0, Math.min(255, Number.parseFloat(n)));
 
-  if (matchedType === "hex") {
-    console.log("quick exit");
-    return color;
+    const r = clamp(rgbMatch[1] as string);
+    const g = clamp(rgbMatch[2] as string);
+    const b = clamp(rgbMatch[3] as string);
+    return Colors.rgbNumbersToHex(r, g, b);
   }
 
-  converter.setStyle({ color: color });
-  const hexColor: string | undefined = Colors.rgbStringtoHex(
-    converter.native.style.color,
-  );
-  return hexColor;
+  const hslMatch =
+    input.match(/^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/) ??
+    input.match(/^(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%$/);
+
+  if (hslMatch) {
+    const clamp = (n: string): number =>
+      Math.max(0, Math.min(255, Number.parseFloat(n)));
+    const h = Number.parseFloat(hslMatch[1] as string) % 360;
+    const s = clamp(hslMatch[2] as string) / 100;
+    const l = clamp(hslMatch[3] as string) / 100;
+    const { r, g, b } = Colors.hslToRgb(h, s, l);
+    return Colors.rgbNumbersToHex(r, g, b);
+  }
+  return undefined;
 }
 
 // Add events to the DOM
diff --git a/frontend/src/ts/utils/colors.ts b/frontend/src/ts/utils/colors.ts
index 2dc62862085e..69c78073800c 100644
--- a/frontend/src/ts/utils/colors.ts
+++ b/frontend/src/ts/utils/colors.ts
@@ -261,3 +261,34 @@ export function rgbStringtoHex(rgb: string): string | undefined {
     hexCode(match[3] as string)
   );
 }
+
+export function rgbNumbersToHex(r: number, g: number, b: number): string {
+  return "#" + [r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("");
+}
+
+export function hslToRgb(
+  h: number,
+  s: number,
+  l: number,
+): { r: number; g: number; b: number } {
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = l - c / 2;
+
+  let r = 0,
+    g = 0,
+    b = 0;
+
+  if (h < 60) [r, g, b] = [c, x, 0];
+  else if (h < 120) [r, g, b] = [x, c, 0];
+  else if (h < 180) [r, g, b] = [0, c, x];
+  else if (h < 240) [r, g, b] = [0, x, c];
+  else if (h < 300) [r, g, b] = [x, 0, c];
+  else [r, g, b] = [c, 0, x];
+
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((b + m) * 255),
+  };
+}
diff --git a/packages/util/src/numbers.ts b/packages/util/src/numbers.ts
index 14445a3fdfd9..3a08bf71eb90 100644
--- a/packages/util/src/numbers.ts
+++ b/packages/util/src/numbers.ts
@@ -156,3 +156,7 @@ export function safeNumber(
   }
   return undefined;
 }
+
+export function clamp(n: number): number {
+  return Math.max(0, Math.min(255, n));
+}

From 39e39d9bdb178145401013235a57b4968c4055d0 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 15 Jan 2026 23:02:51 +0100
Subject: [PATCH 17/51] cleanup colors

---
 .../src/ts/elements/settings/theme-picker.ts  |  6 ++--
 frontend/src/ts/utils/colors.ts               | 30 +------------------
 2 files changed, 3 insertions(+), 33 deletions(-)

diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index 7911b5e7d63d..df93457ced10 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -41,12 +41,10 @@ function updateColors(
   color: string,
   props?: { convertColor?: boolean; noThemeUpdate?: boolean },
 ): void {
-  console.log("### update colors", { key, color, props });
   const colorPicker = qsr(`.colorPicker[data-key="${key}"]`);
 
   if (props?.convertColor) {
     color = convertColorToHex(color) ?? "error";
-    console.log("converted value", color);
   }
 
   if (!props?.noThemeUpdate) {
@@ -285,7 +283,7 @@ function convertColorToHex(color: string): string | undefined {
     const r = clamp(rgbMatch[1] as string);
     const g = clamp(rgbMatch[2] as string);
     const b = clamp(rgbMatch[3] as string);
-    return Colors.rgbNumbersToHex(r, g, b);
+    return Colors.rgbToHex(r, g, b);
   }
 
   const hslMatch =
@@ -299,7 +297,7 @@ function convertColorToHex(color: string): string | undefined {
     const s = clamp(hslMatch[2] as string) / 100;
     const l = clamp(hslMatch[3] as string) / 100;
     const { r, g, b } = Colors.hslToRgb(h, s, l);
-    return Colors.rgbNumbersToHex(r, g, b);
+    return Colors.rgbToHex(r, g, b);
   }
   return undefined;
 }
diff --git a/frontend/src/ts/utils/colors.ts b/frontend/src/ts/utils/colors.ts
index 69c78073800c..441fc5060721 100644
--- a/frontend/src/ts/utils/colors.ts
+++ b/frontend/src/ts/utils/colors.ts
@@ -109,7 +109,7 @@ export function hexToRgb(hex: string):
  * @param a The alpha component (0-1), optional.
  * @returns The hexadecimal color string (e.g., "#ff0000" for red or "#ff0000ff" for red with full opacity).
  */
-function rgbToHex(r: number, g: number, b: number, a?: number): string {
+export function rgbToHex(r: number, g: number, b: number, a?: number): string {
   const hexR = Math.round(r).toString(16).padStart(2, "0");
   const hexG = Math.round(g).toString(16).padStart(2, "0");
   const hexB = Math.round(b).toString(16).padStart(2, "0");
@@ -238,34 +238,6 @@ export function isColorDark(hex: string): boolean {
   return hsl.lgt < 50;
 }
 
-/**
- * Converts an RGB string (e.g., "rgb(255, 0, 0)") to a hexadecimal color string.
- * @param rgb The RGB string.
- * @returns The equivalent hexadecimal color string.
- */
-export function rgbStringtoHex(rgb: string): string | undefined {
-  const match: RegExpMatchArray | null = rgb.match(
-    /^rgb\((\d+), \s*(\d+), \s*(\d+)\)$/,
-  );
-  if (match === null) return;
-  if (match.length < 3) return;
-  function hexCode(i: string): string {
-    // Take the last 2 characters and convert
-    // them to Hexadecimal.
-    return ("0" + parseInt(i).toString(16)).slice(-2);
-  }
-  return (
-    "#" +
-    hexCode(match[1] as string) +
-    hexCode(match[2] as string) +
-    hexCode(match[3] as string)
-  );
-}
-
-export function rgbNumbersToHex(r: number, g: number, b: number): string {
-  return "#" + [r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("");
-}
-
 export function hslToRgb(
   h: number,
   s: number,

From 8765391df79d9daec24a2e73532d99b6a0ab0a52 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 15 Jan 2026 23:12:49 +0100
Subject: [PATCH 18/51] convert three digits hex

---
 frontend/src/ts/elements/settings/theme-picker.ts | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index df93457ced10..1d2ff5f4a9d9 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -44,7 +44,7 @@ function updateColors(
   const colorPicker = qsr(`.colorPicker[data-key="${key}"]`);
 
   if (props?.convertColor) {
-    color = convertColorToHex(color) ?? "error";
+    color = convertColorToHex(color) ?? "#fc0fc0";
   }
 
   if (!props?.noThemeUpdate) {
@@ -203,7 +203,7 @@ export function setCustomInputs(): void {
   ).forEach((element) => {
     const key = element.getAttribute("data-key") as ColorName;
     const color = theme[key] as string;
-    updateColors(key, color, { convertColor: false, noThemeUpdate: true });
+    updateColors(key, color, { convertColor: true, noThemeUpdate: true });
   });
 }
 
@@ -272,6 +272,13 @@ function convertColorToHex(color: string): string | undefined {
     return input;
   }
 
+  if (/^#[0-9a-f]{3}$/i.test(input)) {
+    // Expand #rgb → #rrggbb
+    return (
+      "#" + input[1] + input[1] + input[2] + input[2] + input[3] + input[3]
+    );
+  }
+
   const rgbMatch =
     input.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/) ??
     input.match(/^(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})$/);
@@ -404,7 +411,9 @@ $(".pageSettings #loadCustomColorsFromPreset").on("click", async () => {
 
   Misc.typedKeys(themeColors)
     .filter((it) => it !== "hasCss")
-    .forEach((key) => updateColors(key, themeColors[key]));
+    .forEach((key) =>
+      updateColors(key, themeColors[key], { convertColor: true }),
+    );
 });
 
 $(".pageSettings #saveCustomThemeButton").on("click", async () => {

From b493d5eff3b4f3f9d1ffb3f094d4d41d5027d76d Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 16 Jan 2026 11:34:16 +0100
Subject: [PATCH 19/51] fix styles rendered into body

---
 frontend/package.json                           |  1 +
 frontend/src/html/head.html                     |  1 -
 frontend/src/index.html                         |  5 +++++
 frontend/src/ts/components/layout/Theme.tsx     |  9 +++++----
 frontend/src/ts/components/mount.tsx            |  1 +
 frontend/src/ts/controllers/theme-controller.ts |  1 +
 pnpm-lock.yaml                                  | 12 ++++++++++++
 7 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 09994f084fbe..e6c7a9327e3b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,6 +29,7 @@
     "@monkeytype/util": "workspace:*",
     "@sentry/browser": "9.14.0",
     "@sentry/vite-plugin": "3.3.1",
+    "@solidjs/meta": "0.29.4",
     "@ts-rest/core": "3.52.1",
     "animejs": "4.2.2",
     "balloon-css": "1.2.0",
diff --git a/frontend/src/html/head.html b/frontend/src/html/head.html
index 9b0065f56454..343b5453f47b 100644
--- a/frontend/src/html/head.html
+++ b/frontend/src/html/head.html
@@ -40,7 +40,6 @@
       --colorful-error-extra-color: #7e2a33;
     }
   </style>
-  <Theme />
   <link
     rel="icon"
     type="image/x-icon"
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 7c9b3116c6ac..8d201fa8c650 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -8,6 +8,11 @@
     <div id="fpsCounter" class="hidden"></div>
     <div class="customBackground"></div>
     <div id="backgroundLoader" class="hidden"></div>
+
+    <Theme>
+      <!-- theme component adds to the head element, don't move to head.html -->
+    </Theme>
+
     <div id="bannerCenter" class="focus"></div>
     <div id="notificationCenter">
       <div class="clearAll button hidden">
diff --git a/frontend/src/ts/components/layout/Theme.tsx b/frontend/src/ts/components/layout/Theme.tsx
index 5af60697968f..0b14ffde428b 100644
--- a/frontend/src/ts/components/layout/Theme.tsx
+++ b/frontend/src/ts/components/layout/Theme.tsx
@@ -6,6 +6,7 @@ import { themes, Theme as ThemeType } from "../../constants/themes";
 import { ThemeName } from "@monkeytype/schemas/configs";
 import * as Loader from "../../elements/loader";
 import * as Notifications from "../../elements/notifications";
+import { Link, MetaProvider, Style } from "@solidjs/meta";
 
 export function Theme(): JSXElement {
   // Refs are assigned by SolidJS via the ref attribute
@@ -57,9 +58,9 @@ export function Theme(): JSXElement {
   });
 
   return (
-    <>
-      <style ref={styleRef}></style>
-      <link ref={linkRef} rel="stylesheet" id="currentTheme" />
-    </>
+    <MetaProvider>
+      <Style id="theme" ref={styleRef} />
+      <Link ref={linkRef} rel="stylesheet" id="currentTheme" />
+    </MetaProvider>
   );
 }
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index 49542fe110a8..40f481839dcd 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -16,6 +16,7 @@ const components: Record<string, () => JSXElement> = {
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {
   for (const mountPoint of qsa(name)) {
+    console.log("mount", mountPoint.native, mountPoint.native.parentElement);
     render(() => component(), mountPoint.native);
     mountPoint.native.replaceWith(...mountPoint.native.children);
   }
diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index 9bfc0f97a447..e015edf7e3d7 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -22,6 +22,7 @@ let randomThemeIndex = 0;
 async function updateFavicon(): Promise<void> {
   setTimeout(async () => {
     let { main, bg } = getThemeColors();
+    console.log("update favicon", main, bg);
     if (Misc.isDevEnvironment()) {
       [main, bg] = [bg, main];
     }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c74133ad3ca5..9d05f039be8f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -279,6 +279,9 @@ importers:
       '@sentry/vite-plugin':
         specifier: 3.3.1
         version: 3.3.1(encoding@0.1.13)
+      '@solidjs/meta':
+        specifier: 0.29.4
+        version: 0.29.4(solid-js@1.9.10)
       '@ts-rest/core':
         specifier: 3.52.1
         version: 3.52.1(@types/node@24.9.1)(zod@3.23.8)
@@ -3197,6 +3200,11 @@ packages:
     engines: {node: '>=8.10'}
     hasBin: true
 
+  '@solidjs/meta@0.29.4':
+    resolution: {integrity: sha512-zdIWBGpR9zGx1p1bzIPqF5Gs+Ks/BH8R6fWhmUa/dcK1L2rUC8BAcZJzNRYBQv74kScf1TSOs0EY//Vd/I0V8g==}
+    peerDependencies:
+      solid-js: '>=1.8.4'
+
   '@solidjs/testing-library@0.8.10':
     resolution: {integrity: sha512-qdeuIerwyq7oQTIrrKvV0aL9aFeuwTd86VYD3afdq5HYEwoox1OBTJy4y8A3TFZr8oAR0nujYgCzY/8wgHGfeQ==}
     engines: {node: '>= 14'}
@@ -12644,6 +12652,10 @@ snapshots:
       ignore: 5.3.2
       p-map: 4.0.0
 
+  '@solidjs/meta@0.29.4(solid-js@1.9.10)':
+    dependencies:
+      solid-js: 1.9.10
+
   '@solidjs/testing-library@0.8.10(solid-js@1.9.10)':
     dependencies:
       '@testing-library/dom': 10.4.1

From f411e681f2d723a21dad42b25329cc5401e6f633 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 16 Jan 2026 12:02:46 +0100
Subject: [PATCH 20/51] convert more head meta, update all chart colors with
 signals

---
 frontend/src/html/head.html                   |   7 -
 frontend/src/ts/components/layout/FavIcon.tsx |  36 +++++
 frontend/src/ts/components/layout/Theme.tsx   |   9 +-
 .../src/ts/controllers/chart-controller.ts    |  42 +++---
 .../src/ts/controllers/theme-controller.ts    | 124 +-----------------
 frontend/src/ts/modals/mini-result-chart.ts   |   2 -
 frontend/src/ts/pages/account.ts              |  11 --
 frontend/src/ts/test/result.ts                |   3 -
 8 files changed, 67 insertions(+), 167 deletions(-)
 create mode 100644 frontend/src/ts/components/layout/FavIcon.tsx

diff --git a/frontend/src/html/head.html b/frontend/src/html/head.html
index 343b5453f47b..fc5bfb6028ae 100644
--- a/frontend/src/html/head.html
+++ b/frontend/src/html/head.html
@@ -46,12 +46,6 @@
     sizes="32x32"
     href="/images/favicon/favicon.ico"
   />
-  <link
-    id="favicon"
-    rel="shortcut icon"
-    type="image/svg+xml"
-    href="/images/favicon/favicon.svg"
-  />
   <link
     rel="apple-touch-icon"
     sizes="180x180"
@@ -67,7 +61,6 @@
     name="msapplication-config"
     content="/images/favicon/browserconfig.xml"
   />
-  <meta id="metaThemeColor" name="theme-color" content="#e2b714" />
   <meta
     name="name"
     content="Monkeytype | A minimalistic, customizable typing test"
diff --git a/frontend/src/ts/components/layout/FavIcon.tsx b/frontend/src/ts/components/layout/FavIcon.tsx
new file mode 100644
index 000000000000..a3a2f056803a
--- /dev/null
+++ b/frontend/src/ts/components/layout/FavIcon.tsx
@@ -0,0 +1,36 @@
+import { createMemo, JSXElement } from "solid-js";
+import { Theme } from "../../constants/themes";
+import { isDevEnvironment } from "../../utils/misc";
+import { Link } from "@solidjs/meta";
+
+export function FavIcon(props: { theme: Theme }): JSXElement {
+  const icon = createMemo<string>(() => {
+    console.log("#### update favicon", props.theme);
+    let { main, bg } = props.theme;
+    if (isDevEnvironment()) {
+      [main, bg] = [bg, main];
+    }
+    if (bg === main) {
+      bg = "#111";
+      main = "#eee";
+    }
+
+    const svgPre = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <style>
+    #bg{fill:${bg};}
+    path{fill:${main};}
+  </style>
+  <g>
+    <path id="bg" d="M0 16Q0 0 16 0h32q16 0 16 16v32q0 16-16 16H16Q0 64 0 48"/>
+    <path d="M9.09 24.1v21.2h5.12V33.1q.256-4.61 4.48-4.61 3.46.384 3.46 3.84v12.9h5.12v-11.5q-.128-5.25 4.48-5.25 3.46.384 3.46 3.84v12.9h5.12v-12.2q0-9.47-7.04-9.47-4.22 0-7.04 3.46-2.18-3.46-6.02-3.46-3.46 0-6.02 2.43v-2.05M47 18.9v5.12h-4.61v5.12H47v16.1h5.12v-16.1h4.61v-5.12h-4.61V18.9"/>
+  </g>
+</svg>
+`;
+    return "data:image/svg+xml;base64," + btoa(svgPre);
+  });
+
+  return (
+    <Link id="favicon" rel="shortcut icon" type="image/svg+xml" href={icon()} />
+  );
+}
diff --git a/frontend/src/ts/components/layout/Theme.tsx b/frontend/src/ts/components/layout/Theme.tsx
index 0b14ffde428b..edad60458bf9 100644
--- a/frontend/src/ts/components/layout/Theme.tsx
+++ b/frontend/src/ts/components/layout/Theme.tsx
@@ -6,7 +6,8 @@ import { themes, Theme as ThemeType } from "../../constants/themes";
 import { ThemeName } from "@monkeytype/schemas/configs";
 import * as Loader from "../../elements/loader";
 import * as Notifications from "../../elements/notifications";
-import { Link, MetaProvider, Style } from "@solidjs/meta";
+import { Link, Meta, MetaProvider, Style } from "@solidjs/meta";
+import { FavIcon } from "./FavIcon";
 
 export function Theme(): JSXElement {
   // Refs are assigned by SolidJS via the ref attribute
@@ -61,6 +62,12 @@ export function Theme(): JSXElement {
     <MetaProvider>
       <Style id="theme" ref={styleRef} />
       <Link ref={linkRef} rel="stylesheet" id="currentTheme" />
+      <Meta
+        id="metaThemeColor"
+        name="theme-color"
+        content="getThemeColors().bg"
+      />
+      <FavIcon theme={getThemeColors()} />
     </MetaProvider>
   );
 }
diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
index 806e8b42b209..9911ad71779c 100644
--- a/frontend/src/ts/controllers/chart-controller.ts
+++ b/frontend/src/ts/controllers/chart-controller.ts
@@ -70,6 +70,7 @@ import { typedKeys } from "../utils/misc";
 import { qs } from "../utils/dom";
 import { getThemeColors } from "../signals/theme";
 import { Theme } from "../constants/themes";
+import { createEffect } from "solid-js";
 
 export class ChartWithUpdateColors<
   TType extends ChartType = ChartType,
@@ -1028,10 +1029,10 @@ type ButtonBelowChart =
   | ".toggleAverage100OnChart";
 
 export function updateAccountChartButtons(): void {
-  updateResults(false);
-  updateAccuracy(false);
-  updateAverage10(false);
-  updateAverage100(false);
+  updateResults();
+  updateAccuracy();
+  updateAverage10();
+  updateAverage100();
 }
 
 function updateAccountChartButton(
@@ -1043,7 +1044,7 @@ function updateAccountChartButton(
     : qs(`.pageAccount ${className}`)?.removeClass("active");
 }
 
-function updateResults(updateChart = true): void {
+function updateResults(): void {
   const resultsOn = Config.accountChart[0] === "on";
   updateAccountChartButton(resultsOn, ".toggleResultsOnChart");
 
@@ -1052,11 +1053,9 @@ function updateResults(updateChart = true): void {
   accountHistory.getDataset("wpmAvgTen").hidden = !resultsOn;
   accountHistory.getDataset("wpmAvgHundred").hidden = !resultsOn;
   accountHistory.getScale("wpm").display = resultsOn;
-
-  if (updateChart) void accountHistory.updateColors();
 }
 
-function updateAccuracy(updateChart = true): void {
+function updateAccuracy(): void {
   const resultsOn = Config.accountChart[0] === "on";
   const accOn = Config.accountChart[1] === "on";
   updateAccountChartButton(accOn, ".toggleAccuracyOnChart");
@@ -1080,11 +1079,9 @@ function updateAccuracy(updateChart = true): void {
     accountHistory.getScale("accAvgTen").min = minAccRoundedTo10;
     accountHistory.getScale("accAvgHundred").min = minAccRoundedTo10;
   }
-
-  if (updateChart) void accountHistory.updateColors();
 }
 
-function updateAverage10(updateChart = true): void {
+function updateAverage10(): void {
   const resultsOn = Config.accountChart[0] === "on";
   const accOn = Config.accountChart[1] === "on";
   const avg10On = Config.accountChart[2] === "on";
@@ -1096,10 +1093,9 @@ function updateAverage10(updateChart = true): void {
   if (resultsOn) {
     accountHistory.getDataset("wpmAvgTen").hidden = !avg10On;
   }
-  if (updateChart) void accountHistory.updateColors();
 }
 
-function updateAverage100(updateChart = true): void {
+function updateAverage100(): void {
   const resultsOn = Config.accountChart[0] === "on";
   const accOn = Config.accountChart[1] === "on";
   const avg100On = Config.accountChart[3] === "on";
@@ -1111,7 +1107,6 @@ function updateAverage100(updateChart = true): void {
   if (resultsOn) {
     accountHistory.getDataset("wpmAvgHundred").hidden = !avg100On;
   }
-  if (updateChart) void accountHistory.updateColors();
 }
 
 async function updateColors<
@@ -1124,10 +1119,8 @@ async function updateColors<
   TLabel = string,
 >(
   chart: ChartWithUpdateColors<TType, TData, TLabel>,
-  colors?: Theme,
+  colors: Theme,
 ): Promise<void> {
-  colors ??= getThemeColors();
-
   const gridcolor = colors.subAlt;
 
   for (const scaleKey of typedKeys(chart.scales)) {
@@ -1358,13 +1351,14 @@ function setDefaultFontFamily(font: string): void {
   Chart.defaults.font.family = font.replace(/_/g, " ");
 }
 
-export function updateAllChartColors(): void {
-  void result.updateColors();
-  void accountHistory.updateColors();
-  void accountHistogram.updateColors();
-  void accountActivity.updateColors();
-  void miniResult.updateColors();
-}
+createEffect(() => {
+  const theme = getThemeColors();
+  void result.updateColors(theme);
+  void accountHistory.updateColors(theme);
+  void accountHistogram.updateColors(theme);
+  void accountActivity.updateColors(theme);
+  void miniResult.updateColors(theme);
+});
 
 ConfigEvent.subscribe(({ key, newValue }) => {
   if (key === "accountChart" && getActivePage() === "account") {
diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index e015edf7e3d7..3dfad5d1dd32 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -1,5 +1,3 @@
-import * as ChartController from "./chart-controller";
-import * as Misc from "../utils/misc";
 import * as Arrays from "../utils/arrays";
 import { isColorDark, isColorLight } from "../utils/colors";
 import Config, { setConfig } from "../config";
@@ -13,125 +11,15 @@ import { Theme, themes, ThemesList } from "../constants/themes";
 import fileStorage from "../utils/file-storage";
 import { qs, qsa } from "../utils/dom";
 import { setThemeIndicator } from "../signals/core";
-import { getThemeColors, setThemeColor } from "../signals/theme";
+import { setThemeColor } from "../signals/theme";
 
 export let randomTheme: ThemeName | string | null = null;
 let isPreviewingTheme = false;
 let randomThemeIndex = 0;
 
-async function updateFavicon(): Promise<void> {
-  setTimeout(async () => {
-    let { main, bg } = getThemeColors();
-    console.log("update favicon", main, bg);
-    if (Misc.isDevEnvironment()) {
-      [main, bg] = [bg, main];
-    }
-    if (bg === main) {
-      bg = "#111";
-      main = "#eee";
-    }
-
-    const svgPre = `
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <style>
-    #bg{fill:${bg};}
-    path{fill:${main};}
-  </style>
-  <g>
-    <path id="bg" d="M0 16Q0 0 16 0h32q16 0 16 16v32q0 16-16 16H16Q0 64 0 48"/>
-    <path d="M9.09 24.1v21.2h5.12V33.1q.256-4.61 4.48-4.61 3.46.384 3.46 3.84v12.9h5.12v-11.5q-.128-5.25 4.48-5.25 3.46.384 3.46 3.84v12.9h5.12v-12.2q0-9.47-7.04-9.47-4.22 0-7.04 3.46-2.18-3.46-6.02-3.46-3.46 0-6.02 2.43v-2.05M47 18.9v5.12h-4.61v5.12H47v16.1h5.12v-16.1h4.61v-5.12h-4.61V18.9"/>
-  </g>
-</svg>`;
-
-    qs("#favicon")?.setAttribute(
-      "href",
-      "data:image/svg+xml;base64," + btoa(svgPre),
-    );
-  }, 125);
-}
-
 export function applyPreset(name: ThemeName): void {
   void apply(name);
 }
-/*
-let loadStyleLoaderTimeouts: NodeJS.Timeout[] = [];
-export async function loadStyle(
-  name: string,
-  props: { hasCss: boolean },
-): Promise<void> {
-  return new Promise((resolve) => {
-    function swapCurrentToNext(): void {
-      console.debug("Theme controller swapping elements");
-      const current = qs("#currentTheme");
-      const next = qs("#nextTheme");
-      if (current === null || next === null) {
-        console.debug(
-          "Theme controller failed to swap elements, next or current is missing",
-        );
-        return;
-      }
-      current.remove();
-      next.setAttribute("id", "currentTheme");
-    }
-
-    console.debug("Theme controller loading style", name);
-    loadStyleLoaderTimeouts.push(
-      setTimeout(() => {
-        Loader.show();
-      }, 100),
-    );
-
-    const afterLoad = (): void => {
-      Loader.hide();
-      swapCurrentToNext();
-      loadStyleLoaderTimeouts.map((t) => clearTimeout(t));
-      loadStyleLoaderTimeouts = [];
-      qsa("#keymap .keymapKey")?.setStyle({});
-      resolve();
-    };
-    qs("#nextTheme")?.remove();
-    const headScript = document.querySelector("#currentTheme");
-    const link = document.createElement("link");
-    link.type = "text/css";
-    link.rel = "stylesheet";
-    link.id = "nextTheme";
-    link.onload = (): void => {
-      console.debug("Theme controller loaded style", name);
-      afterLoad();
-    };
-    link.onerror = (e): void => {
-      console.debug("Theme controller failed to load style", name, e);
-      console.error(`Failed to load theme ${name}`, e);
-      Notifications.add("Failed to load theme", 0);
-      afterLoad();
-    };
-
-    if (props.hasCss) {
-      link.href = `/themes/${name}.css`;
-    } else {
-    }
-
-    console.log("### setting css to ", link.href);
-
-    if (headScript === null) {
-      console.debug("Theme controller appending link to the head", link);
-      document.head.appendChild(link);
-    } else {
-      console.debug(
-        "Theme controller inserting link after current theme",
-        link,
-      );
-      headScript.after(link);
-    }
-  });
-}
-*/
-// export function changeCustomTheme(themeId: string, nosave = false): void {
-//   const customThemes = DB.getSnapshot().customThemes;
-//   const colors = customThemes.find((e) => e._id === themeId)
-//     ?.colors as string[];
-//   UpdateConfig.setConfig("customThemeColors", colors,nosave);
-// }
 
 export function convertCustomColorsToTheme(colors: CustomThemeColors): Theme {
   return {
@@ -193,10 +81,8 @@ async function apply(
   setThemeColor(themeColors);
 
   qsa("#keymap .keymapKey")?.setStyle({});
-  ChartController.updateAllChartColors();
-  void updateFavicon();
-  qs("#metaThemeColor")?.setAttribute("content", themeColors.bg);
-  updateFooterIndicator(isPreview ? themeName : undefined);
+
+  updateThemeIndicator(isPreview ? themeName : undefined);
 
   if (isColorDark(themeColors.bg)) {
     qs("body")?.addClass("darkMode");
@@ -205,7 +91,7 @@ async function apply(
   }
 }
 
-function updateFooterIndicator(nameOverride?: string): void {
+function updateThemeIndicator(nameOverride?: string): void {
   //text
   let str: string = Config.theme;
   if (randomTheme !== null) str = randomTheme;
@@ -543,7 +429,7 @@ ConfigEvent.subscribe(async ({ key, newValue, nosave }) => {
       "favThemes",
     ].includes(key)
   ) {
-    updateFooterIndicator();
+    updateThemeIndicator();
   }
 });
 
diff --git a/frontend/src/ts/modals/mini-result-chart.ts b/frontend/src/ts/modals/mini-result-chart.ts
index 81388b1cc309..14a090d215d9 100644
--- a/frontend/src/ts/modals/mini-result-chart.ts
+++ b/frontend/src/ts/modals/mini-result-chart.ts
@@ -38,8 +38,6 @@ function updateData(data: ChartData): void {
     ChartController.miniResult.getScale("wpm").min = 0;
     ChartController.miniResult.getScale("burst").min = 0;
   }
-
-  void ChartController.miniResult.updateColors();
 }
 
 export function show(data: ChartData): void {
diff --git a/frontend/src/ts/pages/account.ts b/frontend/src/ts/pages/account.ts
index 4d0aafdf9de6..d3ef2de5b537 100644
--- a/frontend/src/ts/pages/account.ts
+++ b/frontend/src/ts/pages/account.ts
@@ -183,16 +183,6 @@ function buildResultRow(result: SnapshotResult<Mode>): HTMLTableRowElement {
   return element;
 }
 
-async function updateChartColors(): Promise<void> {
-  //TODO call chartController.updateAllChartColotrs instead?
-  await ChartController.accountHistory.updateColors();
-  await Misc.sleep(0);
-  await ChartController.accountActivity.updateColors();
-  await Misc.sleep(0);
-  await ChartController.accountHistogram.updateColors();
-  await Misc.sleep(0);
-}
-
 function reset(): void {
   historyTable.setData([]);
   historyTable.updateBody();
@@ -1271,7 +1261,6 @@ export const page = new Page<undefined>({
     });
 
     await update().then(() => {
-      void updateChartColors();
       qs(".pageAccount .content .accountVerificatinNotice")?.remove();
       if (getAuthenticatedUser()?.emailVerified === false) {
         qs(".pageAccount .content")?.prependHtml(
diff --git a/frontend/src/ts/test/result.ts b/frontend/src/ts/test/result.ts
index 520847b6003b..66072a30419c 100644
--- a/frontend/src/ts/test/result.ts
+++ b/frontend/src/ts/test/result.ts
@@ -999,7 +999,6 @@ export async function update(
   ((ChartController.result.options as PluginChartOptions<"line" | "scatter">)
     .plugins.annotation.annotations as AnnotationOptions<"line">[]) =
     resultAnnotation;
-  void ChartController.result.updateColors();
   ChartController.result.resize();
 
   if (
@@ -1332,7 +1331,6 @@ $(".pageTest #result .chart .chartLegend button").on("click", async (event) => {
   updateResultChartDataVisibility();
   updateMinMaxChartValues();
   applyMinMaxChartValues();
-  void ChartController.result.updateColors();
   ChartController.result.update();
 });
 
@@ -1403,7 +1401,6 @@ ConfigEvent.subscribe(async ({ key }) => {
     ((ChartController.result.options as PluginChartOptions<"line" | "scatter">)
       .plugins.annotation.annotations as AnnotationOptions<"line">[]) =
       resultAnnotation;
-    void ChartController.result.updateColors();
     ChartController.result.resize();
   }
 });

From 4d61cebc153777c37de4d265de754aa822842ee5 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 16 Jan 2026 12:25:45 +0100
Subject: [PATCH 21/51] naming, better update

---
 frontend/src/ts/components/common/ChartJs.tsx |  4 +-
 frontend/src/ts/components/layout/FavIcon.tsx |  1 -
 frontend/src/ts/components/layout/Theme.tsx   |  6 +--
 frontend/src/ts/constants/themes.ts           |  2 +-
 .../src/ts/controllers/chart-controller.ts    | 11 ++---
 .../src/ts/controllers/theme-controller.ts    |  4 +-
 frontend/src/ts/elements/keymap.ts            |  4 +-
 frontend/src/ts/elements/monkey-power.ts      |  4 +-
 frontend/src/ts/elements/result-batches.ts    |  4 +-
 .../src/ts/elements/settings/theme-picker.ts  | 49 ++++++++-----------
 frontend/src/ts/elements/xp-bar.ts            |  4 +-
 frontend/src/ts/modals/share-custom-theme.ts  |  4 +-
 frontend/src/ts/modals/simple-modals.ts       |  4 +-
 frontend/src/ts/signals/theme.ts              |  5 +-
 frontend/src/ts/test/result.ts                |  8 +--
 frontend/src/ts/test/test-screenshot.ts       |  4 +-
 frontend/src/ts/test/test-ui.ts               |  4 +-
 17 files changed, 55 insertions(+), 67 deletions(-)

diff --git a/frontend/src/ts/components/common/ChartJs.tsx b/frontend/src/ts/components/common/ChartJs.tsx
index e1b85c687c2e..15429dec4ced 100644
--- a/frontend/src/ts/components/common/ChartJs.tsx
+++ b/frontend/src/ts/components/common/ChartJs.tsx
@@ -8,7 +8,7 @@ import {
 } from "chart.js";
 import { useRefWithUtils } from "../../hooks/useRefWithUtils";
 import { ChartWithUpdateColors } from "../../controllers/chart-controller";
-import { getThemeColors } from "../../signals/theme";
+import { getTheme } from "../../signals/theme";
 
 type ChartJSProps<
   T extends ChartType = ChartType,
@@ -51,7 +51,7 @@ export function ChartJs<T extends ChartType, TData = DefaultDataPoint<T>>(
   });
 
   createEffect(() => {
-    const colors = getThemeColors();
+    const colors = getTheme();
     if (!chart) return;
 
     void chart.updateColors(colors);
diff --git a/frontend/src/ts/components/layout/FavIcon.tsx b/frontend/src/ts/components/layout/FavIcon.tsx
index a3a2f056803a..a57f89774092 100644
--- a/frontend/src/ts/components/layout/FavIcon.tsx
+++ b/frontend/src/ts/components/layout/FavIcon.tsx
@@ -5,7 +5,6 @@ import { Link } from "@solidjs/meta";
 
 export function FavIcon(props: { theme: Theme }): JSXElement {
   const icon = createMemo<string>(() => {
-    console.log("#### update favicon", props.theme);
     let { main, bg } = props.theme;
     if (isDevEnvironment()) {
       [main, bg] = [bg, main];
diff --git a/frontend/src/ts/components/layout/Theme.tsx b/frontend/src/ts/components/layout/Theme.tsx
index edad60458bf9..d29e7e44068e 100644
--- a/frontend/src/ts/components/layout/Theme.tsx
+++ b/frontend/src/ts/components/layout/Theme.tsx
@@ -1,5 +1,5 @@
 import { createEffect, createMemo, JSXElement } from "solid-js";
-import { getThemeColors } from "../../signals/theme";
+import { getTheme } from "../../signals/theme";
 import { useRefWithUtils } from "../../hooks/useRefWithUtils";
 import { getThemeIndicator } from "../../signals/core";
 import { themes, Theme as ThemeType } from "../../constants/themes";
@@ -16,7 +16,7 @@ export function Theme(): JSXElement {
 
   //Use memo to ignore signals without changes
   const themeName = createMemo(() => getThemeIndicator().text);
-  const themeColors = createMemo(() => getThemeColors());
+  const themeColors = createMemo(() => getTheme());
 
   createEffect(() => {
     const colors = themeColors();
@@ -67,7 +67,7 @@ export function Theme(): JSXElement {
         name="theme-color"
         content="getThemeColors().bg"
       />
-      <FavIcon theme={getThemeColors()} />
+      <FavIcon theme={getTheme()} />
     </MetaProvider>
   );
 }
diff --git a/frontend/src/ts/constants/themes.ts b/frontend/src/ts/constants/themes.ts
index 78fbc603063e..f3138d28f383 100644
--- a/frontend/src/ts/constants/themes.ts
+++ b/frontend/src/ts/constants/themes.ts
@@ -24,7 +24,7 @@ export const ThemeSchema = z.object({
   colorfulErrorExtra: hexColorSchema,
 });
 export type Theme = z.infer<typeof ThemeSchema>;
-export type ColorName = keyof Theme;
+export type ColorName = keyof Omit<Theme, "hasCss">;
 export const themes: Record<ThemeName, Theme> = {
   "8008": {
     bg: "#333a45",
diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
index 9911ad71779c..db480c5e401f 100644
--- a/frontend/src/ts/controllers/chart-controller.ts
+++ b/frontend/src/ts/controllers/chart-controller.ts
@@ -68,7 +68,7 @@ import * as Numbers from "@monkeytype/util/numbers";
 import { blendTwoHexColors } from "../utils/colors";
 import { typedKeys } from "../utils/misc";
 import { qs } from "../utils/dom";
-import { getThemeColors } from "../signals/theme";
+import { getTheme } from "../signals/theme";
 import { Theme } from "../constants/themes";
 import { createEffect } from "solid-js";
 
@@ -86,14 +86,13 @@ export class ChartWithUpdateColors<
     super(item, config);
   }
 
-  async updateColors(colors?: Theme): Promise<void> {
-    colors ??= getThemeColors();
-    if (colors === undefined) {
+  async updateColors(theme: Theme): Promise<void> {
+    if (theme === undefined) {
       throw new Error("chart colors are empty.");
     }
 
     //@ts-expect-error it's too difficult to figure out these types, but this works
-    await updateColors(this, colors);
+    await updateColors(this, theme);
   }
 
   getDataset(id: DatasetIds): ChartDataset<TType, TData> {
@@ -1352,7 +1351,7 @@ function setDefaultFontFamily(font: string): void {
 }
 
 createEffect(() => {
-  const theme = getThemeColors();
+  const theme = getTheme();
   void result.updateColors(theme);
   void accountHistory.updateColors(theme);
   void accountHistogram.updateColors(theme);
diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index 3dfad5d1dd32..a1231d1c30f4 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -11,7 +11,7 @@ import { Theme, themes, ThemesList } from "../constants/themes";
 import fileStorage from "../utils/file-storage";
 import { qs, qsa } from "../utils/dom";
 import { setThemeIndicator } from "../signals/core";
-import { setThemeColor } from "../signals/theme";
+import { setTheme } from "../signals/theme";
 
 export let randomTheme: ThemeName | string | null = null;
 let isPreviewingTheme = false;
@@ -78,7 +78,7 @@ async function apply(
     customColorsOverride,
     config: Config.customThemeColors,
   });
-  setThemeColor(themeColors);
+  setTheme(themeColors);
 
   qsa("#keymap .keymapKey")?.setStyle({});
 
diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
index 58d922658f46..1f314d620702 100644
--- a/frontend/src/ts/elements/keymap.ts
+++ b/frontend/src/ts/elements/keymap.ts
@@ -17,7 +17,7 @@ import { LayoutObject } from "@monkeytype/schemas/layouts";
 import { animate } from "animejs";
 import { ElementsWithUtils, qsr } from "../utils/dom";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
-import { getThemeColors } from "../signals/theme";
+import { getTheme } from "../signals/theme";
 
 export const keyDataDelimiter = "\uE000";
 const keymap = qsr("#keymap");
@@ -106,7 +106,7 @@ async function flashKey(key: string, correct?: boolean): Promise<void> {
     const elements = findKeyElements(key);
     if (elements === null || elements.length === 0) return;
 
-    const themecolors = getThemeColors();
+    const themecolors = getTheme();
 
     try {
       let startingStyle = {
diff --git a/frontend/src/ts/elements/monkey-power.ts b/frontend/src/ts/elements/monkey-power.ts
index f2220adc444e..3878f52f3b66 100644
--- a/frontend/src/ts/elements/monkey-power.ts
+++ b/frontend/src/ts/elements/monkey-power.ts
@@ -3,7 +3,7 @@ import Config from "../config";
 import { isSafeNumber } from "@monkeytype/util/numbers";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { ElementWithUtils, qsr } from "../utils/dom";
-import { getThemeColors } from "../signals/theme";
+import { getTheme } from "../signals/theme";
 
 const html = qsr("html");
 const body = qsr("body");
@@ -238,7 +238,7 @@ export async function addPower(good = true, extra = false): Promise<void> {
       i > 0;
       i--
     ) {
-      const { caret, error } = getThemeColors();
+      const { caret, error } = getTheme();
       const color = ["2", "4"].includes(Config.monkeyPowerLevel)
         ? randomColor()
         : good
diff --git a/frontend/src/ts/elements/result-batches.ts b/frontend/src/ts/elements/result-batches.ts
index b9169fbbf644..500c63545abe 100644
--- a/frontend/src/ts/elements/result-batches.ts
+++ b/frontend/src/ts/elements/result-batches.ts
@@ -2,7 +2,7 @@ import * as DB from "../db";
 import * as ServerConfiguration from "../ape/server-configuration";
 import { blendTwoHexColors } from "../utils/colors";
 import { mapRange } from "@monkeytype/util/numbers";
-import { getThemeColors } from "../signals/theme";
+import { getTheme } from "../signals/theme";
 
 export function hide(): void {
   $(".pageAccount .resultBatches").addClass("hidden");
@@ -56,7 +56,7 @@ export async function update(): Promise<void> {
     `${results?.length} / ${completedTests} (${percentageDownloaded}%)`,
   );
 
-  const colors = getThemeColors();
+  const colors = getTheme();
 
   bars.limit.fill.css({
     width: Math.min(percentageLimit, 100) + "%",
diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index 1d2ff5f4a9d9..50de7f54ebeb 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -12,7 +12,7 @@ import { ThemeName } from "@monkeytype/schemas/configs";
 import { captureException } from "../../sentry";
 import { ColorName, ThemesListSorted } from "../../constants/themes";
 import { qs, qsa, qsr } from "../../utils/dom";
-import { getThemeColors, updateThemeColor } from "../../signals/theme";
+import { getTheme, updateThemeColor } from "../../signals/theme";
 
 function updateActiveButton(): void {
   let activeThemeName: string = Config.theme;
@@ -36,21 +36,8 @@ function updateActiveButton(): void {
     ?.classList.add("active");
 }
 
-function updateColors(
-  key: ColorName,
-  color: string,
-  props?: { convertColor?: boolean; noThemeUpdate?: boolean },
-): void {
+function updateColorPicker(key: ColorName, color: string): void {
   const colorPicker = qsr(`.colorPicker[data-key="${key}"]`);
-
-  if (props?.convertColor) {
-    color = convertColorToHex(color) ?? "#fc0fc0";
-  }
-
-  if (!props?.noThemeUpdate) {
-    updateThemeColor(key, color);
-  }
-
   const pickerButton = colorPicker.qsr<HTMLLabelElement>("label");
   pickerButton.setAttribute("value", color);
   if (key !== "bg") {
@@ -202,8 +189,8 @@ export function setCustomInputs(): void {
     ".pageSettings .section.themes .tabContainer .customTheme .colorPicker",
   ).forEach((element) => {
     const key = element.getAttribute("data-key") as ColorName;
-    const color = theme[key] as string;
-    updateColors(key, color, { convertColor: true, noThemeUpdate: true });
+    const color = convertColorToHex(theme[key]);
+    updateColorPicker(key, color);
   });
 }
 
@@ -224,7 +211,7 @@ function toggleFavourite(themeName: ThemeName): void {
 }
 
 function saveCustomThemeColors(): void {
-  const colors = ThemeController.convertThemeToCustomColors(getThemeColors());
+  const colors = ThemeController.convertThemeToCustomColors(getTheme());
 
   setConfig("customThemeColors", colors);
   Notifications.add("Custom theme saved", 1);
@@ -266,7 +253,7 @@ export async function updateThemeUI(): Promise<void> {
  * @param color as hex, hsl or rgb
  * @returns  hex color
  */
-function convertColorToHex(color: string): string | undefined {
+function convertColorToHex(color: string): string {
   const input = color.trim().toLocaleLowerCase();
   if (/^#[0-9a-f]{6}$/i.test(input)) {
     return input;
@@ -306,7 +293,7 @@ function convertColorToHex(color: string): string | undefined {
     const { r, g, b } = Colors.hslToRgb(h, s, l);
     return Colors.rgbToHex(r, g, b);
   }
-  return undefined;
+  return "#fc0fc0"; // default color if input is not a valid
 }
 
 // Add events to the DOM
@@ -369,7 +356,7 @@ $(".pageSettings").on("click", ".section.themes .theme.button", (e) => {
   }
 });
 
-function handleColorInput(props?: {
+function handleColorInput(props: {
   convertColor: boolean;
 }): (e: Event) => void {
   return (e) => {
@@ -378,41 +365,45 @@ function handleColorInput(props?: {
       ?.closest(".colorPicker")
       ?.getAttribute("data-key") as ColorName;
 
-    updateColors(key, target.value, {
-      convertColor: props?.convertColor ?? true,
-    });
+    const color = props?.convertColor
+      ? convertColorToHex(target.value)
+      : target.value;
+
+    updateColorPicker(key, color);
+    updateThemeColor(key, color);
   };
 }
 
+const convertColorAndUpdate = handleColorInput({ convertColor: true });
 qsa(
   ".pageSettings .section.themes .tabContainer .customTheme input[type=color]",
 )
   .on("input", handleColorInput({ convertColor: false }))
-  .on("change", handleColorInput());
+  .on("change", convertColorAndUpdate);
 
 qsa(".pageSettings .section.themes .tabContainer .customTheme input.input")
   .on("blur", (e) => {
     if ((e.target as HTMLInputElement).id === "name") return;
-    handleColorInput()(e);
+    convertColorAndUpdate(e);
   })
   .on("keypress", function (e) {
     const target = e.target as HTMLInputElement;
     if (target.id === "name") return;
     if (e.code === "Enter") {
       target.setAttribute("disabled", "disabled");
-      handleColorInput()(e);
+      convertColorAndUpdate(e);
       target.removeAttribute("disabled");
     }
   });
 
 $(".pageSettings #loadCustomColorsFromPreset").on("click", async () => {
   ThemeController.applyPreset(Config.theme);
-  const themeColors = getThemeColors();
+  const themeColors = getTheme();
 
   Misc.typedKeys(themeColors)
     .filter((it) => it !== "hasCss")
     .forEach((key) =>
-      updateColors(key, themeColors[key], { convertColor: true }),
+      updateColorPicker(key, convertColorToHex(themeColors[key])),
     );
 });
 
diff --git a/frontend/src/ts/elements/xp-bar.ts b/frontend/src/ts/elements/xp-bar.ts
index 75f362d6ec9a..1fcfd41950cc 100644
--- a/frontend/src/ts/elements/xp-bar.ts
+++ b/frontend/src/ts/elements/xp-bar.ts
@@ -3,7 +3,7 @@ import * as Levels from "../utils/levels";
 import { XpBreakdown } from "@monkeytype/schemas/results";
 import { isSafeNumber } from "@monkeytype/util/numbers";
 import { animate } from "animejs";
-import { getThemeColors } from "../signals/theme";
+import { getTheme } from "../signals/theme";
 
 let breakdownVisible = false;
 let skip = false;
@@ -409,7 +409,7 @@ async function animateXpBar(
 }
 
 async function flashLevel(): Promise<void> {
-  const themecolors = getThemeColors();
+  const themecolors = getTheme();
 
   levelEl.textContent = `${parseInt(levelEl.textContent ?? "0") + 1}`;
 
diff --git a/frontend/src/ts/modals/share-custom-theme.ts b/frontend/src/ts/modals/share-custom-theme.ts
index f64809ad5189..14133066e408 100644
--- a/frontend/src/ts/modals/share-custom-theme.ts
+++ b/frontend/src/ts/modals/share-custom-theme.ts
@@ -2,7 +2,7 @@ import * as ThemeController from "../controllers/theme-controller";
 import Config from "../config";
 import * as Notifications from "../elements/notifications";
 import AnimatedModal from "../utils/animated-modal";
-import { getThemeColors } from "../signals/theme";
+import { getTheme } from "../signals/theme";
 
 type State = {
   includeBackground: boolean;
@@ -28,7 +28,7 @@ async function generateUrl(): Promise<string> {
     s?: string; //size
     f?: object; //filter
   } = {
-    c: ThemeController.convertThemeToCustomColors(getThemeColors()),
+    c: ThemeController.convertThemeToCustomColors(getTheme()),
   };
 
   if (state.includeBackground) {
diff --git a/frontend/src/ts/modals/simple-modals.ts b/frontend/src/ts/modals/simple-modals.ts
index f1726ee24194..887bc743e926 100644
--- a/frontend/src/ts/modals/simple-modals.ts
+++ b/frontend/src/ts/modals/simple-modals.ts
@@ -48,7 +48,7 @@ import { remoteValidation } from "../utils/remote-validation";
 
 import { qs } from "../utils/dom";
 import { list, PopupKey, showPopup } from "./simple-modals-base";
-import { getThemeColors } from "../signals/theme";
+import { getTheme } from "../signals/theme";
 
 export { list, showPopup };
 export type { PopupKey };
@@ -1094,7 +1094,7 @@ list.updateCustomTheme = new SimpleModal({
 
     let newColors =
       updateColors === "true"
-        ? ThemeController.convertThemeToCustomColors(getThemeColors())
+        ? ThemeController.convertThemeToCustomColors(getTheme())
         : customTheme.colors;
 
     const newTheme = {
diff --git a/frontend/src/ts/signals/theme.ts b/frontend/src/ts/signals/theme.ts
index 89248ddf476a..16f68fa90e11 100644
--- a/frontend/src/ts/signals/theme.ts
+++ b/frontend/src/ts/signals/theme.ts
@@ -14,11 +14,10 @@ const defaultTheme: Theme = {
   colorfulErrorExtra: "#7e2a33",
 };
 
-export const [getThemeColors, setThemeColor] =
-  createSignal<Theme>(defaultTheme);
+export const [getTheme, setTheme] = createSignal<Theme>(defaultTheme);
 
 export function updateThemeColor(key: ColorName, color: string): void {
-  setThemeColor((prev) => ({
+  setTheme((prev) => ({
     ...prev,
     [key]: color,
   }));
diff --git a/frontend/src/ts/test/result.ts b/frontend/src/ts/test/result.ts
index 66072a30419c..625f5efde1c8 100644
--- a/frontend/src/ts/test/result.ts
+++ b/frontend/src/ts/test/result.ts
@@ -47,7 +47,7 @@ import * as TestState from "./test-state";
 import { blurInputElement } from "../input/input-element";
 import * as ConnectionState from "../states/connection";
 import { currentQuote } from "./test-words";
-import { getThemeColors } from "../signals/theme";
+import { getTheme } from "../signals/theme";
 
 let result: CompletedEvent;
 let minChartVal: number;
@@ -137,7 +137,7 @@ async function updateChartData(): Promise<void> {
     chartData2.pop();
   }
 
-  const subcolor = getThemeColors().sub;
+  const subcolor = getTheme().sub;
 
   if (Config.funbox.length > 0) {
     let content = "";
@@ -281,7 +281,7 @@ function applyFakeChartData(): void {
 }
 
 export async function updateChartPBLine(): Promise<void> {
-  const themecolors = getThemeColors();
+  const themecolors = getTheme();
   const localPb = await DB.getLocalPB(
     result.mode,
     result.mode2,
@@ -724,7 +724,7 @@ async function updateTags(dontSave: boolean): Promise<void> {
         );
         // console.log("new pb for tag " + tag.display);
       } else {
-        const themecolors = getThemeColors();
+        const themecolors = getTheme();
         resultAnnotation.push({
           display: true,
           type: "line",
diff --git a/frontend/src/ts/test/test-screenshot.ts b/frontend/src/ts/test/test-screenshot.ts
index d7bb30aaa6de..d1d82fae69f2 100644
--- a/frontend/src/ts/test/test-screenshot.ts
+++ b/frontend/src/ts/test/test-screenshot.ts
@@ -10,7 +10,7 @@ import { getHtmlByUserFlags } from "../controllers/user-flag-controller";
 import * as Notifications from "../elements/notifications";
 import { convertRemToPixels } from "../utils/numbers";
 import * as TestState from "./test-state";
-import { getThemeColors } from "../signals/theme";
+import { getTheme } from "../signals/theme";
 
 let revealReplay = false;
 let revertCookie = false;
@@ -135,7 +135,7 @@ async function generateCanvas(): Promise<HTMLCanvasElement | null> {
 
     // Target the HTML root to include .customBackground
     const fullCanvas = await domToCanvas(root, {
-      backgroundColor: getThemeColors().bg,
+      backgroundColor: getTheme().bg,
       // Sharp output
       scale: window.devicePixelRatio ?? 1,
       style: {
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 1fe1c69c9802..9087193af650 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -57,7 +57,7 @@ import * as ModesNotice from "../elements/modes-notice";
 import * as Last10Average from "../elements/last-10-average";
 import * as MemoryFunboxTimer from "./funbox/memory-funbox-timer";
 import { qsr } from "../utils/dom";
-import { getThemeColors } from "../signals/theme";
+import { getTheme } from "../signals/theme";
 
 export const updateHintsPositionDebounced = Misc.debounceUntilResolved(
   updateHintsPosition,
@@ -1421,7 +1421,7 @@ export async function applyBurstHeatmap(): Promise<void> {
       burstlist[index] = Math.round(typingSpeedUnit.fromWpm(burst));
     });
 
-    const themeColors = getThemeColors();
+    const themeColors = getTheme();
 
     let colors = [
       themeColors.colorfulError,

From 45d32da773c8e4084ceed6ea82a3f4c4e2532b51 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 16 Jan 2026 12:41:10 +0100
Subject: [PATCH 22/51] cleanup

---
 frontend/src/ts/components/common/ChartJs.tsx   |  4 ++--
 frontend/src/ts/controllers/theme-controller.ts | 13 +------------
 frontend/src/ts/elements/keymap.ts              |  9 +++++++++
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/frontend/src/ts/components/common/ChartJs.tsx b/frontend/src/ts/components/common/ChartJs.tsx
index 15429dec4ced..5eae5ce9028e 100644
--- a/frontend/src/ts/components/common/ChartJs.tsx
+++ b/frontend/src/ts/components/common/ChartJs.tsx
@@ -51,10 +51,10 @@ export function ChartJs<T extends ChartType, TData = DefaultDataPoint<T>>(
   });
 
   createEffect(() => {
-    const colors = getTheme();
+    const theme = getTheme();
     if (!chart) return;
 
-    void chart.updateColors(colors);
+    void chart.updateColors(theme);
   });
 
   onCleanup(() => {
diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index a1231d1c30f4..b777200c6fb2 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -9,7 +9,7 @@ import { debounce } from "throttle-debounce";
 import { CustomThemeColors, ThemeName } from "@monkeytype/schemas/configs";
 import { Theme, themes, ThemesList } from "../constants/themes";
 import fileStorage from "../utils/file-storage";
-import { qs, qsa } from "../utils/dom";
+import { qs } from "../utils/dom";
 import { setThemeIndicator } from "../signals/core";
 import { setTheme } from "../signals/theme";
 
@@ -61,9 +61,7 @@ async function apply(
     customColorsOverride,
     isPreview,
   );
-  //TODO check for the new style to match the old one and skip loading. Problem exists on prod
   const isCustom = themeName === "custom";
-  const name = isCustom ? "custom" : themeName;
 
   const themeColors = isCustom
     ? convertCustomColorsToTheme(
@@ -71,17 +69,8 @@ async function apply(
       )
     : themes[themeName as ThemeName];
 
-  console.debug("Theme controller apply", {
-    isCustom,
-    name,
-    themeColors,
-    customColorsOverride,
-    config: Config.customThemeColors,
-  });
   setTheme(themeColors);
 
-  qsa("#keymap .keymapKey")?.setStyle({});
-
   updateThemeIndicator(isPreview ? themeName : undefined);
 
   if (isColorDark(themeColors.bg)) {
diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
index 1f314d620702..12f68f5f89b6 100644
--- a/frontend/src/ts/elements/keymap.ts
+++ b/frontend/src/ts/elements/keymap.ts
@@ -18,6 +18,7 @@ import { animate } from "animejs";
 import { ElementsWithUtils, qsr } from "../utils/dom";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { getTheme } from "../signals/theme";
+import { createEffect } from "solid-js";
 
 export const keyDataDelimiter = "\uE000";
 const keymap = qsr("#keymap");
@@ -61,6 +62,14 @@ const stenoKeys: LayoutObject = {
   },
 };
 
+createEffect(() => {
+  //react on theme change
+  const _theme = getTheme();
+
+  //reset calculated style on all keys
+  keymap.qsa(".keymapKey").setStyle({});
+});
+
 function findKeyElements(char: string): ElementsWithUtils | null {
   if (char === "\n") return null;
 

From 9a1c99da50dd682673b1bb71ddcccd3a699f938b Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 16 Jan 2026 13:20:08 +0100
Subject: [PATCH 23/51] remove log. cleanup debug logs, fix onLoad called
 multiple times. fix theme with underscore not loaded

---
 frontend/src/ts/components/layout/Theme.tsx   | 54 ++++++++++++-------
 frontend/src/ts/components/mount.tsx          |  1 -
 .../src/ts/controllers/theme-controller.ts    | 13 ++---
 3 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/frontend/src/ts/components/layout/Theme.tsx b/frontend/src/ts/components/layout/Theme.tsx
index d29e7e44068e..afb37c4e977d 100644
--- a/frontend/src/ts/components/layout/Theme.tsx
+++ b/frontend/src/ts/components/layout/Theme.tsx
@@ -14,13 +14,29 @@ export function Theme(): JSXElement {
   const [styleRef, styleEl] = useRefWithUtils<HTMLStyleElement>();
   const [linkRef, linkEl] = useRefWithUtils<HTMLLinkElement>();
 
+  const onLoad = (e: Event): void => {
+    const target = e.target as HTMLLinkElement;
+    if (target.href !== "") {
+      console.debug(
+        `Theme controller loaded style for theme ${target.dataset["name"]}`,
+      );
+    }
+    Loader.hide();
+  };
+
+  const onError = (e: Event): void => {
+    const target = e.target as HTMLLinkElement;
+    const name = target.dataset["name"];
+    console.debug("Theme controller failed to load style", name, e);
+    console.error(`Failed to load theme ${name}`, e);
+    Notifications.add("Failed to load theme", 0);
+  };
+
   //Use memo to ignore signals without changes
   const themeName = createMemo(() => getThemeIndicator().text);
-  const themeColors = createMemo(() => getTheme());
 
   createEffect(() => {
-    const colors = themeColors();
-    console.debug("Theme controller update colors", colors);
+    const colors = getTheme();
     styleEl()?.setHtml(`
 :root {
 
@@ -35,33 +51,35 @@ export function Theme(): JSXElement {
     --colorful-error-color: ${colors.colorfulError};
     --colorful-error-extra-color: ${colors.colorfulErrorExtra};
 }
-        `);
+    `);
   });
 
   createEffect(() => {
-    const name = themeName();
-    const theme: ThemeType | undefined = themes[name as ThemeName];
-    console.debug("Theme controller loading style", name);
+    const themeKey = themeName().replace(/ /g, "_");
 
+    //theme name can be custom, we won't find a theme for it
+    const theme: ThemeType | undefined = themes[themeKey as ThemeName];
     const hasCss = theme?.hasCss ?? false;
 
+    console.debug(
+      `Theme controller ${hasCss ? "loading style" : "removing style"} for theme ${themeKey}`,
+    );
+
     if (hasCss) Loader.show();
-    linkEl()?.on("load", () => {
-      if (hasCss) console.debug("Theme controller loaded style", name);
-      Loader.hide();
-    });
-    linkEl()?.on("error", (e) => {
-      console.debug("Theme controller failed to load style", name, e);
-      console.error(`Failed to load theme ${name}`, e);
-      Notifications.add("Failed to load theme", 0);
-    });
-    linkEl()?.setAttribute("href", hasCss ? `/themes/${themeName()}.css` : "");
+    linkEl()?.setAttribute("href", hasCss ? `/themes/${themeKey}.css` : "");
   });
 
   return (
     <MetaProvider>
       <Style id="theme" ref={styleRef} />
-      <Link ref={linkRef} rel="stylesheet" id="currentTheme" />
+      <Link
+        ref={linkRef}
+        rel="stylesheet"
+        id="currentTheme"
+        data-name={themeName()}
+        onError={onError}
+        onLoad={onLoad}
+      />
       <Meta
         id="metaThemeColor"
         name="theme-color"
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index 40f481839dcd..49542fe110a8 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -16,7 +16,6 @@ const components: Record<string, () => JSXElement> = {
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {
   for (const mountPoint of qsa(name)) {
-    console.log("mount", mountPoint.native, mountPoint.native.parentElement);
     render(() => component(), mountPoint.native);
     mountPoint.native.replaceWith(...mountPoint.native.children);
   }
diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index b777200c6fb2..9d019bbc6a1b 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -55,12 +55,11 @@ async function apply(
   customColorsOverride?: CustomThemeColors,
   isPreview = false,
 ): Promise<void> {
-  console.debug(
-    "Theme controller applying theme",
-    themeName,
+  console.debug(`Theme controller applying theme ${themeName}`, {
     customColorsOverride,
     isPreview,
-  );
+  });
+
   const isCustom = themeName === "custom";
 
   const themeColors = isCustom
@@ -124,11 +123,9 @@ async function set(
   themeIdentifier: string,
   isAutoSwitch = false,
 ): Promise<void> {
-  console.debug(
-    "Theme controller setting theme",
-    themeIdentifier,
+  console.debug("Theme controller setting theme", themeIdentifier, {
     isAutoSwitch,
-  );
+  });
   await apply(themeIdentifier, undefined, isAutoSwitch);
 
   if (!isAutoSwitch && Config.autoSwitchTheme) {

From d6a7d6537fcef63127f6e49c1857468f7cd3dffe Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 16 Jan 2026 13:58:19 +0100
Subject: [PATCH 24/51] remove empty css files, make sure animations are
 unique, remove unused clamp function

---
 frontend/src/ts/constants/themes.ts      |  3 ---
 frontend/static/themes/cheesecake.css    |  4 ++--
 frontend/static/themes/dev.css           |  1 -
 frontend/static/themes/fleuriste.css     |  6 ------
 frontend/static/themes/grape.css         | 16 ++++++++--------
 frontend/static/themes/phantom.css       | 22 +++++++++++-----------
 frontend/static/themes/rainbow_trail.css | 12 +++++++-----
 frontend/static/themes/ryujinscales.css  |  1 -
 frontend/static/themes/suisei.css        |  4 ++--
 packages/util/src/numbers.ts             |  4 ----
 10 files changed, 30 insertions(+), 43 deletions(-)
 delete mode 100644 frontend/static/themes/dev.css
 delete mode 100644 frontend/static/themes/fleuriste.css
 delete mode 100644 frontend/static/themes/ryujinscales.css

diff --git a/frontend/src/ts/constants/themes.ts b/frontend/src/ts/constants/themes.ts
index f3138d28f383..faba3ce6d560 100644
--- a/frontend/src/ts/constants/themes.ts
+++ b/frontend/src/ts/constants/themes.ts
@@ -506,7 +506,6 @@ export const themes: Record<ThemeName, Theme> = {
     errorExtra: "#84131f",
     colorfulError: "#b81b2c",
     colorfulErrorExtra: "#84131f",
-    hasCss: true,
   },
   diner: {
     bg: "#537997",
@@ -705,7 +704,6 @@ export const themes: Record<ThemeName, Theme> = {
     errorExtra: "#8a1414",
     colorfulError: "#a63a3a",
     colorfulErrorExtra: "#bd4c4c",
-    hasCss: true,
   },
   floret: {
     bg: "#00272c",
@@ -1833,7 +1831,6 @@ export const themes: Record<ThemeName, Theme> = {
     errorExtra: "#7e2a33",
     colorfulError: "#ca4754",
     colorfulErrorExtra: "#7e2a33",
-    hasCss: true,
   },
   serika: {
     bg: "#e1e1e3",
diff --git a/frontend/static/themes/cheesecake.css b/frontend/static/themes/cheesecake.css
index 76a7609887bc..661de9d00804 100644
--- a/frontend/static/themes/cheesecake.css
+++ b/frontend/static/themes/cheesecake.css
@@ -1,4 +1,4 @@
-@keyframes rgb {
+@keyframes cheesecake {
   0% {
     fill: #ff0090;
   }
@@ -32,5 +32,5 @@
 }
 
 header > div#logo > div.icon > svg path {
-  animation: 10s linear infinite 0.1s rgb;
+  animation: 10s linear infinite 0.1s cheesecake;
 }
diff --git a/frontend/static/themes/dev.css b/frontend/static/themes/dev.css
deleted file mode 100644
index 544bf308d4af..000000000000
--- a/frontend/static/themes/dev.css
+++ /dev/null
@@ -1 +0,0 @@
-/*this theme is based on "Dev theme by KDr3w" color pallet: https://www.deviantart.com/kdr3w/art/Dev-825722799 */
diff --git a/frontend/static/themes/fleuriste.css b/frontend/static/themes/fleuriste.css
deleted file mode 100644
index 31ee3b5d59ed..000000000000
--- a/frontend/static/themes/fleuriste.css
+++ /dev/null
@@ -1,6 +0,0 @@
-/* nav .textButton:nth-child(1, 3, 5) {
-  background: #405a52;
-}
-nav .textButton:nth-child(2, 4) {
-  background: #64374d;
-} */
diff --git a/frontend/static/themes/grape.css b/frontend/static/themes/grape.css
index aa5bc080fedc..aae91a27b7e7 100644
--- a/frontend/static/themes/grape.css
+++ b/frontend/static/themes/grape.css
@@ -1,4 +1,4 @@
-@keyframes pastel {
+@keyframes grape {
   0% {
     color: #00b8d4;
   }
@@ -16,7 +16,7 @@
   }
 }
 
-@keyframes pastel-bg {
+@keyframes grape-bg {
   0% {
     background: #00b8d4;
   }
@@ -39,7 +39,7 @@
 .pageSettings .section .buttons .button.active,
 .pageSettings .section.languages .buttons .language.active,
 .pageAccount .group.filterButtons .buttons .button.active {
-  animation: pastel-bg 5s linear infinite;
+  animation: grape-bg 5s linear infinite;
 }
 
 header.focus .button.discord::after,
@@ -56,17 +56,17 @@ header .config .group .buttons .textButton:hover,
 footer .textButton:hover,
 footer button.text:hover,
 a:not(.button):hover {
-  animation: pastel 5s linear infinite;
+  animation: grape 5s linear infinite;
 }
 
 #words {
-  --correct-letter-animation: pastel 5s linear infinite;
+  --correct-letter-animation: grape 5s linear infinite;
 }
 
 #words.flipped {
   --untyped-letter-color: var(--sub-color);
   --correct-letter-animation: none;
-  --untyped-letter-animation: pastel 5s linear infinite;
+  --untyped-letter-animation: grape 5s linear infinite;
 }
 
 #words .word.typed letter.correct,
@@ -74,7 +74,7 @@ a:not(.button):hover {
 #words.highlight-next-word .word.typed letter,
 #words.highlight-next-two-words .word.typed letter,
 #words.highlight-next-three-words .word.typed letter {
-  animation: pastel 5s linear infinite;
+  animation: grape 5s linear infinite;
 }
 
 #words.flipped .word.typed letter {
@@ -83,5 +83,5 @@ a:not(.button):hover {
 
 #words.highlight-off .word letter,
 #words.highlight-off .word.typed letter {
-  animation: pastel 5s linear infinite;
+  animation: grape 5s linear infinite;
 }
diff --git a/frontend/static/themes/phantom.css b/frontend/static/themes/phantom.css
index 6e0d2fc27a4c..eba732d3098e 100644
--- a/frontend/static/themes/phantom.css
+++ b/frontend/static/themes/phantom.css
@@ -1,4 +1,4 @@
-@keyframes tokyo-glow {
+@keyframes phantom-glow {
   0% {
     color: #c0caf5;
     text-shadow:
@@ -19,7 +19,7 @@
   }
 }
 
-@keyframes tokyo-glow-incorrect {
+@keyframes phantom-glow-incorrect {
   0% {
     text-shadow:
       0 0 5px #f7768e,
@@ -37,7 +37,7 @@
   }
 }
 
-@keyframes tokyo-bg {
+@keyframes phantom-bg {
   0% {
     background: #7aa2f7;
   }
@@ -56,7 +56,7 @@
 
 header:not(.focus) #logo .text {
   color: var(--text-color);
-  animation: tokyo-glow 3s infinite alternate;
+  animation: phantom-glow 3s infinite alternate;
 }
 
 header #logo .text .top {
@@ -82,11 +82,11 @@ button.text.active,
 
 button.text:hover,
 .textButton:hover {
-  animation: tokyo-glow 5s linear infinite;
+  animation: phantom-glow 5s linear infinite;
 }
 
 .word .active {
-  animation: tokyo-glow 5s linear infinite;
+  animation: phantom-glow 5s linear infinite;
 }
 
 button:hover,
@@ -104,7 +104,7 @@ input[type="submit"]:hover {
 }
 
 #caret {
-  animation: tokyo-bg 3s linear infinite;
+  animation: phantom-bg 3s linear infinite;
 }
 
 #logo .bottom,
@@ -116,7 +116,7 @@ header .config .group .buttons .textButton:hover,
 footer .textButton:hover,
 footer button.text:hover,
 a:not(.button):hover {
-  animation: tokyo-glow 3s linear infinite;
+  animation: phantom-glow 3s linear infinite;
 }
 
 .afk,
@@ -127,7 +127,7 @@ a:not(.button):hover {
 #words.highlight-next-word .word.typed letter,
 #words.highlight-next-two-words .word.typed letter,
 #words.highlight-next-three-words .word.typed letter {
-  animation: tokyo-glow 5s linear infinite;
+  animation: phantom-glow 5s linear infinite;
 }
 
 #words.flipped .word.typed letter {
@@ -135,10 +135,10 @@ a:not(.button):hover {
 }
 
 .incorrect {
-  animation: tokyo-glow-incorrect 5s linear infinite;
+  animation: phantom-glow-incorrect 5s linear infinite;
 }
 
 #words.highlight-off .word letter,
 #words.highlight-off .word.typed letter {
-  animation: tokyo-glow 5s linear infinite;
+  animation: phantom-glow 5s linear infinite;
 }
diff --git a/frontend/static/themes/rainbow_trail.css b/frontend/static/themes/rainbow_trail.css
index 64e50c8a7e48..6165ae82c35c 100644
--- a/frontend/static/themes/rainbow_trail.css
+++ b/frontend/static/themes/rainbow_trail.css
@@ -85,8 +85,10 @@ button.text:hover,
 
 #words {
   --correct-letter-animation: rainbow-infinite-loop 5s linear infinite;
-  --incorrect-letter-animation: error-repeat 1s alternate ease-in-out infinite;
-  --extra-letter-animation: error-repeat 1s alternate ease-in-out infinite;
+  --incorrect-letter-animation: rainbow-error-repeat 1s alternate ease-in-out
+    infinite;
+  --extra-letter-animation: rainbow-error-repeat 1s alternate ease-in-out
+    infinite;
 }
 
 #words .word.typed letter.correct,
@@ -112,7 +114,7 @@ button.text:hover,
 
 .button:hover,
 button:not(.textButton):not(.text):hover {
-  animation: glowing-button 2s alternate ease-in-out infinite;
+  animation: rainbow-button 2s alternate ease-in-out infinite;
 }
 
 #words.highlight-off .word letter,
@@ -215,7 +217,7 @@ button:not(.textButton):not(.text):hover {
   }
 }
 
-@keyframes error-repeat {
+@keyframes rainbow-error-repeat {
   0% {
     color: #ff0000;
   }
@@ -251,7 +253,7 @@ button:not(.textButton):not(.text):hover {
   }
 }
 
-@keyframes glowing-button {
+@keyframes rainbow-button {
   0% {
     box-shadow:
       0 0 7.5px 2.5px #60b6ce,
diff --git a/frontend/static/themes/ryujinscales.css b/frontend/static/themes/ryujinscales.css
deleted file mode 100644
index 983713300eb2..000000000000
--- a/frontend/static/themes/ryujinscales.css
+++ /dev/null
@@ -1 +0,0 @@
-/* your theme has been added to the _list file and the textColor property is the theme's main color */
diff --git a/frontend/static/themes/suisei.css b/frontend/static/themes/suisei.css
index dd59ae43593f..4f7af8777a88 100644
--- a/frontend/static/themes/suisei.css
+++ b/frontend/static/themes/suisei.css
@@ -1,4 +1,4 @@
-@keyframes pulse {
+@keyframes suisei-pulse {
   0% {
     transform: scale(1);
   }
@@ -49,7 +49,7 @@ header nav > .showAlerts {
 }
 header nav > .textButton:hover,
 header nav > .showAlerts:hover {
-  animation: pulse 800ms ease-out infinite;
+  animation: suisei-pulse 800ms ease-out infinite;
   color: var(--main-color);
   background-color: var(--sub-alt-color);
 }
diff --git a/packages/util/src/numbers.ts b/packages/util/src/numbers.ts
index 3a08bf71eb90..14445a3fdfd9 100644
--- a/packages/util/src/numbers.ts
+++ b/packages/util/src/numbers.ts
@@ -156,7 +156,3 @@ export function safeNumber(
   }
   return undefined;
 }
-
-export function clamp(n: number): number {
-  return Math.max(0, Math.min(255, n));
-}

From c3cbd7e3351a8bb1d73097346224fea39687bf21 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 16 Jan 2026 14:17:23 +0100
Subject: [PATCH 25/51] impove theme asset check

---
 frontend/scripts/check-assets.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/scripts/check-assets.ts b/frontend/scripts/check-assets.ts
index 2d4b2f2521af..dff3c69a10c3 100644
--- a/frontend/scripts/check-assets.ts
+++ b/frontend/scripts/check-assets.ts
@@ -397,9 +397,14 @@ async function validateThemes(): Promise<void> {
     .forEach((it) => problems.add("_additional", it));
 
   //validate theme colors are valid hex colors, not covered by typescipt
+  const themeNameSchema = z.string().regex(/^[a-z0-9_]+$/, {
+    message:
+      "theme name can only contain lowercase letters, digits and underscore",
+  });
   for (const name of Object.keys(themes)) {
     const theme = themes[name as ThemeName];
     problems.addValidation(name as ThemeName, ThemeSchema.safeParse(theme));
+    problems.addValidation(name as ThemeName, themeNameSchema.safeParse(name));
   }
 
   console.log(problems.toString());

From 95c0b055eb033afa930a78497ae7e5672c8aa56d Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 16 Jan 2026 14:41:54 +0100
Subject: [PATCH 26/51] better type for theme name, store theme name in theme
 signal

---
 frontend/src/ts/components/layout/Theme.tsx   | 23 ++++++++-----------
 .../src/ts/controllers/theme-controller.ts    | 20 ++++++++--------
 .../src/ts/elements/settings/theme-picker.ts  |  2 +-
 frontend/src/ts/signals/theme.ts              |  9 ++++++--
 4 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/frontend/src/ts/components/layout/Theme.tsx b/frontend/src/ts/components/layout/Theme.tsx
index afb37c4e977d..b4d4759588bc 100644
--- a/frontend/src/ts/components/layout/Theme.tsx
+++ b/frontend/src/ts/components/layout/Theme.tsx
@@ -1,9 +1,7 @@
 import { createEffect, createMemo, JSXElement } from "solid-js";
 import { getTheme } from "../../signals/theme";
 import { useRefWithUtils } from "../../hooks/useRefWithUtils";
-import { getThemeIndicator } from "../../signals/core";
-import { themes, Theme as ThemeType } from "../../constants/themes";
-import { ThemeName } from "@monkeytype/schemas/configs";
+import { themes } from "../../constants/themes";
 import * as Loader from "../../elements/loader";
 import * as Notifications from "../../elements/notifications";
 import { Link, Meta, MetaProvider, Style } from "@solidjs/meta";
@@ -14,6 +12,9 @@ export function Theme(): JSXElement {
   const [styleRef, styleEl] = useRefWithUtils<HTMLStyleElement>();
   const [linkRef, linkEl] = useRefWithUtils<HTMLLinkElement>();
 
+  //Use memo to ignore signals without changes, needed for the css loading
+  const getThemeName = createMemo(() => getTheme().name);
+
   const onLoad = (e: Event): void => {
     const target = e.target as HTMLLinkElement;
     if (target.href !== "") {
@@ -32,9 +33,6 @@ export function Theme(): JSXElement {
     Notifications.add("Failed to load theme", 0);
   };
 
-  //Use memo to ignore signals without changes
-  const themeName = createMemo(() => getThemeIndicator().text);
-
   createEffect(() => {
     const colors = getTheme();
     styleEl()?.setHtml(`
@@ -55,18 +53,15 @@ export function Theme(): JSXElement {
   });
 
   createEffect(() => {
-    const themeKey = themeName().replace(/ /g, "_");
-
-    //theme name can be custom, we won't find a theme for it
-    const theme: ThemeType | undefined = themes[themeKey as ThemeName];
-    const hasCss = theme?.hasCss ?? false;
+    const name = getThemeName();
+    const hasCss = name !== "custom" && (themes[name].hasCss ?? false);
 
     console.debug(
-      `Theme controller ${hasCss ? "loading style" : "removing style"} for theme ${themeKey}`,
+      `Theme controller ${hasCss ? "loading style" : "removing style"} for theme ${name}`,
     );
 
     if (hasCss) Loader.show();
-    linkEl()?.setAttribute("href", hasCss ? `/themes/${themeKey}.css` : "");
+    linkEl()?.setAttribute("href", hasCss ? `/themes/${name}123.css` : "");
   });
 
   return (
@@ -76,7 +71,7 @@ export function Theme(): JSXElement {
         ref={linkRef}
         rel="stylesheet"
         id="currentTheme"
-        data-name={themeName()}
+        data-name={getTheme().name}
         onError={onError}
         onLoad={onLoad}
       />
diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index 9d019bbc6a1b..321fe9dc908a 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -11,9 +11,9 @@ import { Theme, themes, ThemesList } from "../constants/themes";
 import fileStorage from "../utils/file-storage";
 import { qs } from "../utils/dom";
 import { setThemeIndicator } from "../signals/core";
-import { setTheme } from "../signals/theme";
+import { setTheme, ThemeIdentifier } from "../signals/theme";
 
-export let randomTheme: ThemeName | string | null = null;
+export let randomTheme: ThemeIdentifier | null = null;
 let isPreviewingTheme = false;
 let randomThemeIndex = 0;
 
@@ -51,7 +51,7 @@ export function convertThemeToCustomColors(theme: Theme): CustomThemeColors {
 }
 
 async function apply(
-  themeName: string,
+  themeName: ThemeIdentifier,
   customColorsOverride?: CustomThemeColors,
   isPreview = false,
 ): Promise<void> {
@@ -66,9 +66,9 @@ async function apply(
     ? convertCustomColorsToTheme(
         customColorsOverride ?? Config.customThemeColors,
       )
-    : themes[themeName as ThemeName];
+    : themes[themeName];
 
-  setTheme(themeColors);
+  setTheme({ ...themeColors, name: themeName });
 
   updateThemeIndicator(isPreview ? themeName : undefined);
 
@@ -98,14 +98,14 @@ function updateThemeIndicator(nameOverride?: string): void {
 }
 
 type PreviewState = {
-  theme: string;
+  theme: ThemeIdentifier;
   colors?: CustomThemeColors;
 } | null;
 
 let previewState: PreviewState = null;
 
 export function preview(
-  themeIdentifier: string,
+  themeIdentifier: ThemeIdentifier,
   customColorsOverride?: CustomThemeColors,
 ): void {
   previewState = { theme: themeIdentifier, colors: customColorsOverride };
@@ -120,7 +120,7 @@ const debouncedPreview = debounce<() => void>(250, () => {
 });
 
 async function set(
-  themeIdentifier: string,
+  themeIdentifier: ThemeIdentifier,
   isAutoSwitch = false,
 ): Promise<void> {
   console.debug("Theme controller setting theme", themeIdentifier, {
@@ -185,7 +185,7 @@ export async function randomizeTheme(): Promise<void> {
 
   let nextTheme = null;
   do {
-    randomTheme = themesList[randomThemeIndex] as string;
+    randomTheme = themesList[randomThemeIndex] as ThemeIdentifier;
     nextTheme = themes[themesList[randomThemeIndex] as ThemeName];
     randomThemeIndex++;
     if (randomThemeIndex >= themesList.length) {
@@ -372,7 +372,7 @@ ConfigEvent.subscribe(async ({ key, newValue, nosave }) => {
   if (key === "theme") {
     await clearRandom();
     await clearPreview(false);
-    await set(newValue as string);
+    await set(newValue);
   }
   if (key === "randomTheme" && newValue === "off") await clearRandom();
   if (key === "customBackground") await applyCustomBackground();
diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index 50de7f54ebeb..9a092e4d4652 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -401,7 +401,7 @@ $(".pageSettings #loadCustomColorsFromPreset").on("click", async () => {
   const themeColors = getTheme();
 
   Misc.typedKeys(themeColors)
-    .filter((it) => it !== "hasCss")
+    .filter((key) => key !== "hasCss" && key !== "name")
     .forEach((key) =>
       updateColorPicker(key, convertColorToHex(themeColors[key])),
     );
diff --git a/frontend/src/ts/signals/theme.ts b/frontend/src/ts/signals/theme.ts
index 16f68fa90e11..0e1f5e75b743 100644
--- a/frontend/src/ts/signals/theme.ts
+++ b/frontend/src/ts/signals/theme.ts
@@ -1,7 +1,10 @@
 import { createSignal } from "solid-js";
 import { ColorName, Theme } from "../constants/themes";
+import { ThemeName } from "@monkeytype/schemas/configs";
 
-const defaultTheme: Theme = {
+export type ThemeIdentifier = ThemeName | "custom";
+const defaultTheme: Theme & { name: ThemeIdentifier } = {
+  name: "serika_dark",
   bg: "#323437",
   main: "#e2b714",
   caret: "#e2b714",
@@ -14,7 +17,9 @@ const defaultTheme: Theme = {
   colorfulErrorExtra: "#7e2a33",
 };
 
-export const [getTheme, setTheme] = createSignal<Theme>(defaultTheme);
+export const [getTheme, setTheme] = createSignal<
+  Theme & { name: ThemeIdentifier }
+>(defaultTheme);
 
 export function updateThemeColor(key: ColorName, color: string): void {
   setTheme((prev) => ({

From 567df81ae8b230fc7a4f1f3bf884b847c06898a6 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 16 Jan 2026 14:45:07 +0100
Subject: [PATCH 27/51] clarify text in themeIndicator is not the theme name

---
 frontend/src/ts/signals/core.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/ts/signals/core.ts b/frontend/src/ts/signals/core.ts
index 43273c3de27e..a18377cce901 100644
--- a/frontend/src/ts/signals/core.ts
+++ b/frontend/src/ts/signals/core.ts
@@ -11,6 +11,10 @@ export const [getVersion, setVersion] = createSignal<{
 });
 
 export const [getThemeIndicator, setThemeIndicator] = createSignal<{
+  /**
+   * human readable display name, this is not the ThemeName.
+   * e.g. the display is `serika dark` for the ThemeName `serika_dark`
+   */
   text: string;
   isFavorite: boolean;
 }>({

From 2c5e6f64cf6c19cf35c3a38aa2ab45549654ec9a Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 16 Jan 2026 17:17:46 +0100
Subject: [PATCH 28/51] test/fix error handling on missing css

---
 frontend/src/ts/components/layout/Theme.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/ts/components/layout/Theme.tsx b/frontend/src/ts/components/layout/Theme.tsx
index b4d4759588bc..aefb146f6dff 100644
--- a/frontend/src/ts/components/layout/Theme.tsx
+++ b/frontend/src/ts/components/layout/Theme.tsx
@@ -26,6 +26,7 @@ export function Theme(): JSXElement {
   };
 
   const onError = (e: Event): void => {
+    Loader.hide();
     const target = e.target as HTMLLinkElement;
     const name = target.dataset["name"];
     console.debug("Theme controller failed to load style", name, e);
@@ -61,7 +62,7 @@ export function Theme(): JSXElement {
     );
 
     if (hasCss) Loader.show();
-    linkEl()?.setAttribute("href", hasCss ? `/themes/${name}123.css` : "");
+    linkEl()?.setAttribute("href", hasCss ? `/themes/${name}.css` : "");
   });
 
   return (

From cd964f29b91a2f63651abd8952523c40553fd0e8 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 16 Jan 2026 19:32:55 +0100
Subject: [PATCH 29/51] fix for #7142

---
 frontend/src/ts/commandline/commandline.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/commandline/commandline.ts b/frontend/src/ts/commandline/commandline.ts
index 7ff92dffa98f..0c5ce14aaa00 100644
--- a/frontend/src/ts/commandline/commandline.ts
+++ b/frontend/src/ts/commandline/commandline.ts
@@ -586,7 +586,7 @@ async function updateActiveCommand(): Promise<void> {
   activeCommand = command ?? null;
   if (element === undefined || command === undefined) {
     clearFontPreview();
-    void ThemeController.clearPreview(false);
+    void ThemeController.clearPreview();
     addCommandlineBackground();
     return;
   }

From e5c94bcdf18d5754bccec24fb2cd7b7bf4c7f181 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 16 Jan 2026 23:40:33 +0100
Subject: [PATCH 30/51] Theme.tsx tests

---
 .../components/Layout/Theme.spec.tsx          | 132 ++++++++++++++++++
 frontend/src/ts/components/layout/Theme.tsx   |   4 +-
 frontend/vitest.config.ts                     |   3 +
 3 files changed, 136 insertions(+), 3 deletions(-)
 create mode 100644 frontend/__tests__/components/Layout/Theme.spec.tsx

diff --git a/frontend/__tests__/components/Layout/Theme.spec.tsx b/frontend/__tests__/components/Layout/Theme.spec.tsx
new file mode 100644
index 000000000000..b33cc622f731
--- /dev/null
+++ b/frontend/__tests__/components/Layout/Theme.spec.tsx
@@ -0,0 +1,132 @@
+import { render, fireEvent } from "@solidjs/testing-library";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { Theme } from "../../../src/ts/components/layout/Theme";
+import * as ThemeSignal from "../../../src/ts/signals/theme";
+import { createSignal } from "solid-js";
+import { ThemeWithName } from "../../../src/ts/constants/themes";
+import * as Loader from "../../../src/ts/elements/loader";
+import * as Notifications from "../../../src/ts/elements/notifications";
+
+vi.mock("../../../src/ts/constants/themes", () => ({
+  themes: {
+    dark: { hasCss: true },
+    light: {},
+  },
+}));
+
+vi.mock("./FavIcon", () => ({
+  FavIcon: () => <div id="favicon" />,
+}));
+
+describe("Theme component", () => {
+  const [themeSignal, setThemeSignal] = createSignal<ThemeWithName>({} as any);
+  const themeSignalMock = vi.spyOn(ThemeSignal, "getTheme");
+  const loaderShowMock = vi.spyOn(Loader, "show");
+  const loaderHideMock = vi.spyOn(Loader, "hide");
+  const notificationAddMock = vi.spyOn(Notifications, "add");
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    loaderShowMock.mockClear();
+    loaderHideMock.mockClear();
+    notificationAddMock.mockClear();
+    themeSignalMock.mockImplementation(() => themeSignal());
+    setThemeSignal({
+      name: "dark",
+      bg: "#000",
+      main: "#fff",
+      caret: "#fff",
+      sub: "#aaa",
+      subAlt: "#888",
+      text: "#fff",
+      error: "#f00",
+      errorExtra: "#c00",
+      colorfulError: "#f55",
+      colorfulErrorExtra: "#c55",
+    });
+  });
+
+  it("injects CSS variables based on theme", () => {
+    const { style } = renderComponent();
+
+    expect(style.innerHTML).toEqual(`
+:root {
+    --bg-color: #000;
+    --main-color: #fff;
+    --caret-color: #fff;
+    --sub-color: #aaa;
+    --sub-alt-color: #888;
+    --text-color: #fff;
+    --error-color: #f00;
+    --error-extra-color: #c00;
+    --colorful-error-color: #f55;
+    --colorful-error-extra-color: #c55;
+}`);
+  });
+
+  it("updates CSS variables based on signal", () => {
+    setThemeSignal({ name: "light", bg: "#f00" } as any);
+    const { style } = renderComponent();
+
+    expect(style.innerHTML).toContain("--bg-color: #f00;");
+  });
+
+  it("loads CSS file and shows loader when theme has CSS", () => {
+    const { css } = renderComponent();
+
+    expect(css.getAttribute("href")).toBe("/themes/dark.css");
+    expect(loaderShowMock).toHaveBeenCalledOnce();
+    fireEvent.load(css);
+    expect(loaderHideMock).toHaveBeenCalledOnce();
+  });
+
+  it("removes CSS when theme has no CSS", async () => {
+    themeSignalMock.mockImplementation(() => ({ name: "light" }) as any);
+    const { css } = renderComponent();
+    expect(css.getAttribute("href")).toBe("");
+  });
+
+  it("removes CSS when theme is custom", async () => {
+    themeSignalMock.mockImplementation(() => ({ name: "custom" }) as any);
+    const { css } = renderComponent();
+    expect(css.getAttribute("href")).toBe("");
+  });
+
+  it("handles CSS load error", () => {
+    const { css } = renderComponent();
+    expect(loaderShowMock).toHaveBeenCalledOnce();
+    fireEvent.error(css);
+    expect(loaderHideMock).toHaveBeenCalledOnce();
+    expect(notificationAddMock).toHaveBeenCalledWith("Failed to load theme", 0);
+  });
+
+  it("renders favicon", () => {
+    const { favIcon } = renderComponent();
+
+    expect(favIcon).toBeInTheDocument();
+    expect(favIcon).toBeEmptyDOMElement(); //mocked
+  });
+
+  function renderComponent(): {
+    style: HTMLStyleElement;
+    css: HTMLLinkElement;
+    metaThemeColor: HTMLMetaElement;
+    favIcon: HTMLElement;
+  } {
+    render(() => <Theme />);
+
+    //make sure content is rendered to the head, not the body
+    const head = document.head;
+
+    return {
+      // oxlint-disable-next-line typescript/no-non-null-assertion
+      style: head.querySelector("style#theme")!,
+      // oxlint-disable-next-line typescript/no-non-null-assertion
+      css: head.querySelector("link#currentTheme")!,
+      // oxlint-disable-next-line typescript/no-non-null-assertion
+      metaThemeColor: head.querySelector("meta#metaThemeColor")!,
+      // oxlint-disable-next-line typescript/no-non-null-assertion
+      favIcon: head.querySelector("#favicon")!,
+    };
+  }
+});
diff --git a/frontend/src/ts/components/layout/Theme.tsx b/frontend/src/ts/components/layout/Theme.tsx
index aefb146f6dff..683b35df0fa2 100644
--- a/frontend/src/ts/components/layout/Theme.tsx
+++ b/frontend/src/ts/components/layout/Theme.tsx
@@ -38,7 +38,6 @@ export function Theme(): JSXElement {
     const colors = getTheme();
     styleEl()?.setHtml(`
 :root {
-
     --bg-color: ${colors.bg};
     --main-color: ${colors.main};
     --caret-color: ${colors.caret};
@@ -49,8 +48,7 @@ export function Theme(): JSXElement {
     --error-extra-color: ${colors.errorExtra};
     --colorful-error-color: ${colors.colorfulError};
     --colorful-error-extra-color: ${colors.colorfulErrorExtra};
-}
-    `);
+}`);
   });
 
   createEffect(() => {
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
index d2801ddf620f..72b4aedbfcfb 100644
--- a/frontend/vitest.config.ts
+++ b/frontend/vitest.config.ts
@@ -37,6 +37,9 @@ export const projects: UserWorkspaceConfig[] = [
     plugins,
   },
   {
+    ssr: {
+      noExternal: ["@solidjs/meta"],
+    },
     test: {
       name: { label: "jsx", color: "green" },
       include: ["__tests__/**/*.spec.tsx"],

From 21b413736e30e38a50f82b1464427dfd53c25679 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 18 Jan 2026 19:34:46 +0100
Subject: [PATCH 31/51] use new background loader

---
 frontend/src/ts/components/layout/Theme.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/ts/components/layout/Theme.tsx b/frontend/src/ts/components/layout/Theme.tsx
index 683b35df0fa2..9f9080f891f7 100644
--- a/frontend/src/ts/components/layout/Theme.tsx
+++ b/frontend/src/ts/components/layout/Theme.tsx
@@ -2,10 +2,10 @@ import { createEffect, createMemo, JSXElement } from "solid-js";
 import { getTheme } from "../../signals/theme";
 import { useRefWithUtils } from "../../hooks/useRefWithUtils";
 import { themes } from "../../constants/themes";
-import * as Loader from "../../elements/loader";
 import * as Notifications from "../../elements/notifications";
 import { Link, Meta, MetaProvider, Style } from "@solidjs/meta";
 import { FavIcon } from "./FavIcon";
+import { showLoaderBar, hideLoaderBar } from "../../signals/loader-bar";
 
 export function Theme(): JSXElement {
   // Refs are assigned by SolidJS via the ref attribute
@@ -22,11 +22,10 @@ export function Theme(): JSXElement {
         `Theme controller loaded style for theme ${target.dataset["name"]}`,
       );
     }
-    Loader.hide();
   };
 
   const onError = (e: Event): void => {
-    Loader.hide();
+    hideLoaderBar();
     const target = e.target as HTMLLinkElement;
     const name = target.dataset["name"];
     console.debug("Theme controller failed to load style", name, e);
@@ -59,7 +58,7 @@ export function Theme(): JSXElement {
       `Theme controller ${hasCss ? "loading style" : "removing style"} for theme ${name}`,
     );
 
-    if (hasCss) Loader.show();
+    if (hasCss) showLoaderBar();
     linkEl()?.setAttribute("href", hasCss ? `/themes/${name}.css` : "");
   });
 

From 58781cd4e7b55e3283c66972975cc49d789c3036 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 18 Jan 2026 22:46:13 +0100
Subject: [PATCH 32/51] fix tests

---
 frontend/__tests__/components/Layout/Theme.spec.tsx | 6 +++---
 frontend/src/ts/components/layout/Theme.tsx         | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/__tests__/components/Layout/Theme.spec.tsx b/frontend/__tests__/components/Layout/Theme.spec.tsx
index b33cc622f731..93e8f41917d7 100644
--- a/frontend/__tests__/components/Layout/Theme.spec.tsx
+++ b/frontend/__tests__/components/Layout/Theme.spec.tsx
@@ -4,7 +4,7 @@ import { Theme } from "../../../src/ts/components/layout/Theme";
 import * as ThemeSignal from "../../../src/ts/signals/theme";
 import { createSignal } from "solid-js";
 import { ThemeWithName } from "../../../src/ts/constants/themes";
-import * as Loader from "../../../src/ts/elements/loader";
+import * as Loader from "../../../src/ts/signals/loader-bar";
 import * as Notifications from "../../../src/ts/elements/notifications";
 
 vi.mock("../../../src/ts/constants/themes", () => ({
@@ -21,8 +21,8 @@ vi.mock("./FavIcon", () => ({
 describe("Theme component", () => {
   const [themeSignal, setThemeSignal] = createSignal<ThemeWithName>({} as any);
   const themeSignalMock = vi.spyOn(ThemeSignal, "getTheme");
-  const loaderShowMock = vi.spyOn(Loader, "show");
-  const loaderHideMock = vi.spyOn(Loader, "hide");
+  const loaderShowMock = vi.spyOn(Loader, "showLoaderBar");
+  const loaderHideMock = vi.spyOn(Loader, "hideLoaderBar");
   const notificationAddMock = vi.spyOn(Notifications, "add");
 
   beforeEach(() => {
diff --git a/frontend/src/ts/components/layout/Theme.tsx b/frontend/src/ts/components/layout/Theme.tsx
index 9f9080f891f7..b021d43baf68 100644
--- a/frontend/src/ts/components/layout/Theme.tsx
+++ b/frontend/src/ts/components/layout/Theme.tsx
@@ -16,6 +16,7 @@ export function Theme(): JSXElement {
   const getThemeName = createMemo(() => getTheme().name);
 
   const onLoad = (e: Event): void => {
+    hideLoaderBar();
     const target = e.target as HTMLLinkElement;
     if (target.href !== "") {
       console.debug(

From 0736573cdac0d1e68862159bd72afc61c4e13f8d Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Mon, 19 Jan 2026 17:01:35 +0100
Subject: [PATCH 33/51] format?

---
 frontend/__tests__/components/Layout/Theme.spec.tsx |  7 ++++---
 frontend/src/ts/components/common/ChartJs.tsx       |  3 ++-
 frontend/src/ts/components/layout/FavIcon.tsx       |  3 ++-
 frontend/src/ts/components/layout/Theme.tsx         | 10 ++++++----
 frontend/src/ts/components/mount.tsx                |  6 ++++--
 5 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/frontend/__tests__/components/Layout/Theme.spec.tsx b/frontend/__tests__/components/Layout/Theme.spec.tsx
index 93e8f41917d7..719c8a2c0a1d 100644
--- a/frontend/__tests__/components/Layout/Theme.spec.tsx
+++ b/frontend/__tests__/components/Layout/Theme.spec.tsx
@@ -1,11 +1,12 @@
 import { render, fireEvent } from "@solidjs/testing-library";
+import { createSignal } from "solid-js";
 import { describe, it, expect, vi, beforeEach } from "vitest";
+
 import { Theme } from "../../../src/ts/components/layout/Theme";
-import * as ThemeSignal from "../../../src/ts/signals/theme";
-import { createSignal } from "solid-js";
 import { ThemeWithName } from "../../../src/ts/constants/themes";
-import * as Loader from "../../../src/ts/signals/loader-bar";
 import * as Notifications from "../../../src/ts/elements/notifications";
+import * as Loader from "../../../src/ts/signals/loader-bar";
+import * as ThemeSignal from "../../../src/ts/signals/theme";
 
 vi.mock("../../../src/ts/constants/themes", () => ({
   themes: {
diff --git a/frontend/src/ts/components/common/ChartJs.tsx b/frontend/src/ts/components/common/ChartJs.tsx
index 862bd693fa67..01620430f2ad 100644
--- a/frontend/src/ts/components/common/ChartJs.tsx
+++ b/frontend/src/ts/components/common/ChartJs.tsx
@@ -6,9 +6,10 @@ import {
   DefaultDataPoint,
 } from "chart.js";
 import { onMount, onCleanup, createEffect, JSXElement } from "solid-js";
+
 import { ChartWithUpdateColors } from "../../controllers/chart-controller";
-import { getTheme } from "../../signals/theme";
 import { useRefWithUtils } from "../../hooks/useRefWithUtils";
+import { getTheme } from "../../signals/theme";
 
 type ChartJSProps<
   T extends ChartType = ChartType,
diff --git a/frontend/src/ts/components/layout/FavIcon.tsx b/frontend/src/ts/components/layout/FavIcon.tsx
index a57f89774092..7048a9d85614 100644
--- a/frontend/src/ts/components/layout/FavIcon.tsx
+++ b/frontend/src/ts/components/layout/FavIcon.tsx
@@ -1,7 +1,8 @@
+import { Link } from "@solidjs/meta";
 import { createMemo, JSXElement } from "solid-js";
+
 import { Theme } from "../../constants/themes";
 import { isDevEnvironment } from "../../utils/misc";
-import { Link } from "@solidjs/meta";
 
 export function FavIcon(props: { theme: Theme }): JSXElement {
   const icon = createMemo<string>(() => {
diff --git a/frontend/src/ts/components/layout/Theme.tsx b/frontend/src/ts/components/layout/Theme.tsx
index b021d43baf68..982b1124b374 100644
--- a/frontend/src/ts/components/layout/Theme.tsx
+++ b/frontend/src/ts/components/layout/Theme.tsx
@@ -1,11 +1,13 @@
+import { Link, Meta, MetaProvider, Style } from "@solidjs/meta";
 import { createEffect, createMemo, JSXElement } from "solid-js";
-import { getTheme } from "../../signals/theme";
-import { useRefWithUtils } from "../../hooks/useRefWithUtils";
+
 import { themes } from "../../constants/themes";
 import * as Notifications from "../../elements/notifications";
-import { Link, Meta, MetaProvider, Style } from "@solidjs/meta";
-import { FavIcon } from "./FavIcon";
+import { useRefWithUtils } from "../../hooks/useRefWithUtils";
 import { showLoaderBar, hideLoaderBar } from "../../signals/loader-bar";
+import { getTheme } from "../../signals/theme";
+
+import { FavIcon } from "./FavIcon";
 
 export function Theme(): JSXElement {
   // Refs are assigned by SolidJS via the ref attribute
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index 8ff0c40f5af3..7cb26def2a50 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -1,11 +1,13 @@
 import { JSXElement } from "solid-js";
 import { render } from "solid-js/web";
+
 import { qsa } from "../utils/dom";
+
 import { Footer } from "./layout/footer/Footer";
+import { Overlays } from "./layout/overlays/Overlays";
+import { Theme } from "./layout/Theme";
 import { Modals } from "./modals/Modals";
 import { AboutPage } from "./pages/AboutPage";
-import { Theme } from "./layout/Theme";
-import { Overlays } from "./layout/overlays/Overlays";
 
 const components: Record<string, () => JSXElement> = {
   Footer: () => <Footer />,

From 35ba07105d19c05044eff3cfc7f0985090639092 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Mon, 19 Jan 2026 17:41:13 +0100
Subject: [PATCH 34/51] edit button placement

---
 frontend/src/styles/settings.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/styles/settings.scss b/frontend/src/styles/settings.scss
index f37ed4b68c31..d01b5c168a6a 100644
--- a/frontend/src/styles/settings.scss
+++ b/frontend/src/styles/settings.scss
@@ -454,6 +454,7 @@
       .customTheme.button {
         .delButton,
         .editButton {
+          place-self: start;
           overflow: hidden;
           width: 1.25rem;
           transition: 0.25s;

From cf974caf17c5afc4cb37149f99b5a8f39acbb812 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Mon, 19 Jan 2026 18:01:27 +0100
Subject: [PATCH 35/51] add util, use it

---
 .../ts/components/layout/overlays/Banners.tsx    | 16 +++++-----------
 frontend/src/ts/elements/keymap.ts               |  7 ++-----
 frontend/src/ts/hooks/createEffectOn.ts          | 11 +++++++++++
 3 files changed, 18 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/ts/hooks/createEffectOn.ts

diff --git a/frontend/src/ts/components/layout/overlays/Banners.tsx b/frontend/src/ts/components/layout/overlays/Banners.tsx
index 6ec5f545287b..4b26843f1ef5 100644
--- a/frontend/src/ts/components/layout/overlays/Banners.tsx
+++ b/frontend/src/ts/components/layout/overlays/Banners.tsx
@@ -1,13 +1,7 @@
-import {
-  createEffect,
-  For,
-  JSXElement,
-  on,
-  onCleanup,
-  onMount,
-} from "solid-js";
+import { For, JSXElement, onCleanup, onMount } from "solid-js";
 import { debounce } from "throttle-debounce";
 
+import { createEffectOn } from "../../../hooks/createEffectOn";
 import { useRefWithUtils } from "../../../hooks/useRefWithUtils";
 import { setGlobalOffsetTop } from "../../../signals/core";
 import {
@@ -83,12 +77,12 @@ function Banner(props: BannerType): JSXElement {
 export function Banners(): JSXElement {
   const [ref, element] = useRefWithUtils();
 
-  const updateMargin = (): void => {
+  const setGlobalOffsetSignal = (): void => {
     const height = element()?.getOffsetHeight() ?? 0;
     setGlobalOffsetTop(height);
   };
 
-  const debouncedMarginUpdate = debounce(100, updateMargin);
+  const debouncedMarginUpdate = debounce(100, setGlobalOffsetSignal);
 
   onMount(() => {
     window.addEventListener("resize", debouncedMarginUpdate);
@@ -98,7 +92,7 @@ export function Banners(): JSXElement {
     window.removeEventListener("resize", debouncedMarginUpdate);
   });
 
-  createEffect(on(() => getBanners().length, updateMargin));
+  createEffectOn(() => getBanners().length, setGlobalOffsetSignal);
 
   return (
     <div ref={ref} class="fixed top-0 left-0 z-[1000] w-full">
diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
index 12f68f5f89b6..575639cd80dd 100644
--- a/frontend/src/ts/elements/keymap.ts
+++ b/frontend/src/ts/elements/keymap.ts
@@ -18,7 +18,7 @@ import { animate } from "animejs";
 import { ElementsWithUtils, qsr } from "../utils/dom";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { getTheme } from "../signals/theme";
-import { createEffect } from "solid-js";
+import { createEffectOn } from "../hooks/createEffectOn";
 
 export const keyDataDelimiter = "\uE000";
 const keymap = qsr("#keymap");
@@ -62,10 +62,7 @@ const stenoKeys: LayoutObject = {
   },
 };
 
-createEffect(() => {
-  //react on theme change
-  const _theme = getTheme();
-
+createEffectOn(getTheme, () => {
   //reset calculated style on all keys
   keymap.qsa(".keymapKey").setStyle({});
 });
diff --git a/frontend/src/ts/hooks/createEffectOn.ts b/frontend/src/ts/hooks/createEffectOn.ts
new file mode 100644
index 000000000000..4b729ba7faba
--- /dev/null
+++ b/frontend/src/ts/hooks/createEffectOn.ts
@@ -0,0 +1,11 @@
+import { createEffect, on } from "solid-js";
+
+// oxlint-disable-next-line typescript/no-explicit-any
+export function createEffectOn<T extends Array<() => any> | (() => any), U>(
+  deps: T,
+  fn: (input: T, prevInput: T, prevValue?: U) => U,
+  options: { defer?: boolean } = {},
+): void {
+  //@ts-expect-error not sure how to type this
+  createEffect(on(deps, fn, options));
+}

From 39a2e61ba5dd47bbabab94c3313bdf6f803158ab Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Mon, 19 Jan 2026 18:15:23 +0100
Subject: [PATCH 36/51] debounced util

---
 .../src/ts/hooks/createDebouncedEffectOn.ts    | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 frontend/src/ts/hooks/createDebouncedEffectOn.ts

diff --git a/frontend/src/ts/hooks/createDebouncedEffectOn.ts b/frontend/src/ts/hooks/createDebouncedEffectOn.ts
new file mode 100644
index 000000000000..5d05b347533c
--- /dev/null
+++ b/frontend/src/ts/hooks/createDebouncedEffectOn.ts
@@ -0,0 +1,18 @@
+import { createEffect, on } from "solid-js";
+import { debounce } from "throttle-debounce";
+
+export function createDebouncedEffectOn<
+  // oxlint-disable-next-line typescript/no-explicit-any
+  T extends Array<() => any> | (() => any),
+  U,
+>(
+  delay: number,
+  deps: T,
+  fn: (input: T, prevInput: T, prevValue?: U) => U,
+  options: { defer?: boolean } = {},
+): void {
+  const debouncedFn = debounce(delay, fn);
+
+  //@ts-expect-error not sure how to type this
+  createEffect(on(deps, debouncedFn, options));
+}

From ec8641e2d46f729d21a8b3cd4e38a3d37dd88740 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Mon, 19 Jan 2026 18:37:35 +0100
Subject: [PATCH 37/51] review comments

---
 frontend/src/index.html                       |  5 +-
 frontend/src/ts/components/common/ChartJs.tsx |  9 +--
 frontend/src/ts/components/layout/Theme.tsx   | 13 ++--
 .../src/ts/controllers/chart-controller.ts    | 19 +++---
 frontend/src/ts/elements/keymap.ts            |  1 +
 .../src/ts/elements/settings/theme-picker.ts  | 63 +++----------------
 frontend/src/ts/signals/loader-bar.ts         | 10 ---
 frontend/src/ts/utils/colors.ts               | 48 ++++++++++++++
 8 files changed, 79 insertions(+), 89 deletions(-)

diff --git a/frontend/src/index.html b/frontend/src/index.html
index 220949ac513b..fb4a46686c4e 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -8,9 +8,8 @@
     <load src="html/warnings.html" />
     <div class="customBackground"></div>
 
-    <Theme>
-      <!-- theme component adds to the head element, don't move to head.html -->
-    </Theme>
+    <!-- theme component adds to the head element, don't move to head.html -->
+    <Theme />
     <div id="notificationCenter">
       <div class="clearAll button hidden">
         <i class="fas fa-times"></i>
diff --git a/frontend/src/ts/components/common/ChartJs.tsx b/frontend/src/ts/components/common/ChartJs.tsx
index 01620430f2ad..a68a46bd4872 100644
--- a/frontend/src/ts/components/common/ChartJs.tsx
+++ b/frontend/src/ts/components/common/ChartJs.tsx
@@ -5,7 +5,7 @@ import {
   ChartOptions,
   DefaultDataPoint,
 } from "chart.js";
-import { onMount, onCleanup, createEffect, JSXElement } from "solid-js";
+import { onMount, onCleanup, createEffect, JSXElement, on } from "solid-js";
 
 import { ChartWithUpdateColors } from "../../controllers/chart-controller";
 import { useRefWithUtils } from "../../hooks/useRefWithUtils";
@@ -51,12 +51,7 @@ export function ChartJs<T extends ChartType, TData = DefaultDataPoint<T>>(
     chart.update();
   });
 
-  createEffect(() => {
-    const theme = getTheme();
-    if (!chart) return;
-
-    void chart.updateColors(theme);
-  });
+  createEffect(on(getTheme, (theme) => void chart?.updateColors(theme)));
 
   onCleanup(() => {
     chart?.destroy();
diff --git a/frontend/src/ts/components/layout/Theme.tsx b/frontend/src/ts/components/layout/Theme.tsx
index 982b1124b374..5faf3434f30e 100644
--- a/frontend/src/ts/components/layout/Theme.tsx
+++ b/frontend/src/ts/components/layout/Theme.tsx
@@ -1,5 +1,5 @@
 import { Link, Meta, MetaProvider, Style } from "@solidjs/meta";
-import { createEffect, createMemo, JSXElement } from "solid-js";
+import { createEffect, createMemo, JSXElement, on } from "solid-js";
 
 import { themes } from "../../constants/themes";
 import * as Notifications from "../../elements/notifications";
@@ -36,9 +36,9 @@ export function Theme(): JSXElement {
     Notifications.add("Failed to load theme", 0);
   };
 
-  createEffect(() => {
-    const colors = getTheme();
-    styleEl()?.setHtml(`
+  createEffect(
+    on(getTheme, (colors) => {
+      styleEl()?.setHtml(`
 :root {
     --bg-color: ${colors.bg};
     --main-color: ${colors.main};
@@ -51,16 +51,15 @@ export function Theme(): JSXElement {
     --colorful-error-color: ${colors.colorfulError};
     --colorful-error-extra-color: ${colors.colorfulErrorExtra};
 }`);
-  });
+    }),
+  );
 
   createEffect(() => {
     const name = getThemeName();
     const hasCss = name !== "custom" && (themes[name].hasCss ?? false);
-
     console.debug(
       `Theme controller ${hasCss ? "loading style" : "removing style"} for theme ${name}`,
     );
-
     if (hasCss) showLoaderBar();
     linkEl()?.setAttribute("href", hasCss ? `/themes/${name}.css` : "");
   });
diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
index db480c5e401f..91fa97226cda 100644
--- a/frontend/src/ts/controllers/chart-controller.ts
+++ b/frontend/src/ts/controllers/chart-controller.ts
@@ -70,7 +70,7 @@ import { typedKeys } from "../utils/misc";
 import { qs } from "../utils/dom";
 import { getTheme } from "../signals/theme";
 import { Theme } from "../constants/themes";
-import { createEffect } from "solid-js";
+import { createEffect, on } from "solid-js";
 
 export class ChartWithUpdateColors<
   TType extends ChartType = ChartType,
@@ -1350,14 +1350,15 @@ function setDefaultFontFamily(font: string): void {
   Chart.defaults.font.family = font.replace(/_/g, " ");
 }
 
-createEffect(() => {
-  const theme = getTheme();
-  void result.updateColors(theme);
-  void accountHistory.updateColors(theme);
-  void accountHistogram.updateColors(theme);
-  void accountActivity.updateColors(theme);
-  void miniResult.updateColors(theme);
-});
+createEffect(
+  on(getTheme, (theme) => {
+    void result.updateColors(theme);
+    void accountHistory.updateColors(theme);
+    void accountHistogram.updateColors(theme);
+    void accountActivity.updateColors(theme);
+    void miniResult.updateColors(theme);
+  }),
+);
 
 ConfigEvent.subscribe(({ key, newValue }) => {
   if (key === "accountChart" && getActivePage() === "account") {
diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
index 575639cd80dd..04a1140e6ee9 100644
--- a/frontend/src/ts/elements/keymap.ts
+++ b/frontend/src/ts/elements/keymap.ts
@@ -18,6 +18,7 @@ import { animate } from "animejs";
 import { ElementsWithUtils, qsr } from "../utils/dom";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { getTheme } from "../signals/theme";
+
 import { createEffectOn } from "../hooks/createEffectOn";
 
 export const keyDataDelimiter = "\uE000";
diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index 02b9ef195406..f557b355d95d 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -13,6 +13,7 @@ import { captureException } from "../../sentry";
 import { ColorName, ThemesListSorted } from "../../constants/themes";
 import { qs, qsa, qsr } from "../../utils/dom";
 import { getTheme, updateThemeColor } from "../../signals/theme";
+import { debounce } from "throttle-debounce";
 
 function updateActiveButton(): void {
   let activeThemeName: string = Config.theme;
@@ -189,7 +190,7 @@ export function setCustomInputs(): void {
     ".pageSettings .section.themes .tabContainer .customTheme .colorPicker",
   ).forEach((element) => {
     const key = element.getAttribute("data-key") as ColorName;
-    const color = convertColorToHex(theme[key]);
+    const color = Colors.convertColorToHex(theme[key]);
     updateColorPicker(key, color);
   });
 }
@@ -248,54 +249,6 @@ export async function updateThemeUI(): Promise<void> {
   updateActiveButton();
 }
 
-/**
- *  some system color pickers return rgb or hsl values. We need to convert them to hex before storing
- * @param color as hex, hsl or rgb
- * @returns  hex color
- */
-function convertColorToHex(color: string): string {
-  const input = color.trim().toLocaleLowerCase();
-  if (/^#[0-9a-f]{6}$/i.test(input)) {
-    return input;
-  }
-
-  if (/^#[0-9a-f]{3}$/i.test(input)) {
-    // Expand #rgb → #rrggbb
-    return (
-      "#" + input[1] + input[1] + input[2] + input[2] + input[3] + input[3]
-    );
-  }
-
-  const rgbMatch =
-    input.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/) ??
-    input.match(/^(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})$/);
-
-  if (rgbMatch !== null) {
-    const clamp = (n: string): number =>
-      Math.max(0, Math.min(255, Number.parseFloat(n)));
-
-    const r = clamp(rgbMatch[1] as string);
-    const g = clamp(rgbMatch[2] as string);
-    const b = clamp(rgbMatch[3] as string);
-    return Colors.rgbToHex(r, g, b);
-  }
-
-  const hslMatch =
-    input.match(/^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/) ??
-    input.match(/^(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%$/);
-
-  if (hslMatch) {
-    const clamp = (n: string): number =>
-      Math.max(0, Math.min(255, Number.parseFloat(n)));
-    const h = Number.parseFloat(hslMatch[1] as string) % 360;
-    const s = clamp(hslMatch[2] as string) / 100;
-    const l = clamp(hslMatch[3] as string) / 100;
-    const { r, g, b } = Colors.hslToRgb(h, s, l);
-    return Colors.rgbToHex(r, g, b);
-  }
-  return "#fc0fc0"; // default color if input is not a valid
-}
-
 // Add events to the DOM
 
 // Handle click on theme: preset or custom tab
@@ -360,13 +313,13 @@ function handleColorInput(props: {
   convertColor: boolean;
 }): (e: Event) => void {
   return (e) => {
-    const target = e.currentTarget as HTMLInputElement;
+    const target = e.target as HTMLInputElement;
     const key = target
       ?.closest(".colorPicker")
       ?.getAttribute("data-key") as ColorName;
 
     const color = props?.convertColor
-      ? convertColorToHex(target.value)
+      ? Colors.convertColorToHex(target.value)
       : target.value;
 
     updateColorPicker(key, color);
@@ -375,10 +328,14 @@ function handleColorInput(props: {
 }
 
 const convertColorAndUpdate = handleColorInput({ convertColor: true });
+const pickerInputDebounced = debounce(
+  100,
+  handleColorInput({ convertColor: false }),
+);
 qsa(
   ".pageSettings .section.themes .tabContainer .customTheme input[type=color]",
 )
-  .on("input", handleColorInput({ convertColor: false }))
+  .on("input", pickerInputDebounced)
   .on("change", convertColorAndUpdate);
 
 qsa(".pageSettings .section.themes .tabContainer .customTheme input.input")
@@ -403,7 +360,7 @@ $(".pageSettings #loadCustomColorsFromPreset").on("click", async () => {
   Misc.typedKeys(themeColors)
     .filter((key) => key !== "hasCss" && key !== "name")
     .forEach((key) =>
-      updateColorPicker(key, convertColorToHex(themeColors[key])),
+      updateColorPicker(key, Colors.convertColorToHex(themeColors[key])),
     );
 });
 
diff --git a/frontend/src/ts/signals/loader-bar.ts b/frontend/src/ts/signals/loader-bar.ts
index cbefe5071230..c82bade1362e 100644
--- a/frontend/src/ts/signals/loader-bar.ts
+++ b/frontend/src/ts/signals/loader-bar.ts
@@ -8,20 +8,10 @@ type LoaderSignal = null | {
 const [getLoaderBarSignal, set] = createSignal<LoaderSignal>(null);
 
 export function showLoaderBar(instant = false): void {
-  const current = getLoaderBarSignal();
-  // Don't update if already showing (unless instant flag changed)
-  if (current?.visible && current.instant === instant) {
-    return;
-  }
   set({ visible: true, instant });
 }
 
 export function hideLoaderBar(): void {
-  const current = getLoaderBarSignal();
-  // Don't update if already hidden
-  if (current?.visible === false) {
-    return;
-  }
   set({ visible: false });
 }
 
diff --git a/frontend/src/ts/utils/colors.ts b/frontend/src/ts/utils/colors.ts
index 441fc5060721..a34bbf9d1405 100644
--- a/frontend/src/ts/utils/colors.ts
+++ b/frontend/src/ts/utils/colors.ts
@@ -264,3 +264,51 @@ export function hslToRgb(
     b: Math.round((b + m) * 255),
   };
 }
+
+/**
+ *  some system color pickers return rgb or hsl values. We need to convert them to hex before storing
+ * @param color as hex, hsl or rgb
+ * @returns  hex color
+ */
+export function convertColorToHex(color: string): string {
+  const input = color.trim().toLocaleLowerCase();
+  if (/^#[0-9a-f]{6}$/i.test(input)) {
+    return input;
+  }
+
+  if (/^#[0-9a-f]{3}$/i.test(input)) {
+    // Expand #rgb → #rrggbb
+    return (
+      "#" + input[1] + input[1] + input[2] + input[2] + input[3] + input[3]
+    );
+  }
+
+  const rgbMatch =
+    input.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/) ??
+    input.match(/^(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})$/);
+
+  if (rgbMatch !== null) {
+    const clamp = (n: string): number =>
+      Math.max(0, Math.min(255, Number.parseFloat(n)));
+
+    const r = clamp(rgbMatch[1] as string);
+    const g = clamp(rgbMatch[2] as string);
+    const b = clamp(rgbMatch[3] as string);
+    return rgbToHex(r, g, b);
+  }
+
+  const hslMatch =
+    input.match(/^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/) ??
+    input.match(/^(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%$/);
+
+  if (hslMatch) {
+    const clamp = (n: string): number =>
+      Math.max(0, Math.min(255, Number.parseFloat(n)));
+    const h = Number.parseFloat(hslMatch[1] as string) % 360;
+    const s = clamp(hslMatch[2] as string) / 100;
+    const l = clamp(hslMatch[3] as string) / 100;
+    const { r, g, b } = hslToRgb(h, s, l);
+    return rgbToHex(r, g, b);
+  }
+  return "#fc0fc0"; // default color if input is not a valid
+}

From a22f796efdcabea17f92e73fff065f006be75d96 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Mon, 19 Jan 2026 19:44:21 +0100
Subject: [PATCH 38/51] fixes, debounce effects

---
 frontend/src/ts/components/common/ChartJs.tsx | 11 ++++--
 frontend/src/ts/components/layout/Theme.tsx   | 13 +++----
 .../ts/components/layout/overlays/Banners.tsx |  2 +-
 .../src/ts/controllers/chart-controller.ts    | 22 ++++-------
 frontend/src/ts/elements/keymap.ts            |  2 +-
 .../src/ts/elements/settings/theme-picker.ts  |  6 ++-
 .../src/ts/hooks/createDebouncedEffectOn.ts   | 18 ---------
 frontend/src/ts/hooks/createEffectOn.ts       | 11 ------
 frontend/src/ts/hooks/effects.ts              | 37 +++++++++++++++++++
 9 files changed, 65 insertions(+), 57 deletions(-)
 delete mode 100644 frontend/src/ts/hooks/createDebouncedEffectOn.ts
 delete mode 100644 frontend/src/ts/hooks/createEffectOn.ts
 create mode 100644 frontend/src/ts/hooks/effects.ts

diff --git a/frontend/src/ts/components/common/ChartJs.tsx b/frontend/src/ts/components/common/ChartJs.tsx
index a68a46bd4872..0683d2fa6985 100644
--- a/frontend/src/ts/components/common/ChartJs.tsx
+++ b/frontend/src/ts/components/common/ChartJs.tsx
@@ -1,13 +1,14 @@
 import {
   Chart,
-  ChartType,
   ChartData,
   ChartOptions,
+  ChartType,
   DefaultDataPoint,
 } from "chart.js";
-import { onMount, onCleanup, createEffect, JSXElement, on } from "solid-js";
+import { createEffect, JSXElement, onCleanup, onMount } from "solid-js";
 
 import { ChartWithUpdateColors } from "../../controllers/chart-controller";
+import { createDebouncedEffectOn } from "../../hooks/effects";
 import { useRefWithUtils } from "../../hooks/useRefWithUtils";
 import { getTheme } from "../../signals/theme";
 
@@ -51,7 +52,11 @@ export function ChartJs<T extends ChartType, TData = DefaultDataPoint<T>>(
     chart.update();
   });
 
-  createEffect(on(getTheme, (theme) => void chart?.updateColors(theme)));
+  createDebouncedEffectOn(
+    500,
+    getTheme,
+    (theme) => void chart?.updateColors(theme),
+  );
 
   onCleanup(() => {
     chart?.destroy();
diff --git a/frontend/src/ts/components/layout/Theme.tsx b/frontend/src/ts/components/layout/Theme.tsx
index 5faf3434f30e..47441553de51 100644
--- a/frontend/src/ts/components/layout/Theme.tsx
+++ b/frontend/src/ts/components/layout/Theme.tsx
@@ -1,10 +1,11 @@
 import { Link, Meta, MetaProvider, Style } from "@solidjs/meta";
-import { createEffect, createMemo, JSXElement, on } from "solid-js";
+import { createEffect, createMemo, JSXElement } from "solid-js";
 
 import { themes } from "../../constants/themes";
 import * as Notifications from "../../elements/notifications";
+import { createDebouncedEffectOn } from "../../hooks/effects";
 import { useRefWithUtils } from "../../hooks/useRefWithUtils";
-import { showLoaderBar, hideLoaderBar } from "../../signals/loader-bar";
+import { hideLoaderBar, showLoaderBar } from "../../signals/loader-bar";
 import { getTheme } from "../../signals/theme";
 
 import { FavIcon } from "./FavIcon";
@@ -36,9 +37,8 @@ export function Theme(): JSXElement {
     Notifications.add("Failed to load theme", 0);
   };
 
-  createEffect(
-    on(getTheme, (colors) => {
-      styleEl()?.setHtml(`
+  createDebouncedEffectOn(100, getTheme, (colors) => {
+    styleEl()?.setHtml(`
 :root {
     --bg-color: ${colors.bg};
     --main-color: ${colors.main};
@@ -51,8 +51,7 @@ export function Theme(): JSXElement {
     --colorful-error-color: ${colors.colorfulError};
     --colorful-error-extra-color: ${colors.colorfulErrorExtra};
 }`);
-    }),
-  );
+  });
 
   createEffect(() => {
     const name = getThemeName();
diff --git a/frontend/src/ts/components/layout/overlays/Banners.tsx b/frontend/src/ts/components/layout/overlays/Banners.tsx
index 4b26843f1ef5..b411c663cf66 100644
--- a/frontend/src/ts/components/layout/overlays/Banners.tsx
+++ b/frontend/src/ts/components/layout/overlays/Banners.tsx
@@ -1,7 +1,7 @@
 import { For, JSXElement, onCleanup, onMount } from "solid-js";
 import { debounce } from "throttle-debounce";
 
-import { createEffectOn } from "../../../hooks/createEffectOn";
+import { createEffectOn } from "../../../hooks/effects";
 import { useRefWithUtils } from "../../../hooks/useRefWithUtils";
 import { setGlobalOffsetTop } from "../../../signals/core";
 import {
diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
index 91fa97226cda..8f73f39623e7 100644
--- a/frontend/src/ts/controllers/chart-controller.ts
+++ b/frontend/src/ts/controllers/chart-controller.ts
@@ -70,7 +70,7 @@ import { typedKeys } from "../utils/misc";
 import { qs } from "../utils/dom";
 import { getTheme } from "../signals/theme";
 import { Theme } from "../constants/themes";
-import { createEffect, on } from "solid-js";
+import { createDebouncedEffectOn } from "../hooks/effects";
 
 export class ChartWithUpdateColors<
   TType extends ChartType = ChartType,
@@ -87,10 +87,6 @@ export class ChartWithUpdateColors<
   }
 
   async updateColors(theme: Theme): Promise<void> {
-    if (theme === undefined) {
-      throw new Error("chart colors are empty.");
-    }
-
     //@ts-expect-error it's too difficult to figure out these types, but this works
     await updateColors(this, theme);
   }
@@ -1350,15 +1346,13 @@ function setDefaultFontFamily(font: string): void {
   Chart.defaults.font.family = font.replace(/_/g, " ");
 }
 
-createEffect(
-  on(getTheme, (theme) => {
-    void result.updateColors(theme);
-    void accountHistory.updateColors(theme);
-    void accountHistogram.updateColors(theme);
-    void accountActivity.updateColors(theme);
-    void miniResult.updateColors(theme);
-  }),
-);
+createDebouncedEffectOn(500, getTheme, (theme) => {
+  void result.updateColors(theme);
+  void accountHistory.updateColors(theme);
+  void accountHistogram.updateColors(theme);
+  void accountActivity.updateColors(theme);
+  void miniResult.updateColors(theme);
+});
 
 ConfigEvent.subscribe(({ key, newValue }) => {
   if (key === "accountChart" && getActivePage() === "account") {
diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
index 04a1140e6ee9..19e0add7bf91 100644
--- a/frontend/src/ts/elements/keymap.ts
+++ b/frontend/src/ts/elements/keymap.ts
@@ -19,7 +19,7 @@ import { ElementsWithUtils, qsr } from "../utils/dom";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { getTheme } from "../signals/theme";
 
-import { createEffectOn } from "../hooks/createEffectOn";
+import { createEffectOn } from "../hooks/effects";
 
 export const keyDataDelimiter = "\uE000";
 const keymap = qsr("#keymap");
diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index f557b355d95d..abd836ae01bd 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -13,7 +13,6 @@ import { captureException } from "../../sentry";
 import { ColorName, ThemesListSorted } from "../../constants/themes";
 import { qs, qsa, qsr } from "../../utils/dom";
 import { getTheme, updateThemeColor } from "../../signals/theme";
-import { debounce } from "throttle-debounce";
 
 function updateActiveButton(): void {
   let activeThemeName: string = Config.theme;
@@ -328,10 +327,13 @@ function handleColorInput(props: {
 }
 
 const convertColorAndUpdate = handleColorInput({ convertColor: true });
-const pickerInputDebounced = debounce(
+/*const pickerInputDebounced = debounce(
   100,
   handleColorInput({ convertColor: false }),
 );
+*/
+const pickerInputDebounced = handleColorInput({ convertColor: false });
+
 qsa(
   ".pageSettings .section.themes .tabContainer .customTheme input[type=color]",
 )
diff --git a/frontend/src/ts/hooks/createDebouncedEffectOn.ts b/frontend/src/ts/hooks/createDebouncedEffectOn.ts
deleted file mode 100644
index 5d05b347533c..000000000000
--- a/frontend/src/ts/hooks/createDebouncedEffectOn.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { createEffect, on } from "solid-js";
-import { debounce } from "throttle-debounce";
-
-export function createDebouncedEffectOn<
-  // oxlint-disable-next-line typescript/no-explicit-any
-  T extends Array<() => any> | (() => any),
-  U,
->(
-  delay: number,
-  deps: T,
-  fn: (input: T, prevInput: T, prevValue?: U) => U,
-  options: { defer?: boolean } = {},
-): void {
-  const debouncedFn = debounce(delay, fn);
-
-  //@ts-expect-error not sure how to type this
-  createEffect(on(deps, debouncedFn, options));
-}
diff --git a/frontend/src/ts/hooks/createEffectOn.ts b/frontend/src/ts/hooks/createEffectOn.ts
deleted file mode 100644
index 4b729ba7faba..000000000000
--- a/frontend/src/ts/hooks/createEffectOn.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { createEffect, on } from "solid-js";
-
-// oxlint-disable-next-line typescript/no-explicit-any
-export function createEffectOn<T extends Array<() => any> | (() => any), U>(
-  deps: T,
-  fn: (input: T, prevInput: T, prevValue?: U) => U,
-  options: { defer?: boolean } = {},
-): void {
-  //@ts-expect-error not sure how to type this
-  createEffect(on(deps, fn, options));
-}
diff --git a/frontend/src/ts/hooks/effects.ts b/frontend/src/ts/hooks/effects.ts
new file mode 100644
index 000000000000..9f4de10fa76d
--- /dev/null
+++ b/frontend/src/ts/hooks/effects.ts
@@ -0,0 +1,37 @@
+import { createEffect, on } from "solid-js";
+import { debounce } from "throttle-debounce";
+
+type Accessor<T = unknown> = () => T;
+
+type OnValue<T> = T extends readonly Accessor[]
+  ? //@ts-expect-error huh?
+    { [K in keyof T]: ReturnType<T[K]> }
+  : T extends Accessor
+    ? ReturnType<T>
+    : never;
+
+export function createEffectOn<
+  T extends Accessor | readonly Accessor[],
+  U = void,
+>(
+  deps: T,
+  fn: (value: OnValue<T>, prev: OnValue<T> | undefined, prevValue?: U) => U,
+  options: { defer?: boolean } = {},
+): void {
+  //@ts-expect-error huh?
+  createEffect(on(deps as unknown, fn as unknown, options));
+}
+
+export function createDebouncedEffectOn<
+  T extends Accessor | readonly Accessor[],
+  U = void,
+>(
+  delay: number,
+  deps: T,
+  fn: (value: OnValue<T>, prev: OnValue<T> | undefined, prevValue?: U) => U,
+  options: { defer?: boolean } = {},
+): void {
+  const debouncedFn = debounce(delay, fn);
+  //@ts-expect-error huh?
+  createEffect(on(deps as unknown, debouncedFn as unknown, options));
+}

From 0d3391ec91f2889fd1406370d77ba3dab7a74808 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Mon, 19 Jan 2026 22:00:30 +0100
Subject: [PATCH 39/51] fix placement

---
 frontend/src/styles/settings.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/styles/settings.scss b/frontend/src/styles/settings.scss
index d01b5c168a6a..6aa5b86db954 100644
--- a/frontend/src/styles/settings.scss
+++ b/frontend/src/styles/settings.scss
@@ -426,6 +426,7 @@
 
       .theme.button {
         .favButton {
+          place-self: start;
           overflow: hidden;
           width: 1.25rem;
           transition: 0.25s;

From 96c33473ad19ac19c523a7dbc2f109a219fc62a3 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Mon, 19 Jan 2026 22:20:07 +0100
Subject: [PATCH 40/51] add debounce options

---
 frontend/src/ts/components/common/ChartJs.tsx | 2 ++
 frontend/src/ts/hooks/effects.ts              | 3 ++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/ts/components/common/ChartJs.tsx b/frontend/src/ts/components/common/ChartJs.tsx
index 0683d2fa6985..33d9afdb7dda 100644
--- a/frontend/src/ts/components/common/ChartJs.tsx
+++ b/frontend/src/ts/components/common/ChartJs.tsx
@@ -56,6 +56,8 @@ export function ChartJs<T extends ChartType, TData = DefaultDataPoint<T>>(
     500,
     getTheme,
     (theme) => void chart?.updateColors(theme),
+    {},
+    { atBegin: true },
   );
 
   onCleanup(() => {
diff --git a/frontend/src/ts/hooks/effects.ts b/frontend/src/ts/hooks/effects.ts
index 9f4de10fa76d..dfee2e45e72e 100644
--- a/frontend/src/ts/hooks/effects.ts
+++ b/frontend/src/ts/hooks/effects.ts
@@ -30,8 +30,9 @@ export function createDebouncedEffectOn<
   deps: T,
   fn: (value: OnValue<T>, prev: OnValue<T> | undefined, prevValue?: U) => U,
   options: { defer?: boolean } = {},
+  debounceOptions: { atBegin?: boolean } = {},
 ): void {
-  const debouncedFn = debounce(delay, fn);
+  const debouncedFn = debounce(delay, fn, debounceOptions);
   //@ts-expect-error huh?
   createEffect(on(deps as unknown, debouncedFn as unknown, options));
 }

From 852e9142a614092a371fd9e7153790832fc470b1 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Mon, 19 Jan 2026 22:34:42 +0100
Subject: [PATCH 41/51] indent

---
 frontend/src/ts/components/layout/FavIcon.tsx | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/src/ts/components/layout/FavIcon.tsx b/frontend/src/ts/components/layout/FavIcon.tsx
index 7048a9d85614..69f061836b05 100644
--- a/frontend/src/ts/components/layout/FavIcon.tsx
+++ b/frontend/src/ts/components/layout/FavIcon.tsx
@@ -16,17 +16,17 @@ export function FavIcon(props: { theme: Theme }): JSXElement {
     }
 
     const svgPre = `
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <style>
-    #bg{fill:${bg};}
-    path{fill:${main};}
-  </style>
-  <g>
-    <path id="bg" d="M0 16Q0 0 16 0h32q16 0 16 16v32q0 16-16 16H16Q0 64 0 48"/>
-    <path d="M9.09 24.1v21.2h5.12V33.1q.256-4.61 4.48-4.61 3.46.384 3.46 3.84v12.9h5.12v-11.5q-.128-5.25 4.48-5.25 3.46.384 3.46 3.84v12.9h5.12v-12.2q0-9.47-7.04-9.47-4.22 0-7.04 3.46-2.18-3.46-6.02-3.46-3.46 0-6.02 2.43v-2.05M47 18.9v5.12h-4.61v5.12H47v16.1h5.12v-16.1h4.61v-5.12h-4.61V18.9"/>
-  </g>
-</svg>
-`;
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+      <style>
+        #bg{fill:${bg};}
+        path{fill:${main};}
+      </style>
+      <g>
+        <path id="bg" d="M0 16Q0 0 16 0h32q16 0 16 16v32q0 16-16 16H16Q0 64 0 48"/>
+        <path d="M9.09 24.1v21.2h5.12V33.1q.256-4.61 4.48-4.61 3.46.384 3.46 3.84v12.9h5.12v-11.5q-.128-5.25 4.48-5.25 3.46.384 3.46 3.84v12.9h5.12v-12.2q0-9.47-7.04-9.47-4.22 0-7.04 3.46-2.18-3.46-6.02-3.46-3.46 0-6.02 2.43v-2.05M47 18.9v5.12h-4.61v5.12H47v16.1h5.12v-16.1h4.61v-5.12h-4.61V18.9"/>
+      </g>
+    </svg>
+    `;
     return "data:image/svg+xml;base64," + btoa(svgPre);
   });
 

From 19aff9ecfbee2edc3cd605e012f8cccb99a23e68 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Mon, 19 Jan 2026 22:38:59 +0100
Subject: [PATCH 42/51] move components which arent really part of the layout

---
 .../components/Layout/Theme.spec.tsx          |  2 +-
 .../components/{layout => core}/FavIcon.tsx   |  0
 frontend/src/ts/components/core/Theme.tsx     | 85 +++++++++++++++++++
 frontend/src/ts/components/layout/Theme.tsx   |  3 +-
 frontend/src/ts/components/mount.tsx          |  2 +-
 5 files changed, 88 insertions(+), 4 deletions(-)
 rename frontend/src/ts/components/{layout => core}/FavIcon.tsx (100%)
 create mode 100644 frontend/src/ts/components/core/Theme.tsx

diff --git a/frontend/__tests__/components/Layout/Theme.spec.tsx b/frontend/__tests__/components/Layout/Theme.spec.tsx
index 719c8a2c0a1d..d8a8f8506444 100644
--- a/frontend/__tests__/components/Layout/Theme.spec.tsx
+++ b/frontend/__tests__/components/Layout/Theme.spec.tsx
@@ -2,7 +2,7 @@ import { render, fireEvent } from "@solidjs/testing-library";
 import { createSignal } from "solid-js";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 
-import { Theme } from "../../../src/ts/components/layout/Theme";
+import { Theme } from "../../../src/ts/components/core/Theme";
 import { ThemeWithName } from "../../../src/ts/constants/themes";
 import * as Notifications from "../../../src/ts/elements/notifications";
 import * as Loader from "../../../src/ts/signals/loader-bar";
diff --git a/frontend/src/ts/components/layout/FavIcon.tsx b/frontend/src/ts/components/core/FavIcon.tsx
similarity index 100%
rename from frontend/src/ts/components/layout/FavIcon.tsx
rename to frontend/src/ts/components/core/FavIcon.tsx
diff --git a/frontend/src/ts/components/core/Theme.tsx b/frontend/src/ts/components/core/Theme.tsx
new file mode 100644
index 000000000000..47441553de51
--- /dev/null
+++ b/frontend/src/ts/components/core/Theme.tsx
@@ -0,0 +1,85 @@
+import { Link, Meta, MetaProvider, Style } from "@solidjs/meta";
+import { createEffect, createMemo, JSXElement } from "solid-js";
+
+import { themes } from "../../constants/themes";
+import * as Notifications from "../../elements/notifications";
+import { createDebouncedEffectOn } from "../../hooks/effects";
+import { useRefWithUtils } from "../../hooks/useRefWithUtils";
+import { hideLoaderBar, showLoaderBar } from "../../signals/loader-bar";
+import { getTheme } from "../../signals/theme";
+
+import { FavIcon } from "./FavIcon";
+
+export function Theme(): JSXElement {
+  // Refs are assigned by SolidJS via the ref attribute
+  const [styleRef, styleEl] = useRefWithUtils<HTMLStyleElement>();
+  const [linkRef, linkEl] = useRefWithUtils<HTMLLinkElement>();
+
+  //Use memo to ignore signals without changes, needed for the css loading
+  const getThemeName = createMemo(() => getTheme().name);
+
+  const onLoad = (e: Event): void => {
+    hideLoaderBar();
+    const target = e.target as HTMLLinkElement;
+    if (target.href !== "") {
+      console.debug(
+        `Theme controller loaded style for theme ${target.dataset["name"]}`,
+      );
+    }
+  };
+
+  const onError = (e: Event): void => {
+    hideLoaderBar();
+    const target = e.target as HTMLLinkElement;
+    const name = target.dataset["name"];
+    console.debug("Theme controller failed to load style", name, e);
+    console.error(`Failed to load theme ${name}`, e);
+    Notifications.add("Failed to load theme", 0);
+  };
+
+  createDebouncedEffectOn(100, getTheme, (colors) => {
+    styleEl()?.setHtml(`
+:root {
+    --bg-color: ${colors.bg};
+    --main-color: ${colors.main};
+    --caret-color: ${colors.caret};
+    --sub-color: ${colors.sub};
+    --sub-alt-color: ${colors.subAlt};
+    --text-color: ${colors.text};
+    --error-color: ${colors.error};
+    --error-extra-color: ${colors.errorExtra};
+    --colorful-error-color: ${colors.colorfulError};
+    --colorful-error-extra-color: ${colors.colorfulErrorExtra};
+}`);
+  });
+
+  createEffect(() => {
+    const name = getThemeName();
+    const hasCss = name !== "custom" && (themes[name].hasCss ?? false);
+    console.debug(
+      `Theme controller ${hasCss ? "loading style" : "removing style"} for theme ${name}`,
+    );
+    if (hasCss) showLoaderBar();
+    linkEl()?.setAttribute("href", hasCss ? `/themes/${name}.css` : "");
+  });
+
+  return (
+    <MetaProvider>
+      <Style id="theme" ref={styleRef} />
+      <Link
+        ref={linkRef}
+        rel="stylesheet"
+        id="currentTheme"
+        data-name={getTheme().name}
+        onError={onError}
+        onLoad={onLoad}
+      />
+      <Meta
+        id="metaThemeColor"
+        name="theme-color"
+        content="getThemeColors().bg"
+      />
+      <FavIcon theme={getTheme()} />
+    </MetaProvider>
+  );
+}
diff --git a/frontend/src/ts/components/layout/Theme.tsx b/frontend/src/ts/components/layout/Theme.tsx
index 47441553de51..698eade2ffac 100644
--- a/frontend/src/ts/components/layout/Theme.tsx
+++ b/frontend/src/ts/components/layout/Theme.tsx
@@ -7,8 +7,7 @@ import { createDebouncedEffectOn } from "../../hooks/effects";
 import { useRefWithUtils } from "../../hooks/useRefWithUtils";
 import { hideLoaderBar, showLoaderBar } from "../../signals/loader-bar";
 import { getTheme } from "../../signals/theme";
-
-import { FavIcon } from "./FavIcon";
+import { FavIcon } from "../core/FavIcon";
 
 export function Theme(): JSXElement {
   // Refs are assigned by SolidJS via the ref attribute
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index 7cb26def2a50..7ece1520efe5 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -3,9 +3,9 @@ import { render } from "solid-js/web";
 
 import { qsa } from "../utils/dom";
 
+import { Theme } from "./core/Theme";
 import { Footer } from "./layout/footer/Footer";
 import { Overlays } from "./layout/overlays/Overlays";
-import { Theme } from "./layout/Theme";
 import { Modals } from "./modals/Modals";
 import { AboutPage } from "./pages/AboutPage";
 

From 045a77b8d6c4c41ff027b6d64e50732e007c54d4 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Mon, 19 Jan 2026 22:39:38 +0100
Subject: [PATCH 43/51] strings

---
 frontend/src/ts/components/core/Theme.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/ts/components/core/Theme.tsx b/frontend/src/ts/components/core/Theme.tsx
index 47441553de51..a35e1f695b26 100644
--- a/frontend/src/ts/components/core/Theme.tsx
+++ b/frontend/src/ts/components/core/Theme.tsx
@@ -23,7 +23,7 @@ export function Theme(): JSXElement {
     const target = e.target as HTMLLinkElement;
     if (target.href !== "") {
       console.debug(
-        `Theme controller loaded style for theme ${target.dataset["name"]}`,
+        `Theme component loaded style for theme ${target.dataset["name"]}`,
       );
     }
   };
@@ -32,7 +32,7 @@ export function Theme(): JSXElement {
     hideLoaderBar();
     const target = e.target as HTMLLinkElement;
     const name = target.dataset["name"];
-    console.debug("Theme controller failed to load style", name, e);
+    console.debug("Theme component failed to load style", name, e);
     console.error(`Failed to load theme ${name}`, e);
     Notifications.add("Failed to load theme", 0);
   };
@@ -57,7 +57,7 @@ export function Theme(): JSXElement {
     const name = getThemeName();
     const hasCss = name !== "custom" && (themes[name].hasCss ?? false);
     console.debug(
-      `Theme controller ${hasCss ? "loading style" : "removing style"} for theme ${name}`,
+      `Theme component ${hasCss ? "loading style" : "removing style"} for theme ${name}`,
     );
     if (hasCss) showLoaderBar();
     linkEl()?.setAttribute("href", hasCss ? `/themes/${name}.css` : "");

From adc2503ddb7178460a5451c068bd0c3d88553539 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Mon, 19 Jan 2026 22:49:43 +0100
Subject: [PATCH 44/51] at begin

---
 .../src/ts/controllers/chart-controller.ts    | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
index 8f73f39623e7..254ca100b318 100644
--- a/frontend/src/ts/controllers/chart-controller.ts
+++ b/frontend/src/ts/controllers/chart-controller.ts
@@ -1346,13 +1346,19 @@ function setDefaultFontFamily(font: string): void {
   Chart.defaults.font.family = font.replace(/_/g, " ");
 }
 
-createDebouncedEffectOn(500, getTheme, (theme) => {
-  void result.updateColors(theme);
-  void accountHistory.updateColors(theme);
-  void accountHistogram.updateColors(theme);
-  void accountActivity.updateColors(theme);
-  void miniResult.updateColors(theme);
-});
+createDebouncedEffectOn(
+  500,
+  getTheme,
+  (theme) => {
+    void result.updateColors(theme);
+    void accountHistory.updateColors(theme);
+    void accountHistogram.updateColors(theme);
+    void accountActivity.updateColors(theme);
+    void miniResult.updateColors(theme);
+  },
+  {},
+  { atBegin: true },
+);
 
 ConfigEvent.subscribe(({ key, newValue }) => {
   if (key === "accountChart" && getActivePage() === "account") {

From 26f810b3200fc13c98db329ec28b70a77607a3a4 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Mon, 19 Jan 2026 23:01:42 +0100
Subject: [PATCH 45/51] throw if color is invalid

---
 .../src/ts/elements/settings/theme-picker.ts  | 19 ++++++++++++++-----
 frontend/src/ts/utils/colors.ts               |  5 +++--
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index abd836ae01bd..8d779f3b62e3 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -189,7 +189,7 @@ export function setCustomInputs(): void {
     ".pageSettings .section.themes .tabContainer .customTheme .colorPicker",
   ).forEach((element) => {
     const key = element.getAttribute("data-key") as ColorName;
-    const color = Colors.convertColorToHex(theme[key]);
+    const color = Colors.convertStringToHex(theme[key]);
     updateColorPicker(key, color);
   });
 }
@@ -317,9 +317,18 @@ function handleColorInput(props: {
       ?.closest(".colorPicker")
       ?.getAttribute("data-key") as ColorName;
 
-    const color = props?.convertColor
-      ? Colors.convertColorToHex(target.value)
-      : target.value;
+    let color: string;
+
+    if (props.convertColor) {
+      try {
+        color = Colors.convertStringToHex(target.value);
+      } catch {
+        Notifications.add("Invalid color format", 0);
+        color = "#000000";
+      }
+    } else {
+      color = target.value;
+    }
 
     updateColorPicker(key, color);
     updateThemeColor(key, color);
@@ -362,7 +371,7 @@ $(".pageSettings #loadCustomColorsFromPreset").on("click", async () => {
   Misc.typedKeys(themeColors)
     .filter((key) => key !== "hasCss" && key !== "name")
     .forEach((key) =>
-      updateColorPicker(key, Colors.convertColorToHex(themeColors[key])),
+      updateColorPicker(key, Colors.convertStringToHex(themeColors[key])),
     );
 });
 
diff --git a/frontend/src/ts/utils/colors.ts b/frontend/src/ts/utils/colors.ts
index a34bbf9d1405..2a5d0b1ef294 100644
--- a/frontend/src/ts/utils/colors.ts
+++ b/frontend/src/ts/utils/colors.ts
@@ -269,8 +269,9 @@ export function hslToRgb(
  *  some system color pickers return rgb or hsl values. We need to convert them to hex before storing
  * @param color as hex, hsl or rgb
  * @returns  hex color
+ * @throws if the input color is not valid
  */
-export function convertColorToHex(color: string): string {
+export function convertStringToHex(color: string): string {
   const input = color.trim().toLocaleLowerCase();
   if (/^#[0-9a-f]{6}$/i.test(input)) {
     return input;
@@ -310,5 +311,5 @@ export function convertColorToHex(color: string): string {
     const { r, g, b } = hslToRgb(h, s, l);
     return rgbToHex(r, g, b);
   }
-  return "#fc0fc0"; // default color if input is not a valid
+  throw new Error(`Invalid color format: ${color}`);
 }

From f0fdb87ae8cb59bc107d20947bb8a359c00299f5 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Mon, 19 Jan 2026 23:11:36 +0100
Subject: [PATCH 46/51] remove todo

---
 frontend/src/ts/constants/themes.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/ts/constants/themes.ts b/frontend/src/ts/constants/themes.ts
index faba3ce6d560..d91376dc56dc 100644
--- a/frontend/src/ts/constants/themes.ts
+++ b/frontend/src/ts/constants/themes.ts
@@ -9,7 +9,6 @@ const hexColorSchema = z
     "Invalid hex color",
   );
 
-//TODO remove the optionals after migration
 export const ThemeSchema = z.object({
   hasCss: z.boolean().optional(),
   bg: hexColorSchema,

From e6a24bf4b2ebce0aab35fe7ffbacaa02b05ad843 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Mon, 19 Jan 2026 23:15:26 +0100
Subject: [PATCH 47/51] remove duplicate Theme.tsx, fix metaThemeColor

---
 frontend/src/ts/components/core/Theme.tsx   |  6 +-
 frontend/src/ts/components/layout/Theme.tsx | 84 ---------------------
 2 files changed, 1 insertion(+), 89 deletions(-)
 delete mode 100644 frontend/src/ts/components/layout/Theme.tsx

diff --git a/frontend/src/ts/components/core/Theme.tsx b/frontend/src/ts/components/core/Theme.tsx
index a35e1f695b26..0bd3b18c89a7 100644
--- a/frontend/src/ts/components/core/Theme.tsx
+++ b/frontend/src/ts/components/core/Theme.tsx
@@ -74,11 +74,7 @@ export function Theme(): JSXElement {
         onError={onError}
         onLoad={onLoad}
       />
-      <Meta
-        id="metaThemeColor"
-        name="theme-color"
-        content="getThemeColors().bg"
-      />
+      <Meta id="metaThemeColor" name="theme-color" content={getTheme().bg} />
       <FavIcon theme={getTheme()} />
     </MetaProvider>
   );
diff --git a/frontend/src/ts/components/layout/Theme.tsx b/frontend/src/ts/components/layout/Theme.tsx
deleted file mode 100644
index 698eade2ffac..000000000000
--- a/frontend/src/ts/components/layout/Theme.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Link, Meta, MetaProvider, Style } from "@solidjs/meta";
-import { createEffect, createMemo, JSXElement } from "solid-js";
-
-import { themes } from "../../constants/themes";
-import * as Notifications from "../../elements/notifications";
-import { createDebouncedEffectOn } from "../../hooks/effects";
-import { useRefWithUtils } from "../../hooks/useRefWithUtils";
-import { hideLoaderBar, showLoaderBar } from "../../signals/loader-bar";
-import { getTheme } from "../../signals/theme";
-import { FavIcon } from "../core/FavIcon";
-
-export function Theme(): JSXElement {
-  // Refs are assigned by SolidJS via the ref attribute
-  const [styleRef, styleEl] = useRefWithUtils<HTMLStyleElement>();
-  const [linkRef, linkEl] = useRefWithUtils<HTMLLinkElement>();
-
-  //Use memo to ignore signals without changes, needed for the css loading
-  const getThemeName = createMemo(() => getTheme().name);
-
-  const onLoad = (e: Event): void => {
-    hideLoaderBar();
-    const target = e.target as HTMLLinkElement;
-    if (target.href !== "") {
-      console.debug(
-        `Theme controller loaded style for theme ${target.dataset["name"]}`,
-      );
-    }
-  };
-
-  const onError = (e: Event): void => {
-    hideLoaderBar();
-    const target = e.target as HTMLLinkElement;
-    const name = target.dataset["name"];
-    console.debug("Theme controller failed to load style", name, e);
-    console.error(`Failed to load theme ${name}`, e);
-    Notifications.add("Failed to load theme", 0);
-  };
-
-  createDebouncedEffectOn(100, getTheme, (colors) => {
-    styleEl()?.setHtml(`
-:root {
-    --bg-color: ${colors.bg};
-    --main-color: ${colors.main};
-    --caret-color: ${colors.caret};
-    --sub-color: ${colors.sub};
-    --sub-alt-color: ${colors.subAlt};
-    --text-color: ${colors.text};
-    --error-color: ${colors.error};
-    --error-extra-color: ${colors.errorExtra};
-    --colorful-error-color: ${colors.colorfulError};
-    --colorful-error-extra-color: ${colors.colorfulErrorExtra};
-}`);
-  });
-
-  createEffect(() => {
-    const name = getThemeName();
-    const hasCss = name !== "custom" && (themes[name].hasCss ?? false);
-    console.debug(
-      `Theme controller ${hasCss ? "loading style" : "removing style"} for theme ${name}`,
-    );
-    if (hasCss) showLoaderBar();
-    linkEl()?.setAttribute("href", hasCss ? `/themes/${name}.css` : "");
-  });
-
-  return (
-    <MetaProvider>
-      <Style id="theme" ref={styleRef} />
-      <Link
-        ref={linkRef}
-        rel="stylesheet"
-        id="currentTheme"
-        data-name={getTheme().name}
-        onError={onError}
-        onLoad={onLoad}
-      />
-      <Meta
-        id="metaThemeColor"
-        name="theme-color"
-        content="getThemeColors().bg"
-      />
-      <FavIcon theme={getTheme()} />
-    </MetaProvider>
-  );
-}

From 9eb814fff9f5b18c6dc0004c2c88765f4b9a2476 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Mon, 19 Jan 2026 23:32:25 +0100
Subject: [PATCH 48/51] move text with component, fix

---
 frontend/__tests__/components/{Layout => core}/Theme.spec.tsx | 4 ++++
 1 file changed, 4 insertions(+)
 rename frontend/__tests__/components/{Layout => core}/Theme.spec.tsx (98%)

diff --git a/frontend/__tests__/components/Layout/Theme.spec.tsx b/frontend/__tests__/components/core/Theme.spec.tsx
similarity index 98%
rename from frontend/__tests__/components/Layout/Theme.spec.tsx
rename to frontend/__tests__/components/core/Theme.spec.tsx
index d8a8f8506444..c98f119e30e7 100644
--- a/frontend/__tests__/components/Layout/Theme.spec.tsx
+++ b/frontend/__tests__/components/core/Theme.spec.tsx
@@ -27,6 +27,7 @@ describe("Theme component", () => {
   const notificationAddMock = vi.spyOn(Notifications, "add");
 
   beforeEach(() => {
+    vi.useFakeTimers();
     vi.clearAllMocks();
     loaderShowMock.mockClear();
     loaderHideMock.mockClear();
@@ -116,6 +117,9 @@ describe("Theme component", () => {
   } {
     render(() => <Theme />);
 
+    //wait for debounce
+    vi.runAllTimers();
+
     //make sure content is rendered to the head, not the body
     const head = document.head;
 

From 5066b451233e1cd3e1422d1c49add0c201c704b1 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 20 Jan 2026 14:59:38 +0100
Subject: [PATCH 49/51] remove at begin

---
 frontend/src/ts/components/common/ChartJs.tsx |  2 --
 .../src/ts/controllers/chart-controller.ts    | 20 +++++++------------
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/frontend/src/ts/components/common/ChartJs.tsx b/frontend/src/ts/components/common/ChartJs.tsx
index 33d9afdb7dda..0683d2fa6985 100644
--- a/frontend/src/ts/components/common/ChartJs.tsx
+++ b/frontend/src/ts/components/common/ChartJs.tsx
@@ -56,8 +56,6 @@ export function ChartJs<T extends ChartType, TData = DefaultDataPoint<T>>(
     500,
     getTheme,
     (theme) => void chart?.updateColors(theme),
-    {},
-    { atBegin: true },
   );
 
   onCleanup(() => {
diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
index 254ca100b318..8f73f39623e7 100644
--- a/frontend/src/ts/controllers/chart-controller.ts
+++ b/frontend/src/ts/controllers/chart-controller.ts
@@ -1346,19 +1346,13 @@ function setDefaultFontFamily(font: string): void {
   Chart.defaults.font.family = font.replace(/_/g, " ");
 }
 
-createDebouncedEffectOn(
-  500,
-  getTheme,
-  (theme) => {
-    void result.updateColors(theme);
-    void accountHistory.updateColors(theme);
-    void accountHistogram.updateColors(theme);
-    void accountActivity.updateColors(theme);
-    void miniResult.updateColors(theme);
-  },
-  {},
-  { atBegin: true },
-);
+createDebouncedEffectOn(500, getTheme, (theme) => {
+  void result.updateColors(theme);
+  void accountHistory.updateColors(theme);
+  void accountHistogram.updateColors(theme);
+  void accountActivity.updateColors(theme);
+  void miniResult.updateColors(theme);
+});
 
 ConfigEvent.subscribe(({ key, newValue }) => {
   if (key === "accountChart" && getActivePage() === "account") {

From 9a85d0fc56314b233c35d19421268c72ec1718e7 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 20 Jan 2026 15:02:06 +0100
Subject: [PATCH 50/51] debounce delays

---
 frontend/src/ts/components/common/ChartJs.tsx   | 2 +-
 frontend/src/ts/components/core/Theme.tsx       | 2 +-
 frontend/src/ts/controllers/chart-controller.ts | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/ts/components/common/ChartJs.tsx b/frontend/src/ts/components/common/ChartJs.tsx
index 0683d2fa6985..dae20fcd8af7 100644
--- a/frontend/src/ts/components/common/ChartJs.tsx
+++ b/frontend/src/ts/components/common/ChartJs.tsx
@@ -53,7 +53,7 @@ export function ChartJs<T extends ChartType, TData = DefaultDataPoint<T>>(
   });
 
   createDebouncedEffectOn(
-    500,
+    125,
     getTheme,
     (theme) => void chart?.updateColors(theme),
   );
diff --git a/frontend/src/ts/components/core/Theme.tsx b/frontend/src/ts/components/core/Theme.tsx
index 0bd3b18c89a7..3f624f3b4de6 100644
--- a/frontend/src/ts/components/core/Theme.tsx
+++ b/frontend/src/ts/components/core/Theme.tsx
@@ -37,7 +37,7 @@ export function Theme(): JSXElement {
     Notifications.add("Failed to load theme", 0);
   };
 
-  createDebouncedEffectOn(100, getTheme, (colors) => {
+  createDebouncedEffectOn(125, getTheme, (colors) => {
     styleEl()?.setHtml(`
 :root {
     --bg-color: ${colors.bg};
diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
index 8f73f39623e7..3f08b8b96adb 100644
--- a/frontend/src/ts/controllers/chart-controller.ts
+++ b/frontend/src/ts/controllers/chart-controller.ts
@@ -1346,7 +1346,7 @@ function setDefaultFontFamily(font: string): void {
   Chart.defaults.font.family = font.replace(/_/g, " ");
 }
 
-createDebouncedEffectOn(500, getTheme, (theme) => {
+createDebouncedEffectOn(125, getTheme, (theme) => {
   void result.updateColors(theme);
   void accountHistory.updateColors(theme);
   void accountHistogram.updateColors(theme);

From 6aca3941a070bf05b8adaddd087b9543cb11cc5e Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 20 Jan 2026 15:19:04 +0100
Subject: [PATCH 51/51] review comments

---
 frontend/src/html/head.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/html/head.html b/frontend/src/html/head.html
index bea5f878d55d..ac53517ccbb4 100644
--- a/frontend/src/html/head.html
+++ b/frontend/src/html/head.html
@@ -26,7 +26,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Monkeytype | A minimalistic, customizable typing test</title>
-  <style id="themeFallback">
+  <!-- fallback theme colors -->
+  <style>
     :root {
       --bg-color: #323437;
       --main-color: #e2b714;