wip

Author: fehmer

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"

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>

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

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

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 {

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",