feat(mobx): start implementing theme store

src/context/Theme.tsx

@@ -6,9 +6,6 @@ import { useEffect } from "preact/hooks";
 
 import { useApplicationState } from "../mobx/State";
 import { getState } from "../redux";
-import { connectState } from "../redux/connector";
-
-import { Children } from "../types/Preact";
 
 export type Variables =
     | "accent"
@@ -66,9 +63,11 @@ export type MonospaceFonts =
     | "Ubuntu Mono"
     | "JetBrains Mono";
 
-export type Theme = {
+export type Overrides = {
     [variable in Variables]: string;
-} & {
+};
+
+export type Theme = Overrides & {
     light?: boolean;
     font?: Fonts;
     css?: string;
@@ -228,7 +227,6 @@ export const DEFAULT_MONO_FONT = "Fira Code";
 // Generated from https://gitlab.insrt.uk/revolt/community/themes
 export const PRESETS: Record<string, Theme> = {
     light: {
-        light: true,
         accent: "#FD6671",
         background: "#F6F6F6",
         foreground: "#000000",
@@ -255,7 +253,6 @@ export const PRESETS: Record<string, Theme> = {
         "status-invisible": "#A5A5A5",
     },
     dark: {
-        light: false,
         accent: "#FD6671",
         background: "#191919",
         foreground: "#F6F6F6",
@@ -319,33 +316,22 @@ export const generateVariables = (theme: Theme) => {
     });
 };
 
-// Load the default default them and apply extras later
-export const ThemeContext = createContext<Theme>(PRESETS["dark"]);
-
-interface Props {
-    children: Children;
-}
-
-export default function Theme({ children }: Props) {
+export default function Theme() {
     const settings = useApplicationState().settings;
-
-    const theme: Theme = {
-        ...getBaseTheme(settings.get("appearance:theme:base") ?? "dark"),
-        ...settings.get("appearance:theme:custom"),
-    };
+    const theme = settings.theme;
 
     const root = document.documentElement.style;
     useEffect(() => {
-        const font = theme.font ?? DEFAULT_FONT;
+        const font = theme.getFont() ?? DEFAULT_FONT;
         root.setProperty("--font", `"${font}"`);
         FONTS[font].load();
-    }, [root, theme.font]);
+    }, [root, theme.getFont()]);
 
     useEffect(() => {
-        const font = theme.monospaceFont ?? DEFAULT_MONO_FONT;
+        const font = theme.getMonospaceFont() ?? DEFAULT_MONO_FONT;
         root.setProperty("--monospace-font", `"${font}"`);
         MONOSPACE_FONTS[font].load();
-    }, [root, theme.monospaceFont]);
+    }, [root, theme.getMonospaceFont()]);
 
     useEffect(() => {
         root.setProperty(
@@ -363,16 +349,14 @@ export default function Theme({ children }: Props) {
         return () => window.removeEventListener("resize", resize);
     }, [root]);
 
+    const variables = theme.getVariables();
     return (
-        <ThemeContext.Provider value={theme}>
+        <>
             <Helmet>
-                <meta name="theme-color" content={theme["background"]} />
+                <meta name="theme-color" content={variables["background"]} />
             </Helmet>
-            <GlobalTheme theme={theme} />
-            {theme.css && (
-                <style dangerouslySetInnerHTML={{ __html: theme.css }} />
-            )}
-            {children}
-        </ThemeContext.Provider>
+            <GlobalTheme theme={variables} />
+            <style dangerouslySetInnerHTML={{ __html: theme.getCSS() ?? "" }} />
+        </>
     );
 }

src/context/index.tsx

@@ -17,15 +17,14 @@ export default function Context({ children }: { children: Children }) {
     return (
         <Router basename={import.meta.env.BASE_URL}>
             <State>
-                <Theme>
-                    <Settings>
-                        <Locale>
-                            <Intermediate>
-                                <Client>{children}</Client>
-                            </Intermediate>
-                        </Locale>
-                    </Settings>
-                </Theme>
+                <Settings>
+                    <Locale>
+                        <Intermediate>
+                            <Client>{children}</Client>
+                        </Intermediate>
+                    </Locale>
+                </Settings>
+                <Theme />
             </State>
         </Router>
     );