From 6c1af29847163882f0117340a3885b915d21f554 Mon Sep 17 00:00:00 2001
From: Chris Kruining <c.kruining@4dotnet.nl>
Date: Thu, 28 Nov 2024 13:14:56 +0100
Subject: [PATCH] fix color scheme???

---
 src/components/colorschemepicker.tsx | 10 +++-------
 src/routes/(editor).tsx              | 20 ++++++++++++++------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/colorschemepicker.tsx b/src/components/colorschemepicker.tsx
index 0f4c9bb..2ba96de 100644
--- a/src/components/colorschemepicker.tsx
+++ b/src/components/colorschemepicker.tsx
@@ -52,13 +52,13 @@ const ThemeContext = createContext<ThemeContextType>();
 const useStore = () => useContext(ThemeContext)!;
 
 export const useTheme = () => {
-    const { theme } = useContext(ThemeContext) ?? {};
+    const ctx = useContext(ThemeContext);
 
-    if (theme === undefined) {
+    if (ctx === undefined) {
         throw new Error('useColorScheme is called outside a <ColorSchemeProvider />');
     }
 
-    return theme;
+    return ctx.theme;
 };
 
 export const ThemeProvider: ParentComponent = (props) => {
@@ -73,10 +73,6 @@ export const ThemeProvider: ParentComponent = (props) => {
                 setStore(state());
             });
 
-            createEffect(() => {
-                console.log({ ...store })
-            });
-
             return <ThemeContext.Provider value={{
                 get theme() { return store; },
                 setColorScheme(colorScheme: ColorScheme) { updateState(mutate(prev => ({ ...prev, colorScheme }))) },
diff --git a/src/routes/(editor).tsx b/src/routes/(editor).tsx
index 2837732..c6cb51b 100644
--- a/src/routes/(editor).tsx
+++ b/src/routes/(editor).tsx
@@ -38,16 +38,24 @@ export default function Editor(props: ParentProps) {
         <Title>Calque</Title>
 
         <Show when={theme}>{
-            theme => <>
-                <meta name="color-scheme" content={theme().colorScheme} />
-                <meta name="theme-color" content="light-dark(#f0f, #0f0)" />
+            theme => {
+                const themeColor = createMemo(() => {
+                    theme();
 
-                <style>{`
+                    return window.getComputedStyle(document.body).backgroundColor;
+                });
+
+                return <>
+                    <Meta name="color-scheme" content={theme().colorScheme} />
+                    <Meta name="theme-color" content={themeColor()} />
+
+                    <Style>{`
                     :root {
                         --hue: ${theme().hue}deg !important;
                     }
-                `}</style>
-            </>
+                `}</Style>
+                </>;
+            }
         }</Show>
 
         <Link rel="icon" href="/images/favicon.dark.svg" media="screen and (prefers-color-scheme: dark)" />