Persistent Theme

Author: haydncomley

src/example/src/app.ts

@@ -7,13 +7,15 @@ export const globalStore = store({
     appName: 'haydn comley',
     isNavOpen: false,
     globalCount: 0,
+    theme: '',
 });
 
-export default (path?: string) => {
+export default ({ path, theme }: { path: string, theme: string }) => {
     return niceApp(() => {
         let trimmedPath = path?.trim();
         if (trimmedPath?.endsWith('/')) trimmedPath = trimmedPath.slice(0, -1);
         if (trimmedPath?.startsWith('/')) trimmedPath = trimmedPath.slice(1);
+        globalStore('theme').set(theme);
 
         switch (trimmedPath) {
             default: 

src/example/src/components/colour-picker.ts

@@ -2,7 +2,7 @@ import { component, computed, hasWindow, ref, render, state, type Prop, styler,
 
 import styles from './colour-picker.module.scss'
 
-const colors = [
+export const colors = [
     { label: 'Red', hex: '#dd1364' },
     { label: 'Orange', hex: '#fccb19' },
     { label: 'Green', hex: '#07d907' },

src/example/src/components/theme-widget.ts

@@ -1,46 +1,41 @@
-import { component, computed, hasWindow, ref, render, state } from "../../../nice";
+import { component, computed, hasWindow, ref, render, state, valueOf } from "../../../nice";
+import { globalStore } from "../app";
 import { hexToRgb, rgbToHex, shiftHue } from "../lib/utils";
 import { Button } from "./button";
 import { ColourPicker } from "./colour-picker";
 
 import styles from './theme-widget.module.scss'
 
 export const ThemeWidget = component(() => {
-    const inputRef = ref<HTMLInputElement>();
-    const currentColor = state(hasWindow ? getComputedStyle(document.body).getPropertyValue('--theme-primary') : '');
-    const currentColorHex = computed(() => rgbToHex(currentColor.get()), [currentColor]);
+    const currentColor = globalStore('theme');
     const colourPickerOpen = state(false);
 
-    const onColorChange = computed<MouseEvent>((e) => {
-        const inputElement = e.target as HTMLInputElement;
-        currentColor.set(hexToRgb(inputElement.value));
-    });
-
     computed(() => {
         if (hasWindow) {
             const body = document.querySelector('body');
-            body!.style.setProperty('--theme-primary', currentColor.get());
-            body!.style.setProperty('--theme-secondary', shiftHue(currentColor.get(), .2));
+            body!.style.setProperty('--theme-primary', hexToRgb(valueOf(currentColor)));
+            body!.style.setProperty('--theme-secondary', shiftHue(hexToRgb(valueOf(currentColor)), .2));
         }
     }, [currentColor]);
 
+    const buttonLabel = computed(() => {
+        return valueOf(colourPickerOpen) ? 'Close' : 'Choose Theme' as string;
+    }, [colourPickerOpen]);
+
     const onClick = computed<MouseEvent>(() => {
-        const input = inputRef.get();
-        if (!input) return;
         colourPickerOpen.set(!colourPickerOpen.get());
     });
 
     const onChange = computed<string>((e) => {
-        console.log('On Change', e);
-        currentColor.set(hexToRgb(e));
+        document.cookie = `theme=${e}`;
+        currentColor.set(e);
         colourPickerOpen.set(false);
     });
 
     return render`
         <div class="${styles.themeWidget}">
-            ${Button({ label: 'Change Theme', onClick })}
-            <input type="color" ref=${inputRef} on-input=${onColorChange} set-value=${currentColorHex}>
-            ${ColourPicker({ isOpen: colourPickerOpen, onChange: onChange, selected: currentColorHex })}
+            ${Button({ label: buttonLabel, onClick })}
+            ${ColourPicker({ isOpen: colourPickerOpen, onChange: onChange, selected: currentColor })}
         </div>
     `
 });

src/example/src/pages/[...slug].astro

@@ -1,9 +1,16 @@
 ---
 import "../reset.scss";
 import "../styles.scss";
-import app from "../app";
+import myApp from "../app";
+import { colors } from "../components/colour-picker.ts";
+import { hexToRgb, shiftHue } from "../lib/utils";
 
 const path = Astro.url.pathname;
+const theme = Astro.cookies.get("theme")?.value || colors[0].hex;
+
+const app = myApp({ path, theme })!;
+const primary = hexToRgb(theme);
+const secondary = shiftHue(hexToRgb(theme), 0.2);
 ---
 
 <html lang="en">
@@ -22,11 +29,25 @@ const path = Astro.url.pathname;
       rel="stylesheet"
     />
   </head>
-  <body set:html={app(path)!.html} id={app(path)!.id}>
+  <body set:html={app.html} id={app.id}>
     <script>
-      import app from "../app";
+      import myApp from "../app";
+
       const path = window.location.pathname;
-      app(path)!.hydrate(app(path)!.id);
+      const theme =
+        document.cookie
+          .split("; ")
+          .find((row) => row.startsWith("theme="))
+          ?.split("=")[1] ??
+        getComputedStyle(document.body).getPropertyValue("--theme-primary");
+
+      const app = myApp({ path, theme })!;
+      app.hydrate(app!.id);
     </script>
   </body>
 </html>
+
+<style
+  lang="scss"
+  define:vars={{ "theme-primary": primary, "theme-secondary": secondary }}
+></style>