fix(ui): fix uninitialized theme classes

src/main/main.ts

@@ -14,7 +14,7 @@ import events from "node:events";
 import os from "node:os";
 import { pathToFileURL } from "node:url";
 import path from "path";
-import dedent from "ts-dedent";
+import { dedent } from "ts-dedent";
 import pkg from "~/package.json";
 import { runInstrumentedTest } from "~/test/instrumented/entry";
 import "v8-compile-cache";
@@ -210,6 +210,7 @@ function injectDevToolsStyles(w: BrowserWindow) {
     if (os.platform() !== "win32") return;
 
     w.webContents.on("devtools-opened", () => {
+        console.log(dedent);
         const css = dedent`
             :root {
                 --source-code-font-family: 'JetBrains Mono', Consolas, 'Courier New', monospace !important;

src/renderer/App.tsx

@@ -1,4 +1,5 @@
 import { i18n } from "@/renderer/i18n/i18n";
+import { useTheme } from "@/renderer/theme";
 import { Header } from "@components/Header";
 import { HeroUIProvider } from "@heroui/react";
 import { About } from "@pages/about/About";
@@ -12,6 +13,7 @@ import pkg from "~/package.json";
  */
 export const App: FC = () => {
     const [, navigate] = useLocation();
+    useTheme();
 
     i18n.useAutoFontClass();
 

src/renderer/theme.ts

@@ -1,6 +1,5 @@
-import { isTruthy } from "@/main/util/misc";
 import type { ConfigTheme } from "@heroui/react";
-import { type Dispatch, type SetStateAction, useEffect, useRef, useState } from "react";
+import { type Dispatch, type SetStateAction, useEffect, useRef } from "react";
 import { useLocalStorage } from "react-use";
 import themes from "~/themes";
 
@@ -13,14 +12,20 @@ function isDark(th: string) {
 }
 
 export function useTheme() {
-    useState();
     const [theme, setTheme] = useLocalStorage("theme", "dark") as [string, Dispatch<SetStateAction<string>>, () => void];
-    const originalTheme = useRef(theme);
+    const originalTheme = useRef<string | null>(null);
 
     useEffect(() => {
-        const clazz = [theme, isDark(theme) && "dark"].filter(isTruthy);
-        document.documentElement.classList.remove(originalTheme.current, "dark");
-        document.documentElement.classList.add(...clazz);
+        if (originalTheme.current) {
+            document.documentElement.classList.remove(originalTheme.current, "dark");
+        }
+
+        console.log(`Adding theme: ${theme}`);
+        document.documentElement.classList.add(theme);
+        if (isDark(theme)) {
+            document.documentElement.classList.add("dark");
+        }
+
         originalTheme.current = theme;
     }, [theme]);