refactor(theme): add theme component, remove duplicate color definitions (@fehmer)

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,20 +381,27 @@ 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
   themeFiles
     .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()) {

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 -->
-  <style>
+  <style id="themeFallback">
     :root {
       --bg-color: #323437;
       --main-color: #e2b714;
@@ -41,6 +40,7 @@
       --colorful-error-extra-color: #7e2a33;
     }
   </style>
+  <Theme />
   <link
     rel="icon"
     type="image/x-icon"

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,21 +1551,16 @@
                   type="color"
                   class="color"
                   value="#000000"
-                  id="--bg-color"
+                  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);
@@ -1583,39 +1573,29 @@
                   type="color"
                   class="color"
                   value="#000000"
-                  id="--sub-alt-color"
+                  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"
+                  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>
@@ -1629,41 +1609,31 @@
             </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"
+                  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"
+                  id="colorPickerText"
                 />
               </div>
             </div>
@@ -1672,83 +1642,66 @@
 
             <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"
+                  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"
+                  id="colorPickerExtraError"
                 />
               </div>
             </div>
 
             <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"
+                  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"
+                  id="colorPickerColorfulErrorExtra"
                 />
               </div>
             </div>

frontend/src/index.html

@@ -71,7 +71,7 @@
       async
       defer
     ></script>
-    <link rel="stylesheet" href="/themes/serika_dark.css" id="currentTheme" />
+
     <link rel="stylesheet" href="" id="globalFunBoxTheme" type="text/css" />
     <script type="module" src="ts/index.ts"></script>
   </body>

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 {

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>`;