finally have some more fixes for the styling

app.config.ts

@@ -76,8 +76,8 @@ export default defineConfig({
     },
     server: {
         preset: 'bun',
-        prerender: {
+        // prerender: {
-            crawlLinks: true,
+        //     crawlLinks: true,
-        },
+        // },
     },
 });

src/components/colorschemepicker.module.css

@@ -2,13 +2,14 @@
     display: flex;
     flex-flow: row;
     align-items: center;
+    background-color: inherit;
     border: 1px solid transparent;
     border-radius: var(--radii-m);
     padding: var(--padding-s);
 
     & select {
         border: none;
-        background-color: transparent;
+        background-color: inherit;
         border-radius: var(--radii-m);
 
         &:focus {

src/components/colorschemepicker.tsx

@@ -1,9 +1,9 @@
-import { Accessor, Component, createContext, createEffect, createMemo, createResource, For, ParentComponent, Setter, Show, Suspense, useContext } from "solid-js";
+import { Component, createContext, createEffect, createResource, For, ParentComponent, Show, Suspense, useContext } from "solid-js";
 import css from './colorschemepicker.module.css';
 import { CgDarkMode } from "solid-icons/cg";
-import { action, createAsyncStore, query, useAction } from "@solidjs/router";
+import { action, query, useAction } from "@solidjs/router";
 import { useSession } from "vinxi/http";
-import { createStore, reconcile, ReconcileOptions, SetStoreFunction } from "solid-js/store";
+import { createStore } from "solid-js/store";
 
 export enum ColorScheme {
     Auto = 'light dark',
@@ -38,7 +38,7 @@ const setState = action(async (state: State) => {
     'use server';
 
     const session = await getSession();
-    await session.update(state);
+    await session.update(prev => ({ ...prev, ...state }));
 }, 'color-scheme');
 
 interface ThemeContextType {
@@ -62,7 +62,7 @@ export const useTheme = () => {
 };
 
 export const ThemeProvider: ParentComponent = (props) => {
-    const [state, { mutate }] = createResource<State>(() => getState(), { deferStream: true, initialValue: { colorScheme: ColorScheme.Auto, hue: 0 } });
+    const [state, { mutate }] = createResource<State>(() => getState(), { deferStream: true });
     const updateState = useAction(setState);
 
     return <Suspense>
@@ -75,8 +75,8 @@ export const ThemeProvider: ParentComponent = (props) => {
 
             return <ThemeContext.Provider value={{
                 get theme() { return store; },
-                setColorScheme(colorScheme: ColorScheme) { updateState(mutate(prev => ({ ...prev, colorScheme }))) },
+                setColorScheme(colorScheme: ColorScheme) { updateState(mutate(prev => ({ colorScheme, hue: prev?.hue ?? 0 }))) },
-                setHue(hue: number) { updateState(mutate(prev => ({ ...prev, hue }))) },
+                setHue(hue: number) { updateState(mutate(prev => ({ hue, colorScheme: prev?.colorScheme ?? ColorScheme.Auto }))) },
             }}>
                 {props.children}
             </ThemeContext.Provider>;

src/entry-server.tsx

@@ -26,9 +26,8 @@ export default createHandler(({ nonce }) => {
   );
 }, event => {
   const nonce = crypto.randomUUID();
-  const isDev = process.env.NODE_ENV === 'development';
 
-  const base = `'self' 'nonce-${nonce}' ${isDev ? `'unsafe-eval'` : ''}`;
+  const base = `'self' 'nonce-${nonce}' 'unsafe-eval'`;
 
   const policies = {
     default: base,

src/routes/(editor).tsx

@@ -13,9 +13,7 @@ import css from "./editor.module.css";
 const event = getRequestEvent();
 
 export const route: RouteDefinition = {
-    preload: ({ params, location, intent }) => {
+    preload: () => {
-        console.log();
-
         return getState();
     },
 };
@@ -25,6 +23,11 @@ export default function Editor(props: ParentProps) {
     const themeMenuId = createUniqueId();
 
     const [commandPalette, setCommandPalette] = createSignal<CommandPaletteApi>();
+    const lightness = createMemo(() => {
+        const scheme = theme.colorScheme === ColorScheme.Auto ? event?.request.headers.get('Sec-CH-Prefers-Color-Scheme') : theme.colorScheme;
+
+        return scheme === ColorScheme.Light ? .9 : .2;
+    });
 
     const commands = [
         createCommand('open command palette', () => {
@@ -44,8 +47,9 @@ export default function Editor(props: ParentProps) {
         transition(() => { e.retry(true) })
     });
 
+    console.log('server?', theme.colorScheme, theme.hue);
     createEffect(() => {
-        console.log(theme.hue);
+        console.log(theme.colorScheme, theme.hue);
     });
 
     return <MenuProvider commands={commands}>
@@ -53,26 +57,14 @@ export default function Editor(props: ParentProps) {
 
         <Title>Calque</Title>
 
-        <Show when={theme.colorScheme || theme.hue ? theme : undefined}>{
+        <Meta name="color-scheme" content={theme.colorScheme} />
-            theme => {
+        <Meta name="theme-color" content={`oklch(${lightness()} .02 ${theme.hue})`} />
-                const lightness = createMemo(() => {
-                    const scheme = theme().colorScheme === ColorScheme.Auto ? event?.request.headers.get('Sec-CH-Prefers-Color-Scheme') : theme().colorScheme;
 
-                    return scheme === ColorScheme.Light ? .9 : .2;
+        <Style>{`
-                });
+            :root {
-
+                --hue: ${theme.hue}deg !important;
-                return <>
-                    <Meta name="color-scheme" content={theme().colorScheme} />
-                    <Meta name="theme-color" content={`oklch(${lightness()} .02 ${theme().hue})`} />
-
-                    <Style>{`
-                        :root {
-                            --hue: ${theme().hue}deg !important;
-                        }
-                    `}</Style>
-                </>;
             }
-        }</Show>
+        `}</Style>
 
         <Link rel="icon" href="/images/favicon.dark.svg" media="screen and (prefers-color-scheme: dark)" />
         <Link rel="icon" href="/images/favicon.light.svg" media="screen and (prefers-color-scheme: light)" />

src/routes/editor.module.css

@@ -65,7 +65,7 @@
 
                     @media (display-mode: window-controls-overlay) {
                         & {
-                            color: light-dark(#0005, #fff5);
+                            color: light-dark(#0008, #fff8);
                         }
                     }
                 }