wip

Author: 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 -->
-  <ThemeColors />
+  <Theme />
   <link
     rel="icon"
     type="image/x-icon"

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>

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/lists/themes.ts

@@ -2,20 +2,20 @@ 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);
 
 /**
  * creates a theme command object for the given theme
  * @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 = [];
 

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

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" />
+    </>
+  );
+}

frontend/src/ts/components/layout/ThemeColors.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 {

frontend/src/ts/components/mount.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">