Merge branch 'main' into feature/swap-to-tricep-for-iac

examples/emmer/en.json

@@ -1,5 +1,4 @@
 {
-  "topLevel": "top level",
     "app": {
         "login": "Get started",
         "logout": "Logout",

examples/emmer/nl.json

@@ -1,5 +1,4 @@
 {
-  "topLevel": "hoogste niveau",
     "app": {
         "login": "Aan de slag",
         "logout": "Log uit",

src/app.css

@@ -14,13 +14,13 @@
   --secondary-700: oklch(from var(--primary-500) .7 c calc(h + var(--accent-ofset)));
   --secondary-900: oklch(from var(--primary-500) .6 c calc(h + var(--accent-ofset)));
 
-  --surface-300: light-dark(oklch(from var(--secondary-500) .9 .02 h), oklch(from var(--secondary-500) .2 .02 h));
+  --surface-300: light-dark(oklch(from var(--primary-500) .9 .02 h), oklch(from var(--primary-500) .2 .02 h));
   --surface-400: oklch(from var(--surface-300) calc(l + .025) c h);
   --surface-500: oklch(from var(--surface-400) calc(l + .025) c h);
   --surface-600: oklch(from var(--surface-500) calc(l + .025) c h);
   --surface-700: oklch(from var(--surface-600) calc(l + .025) c h);
 
-  --text-1: light-dark(oklch(from var(--secondary-500) .2 .02 h), oklch(from var(--secondary-500) .9 .02 h));
+  --text-1: light-dark(oklch(from var(--primary-500) .2 .02 h), oklch(from var(--primary-500) .9 .02 h));
   --text-2: oklch(from var(--text-1) calc(l + .1) c h);
 
   --info: light-dark(oklch(.71 .17 249), oklch(.71 .17 249));

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 }))) },

src/routes/(editor).tsx

@@ -5,10 +5,18 @@ import { CommandPalette, CommandPaletteApi, Menu, MenuProvider } from "~/feature
 import { A, RouteDefinition, useBeforeLeave } from "@solidjs/router";
 import { createCommand, Modifier } from "~/features/command";
 import { ColorScheme, ColorSchemePicker, getState, useTheme } from "~/components/colorschemepicker";
+import { getRequestEvent, isServer } from "solid-js/web";
+import { HttpHeader } from "@solidjs/start";
 import css from "./editor.module.css";
 
+const event = getRequestEvent();
+
 export const route: RouteDefinition = {
-    preload: () => getState(),
+    preload: ({ params, location, intent }) => {
+        console.log();
+
+        return getState();
+    },
 };
 
 export default function Editor(props: ParentProps) {
@@ -35,19 +43,29 @@ export default function Editor(props: ParentProps) {
     });
 
     return <MenuProvider commands={commands}>
+        <HttpHeader name="Accept-CH" value="Sec-CH-Prefers-Color-Scheme" />
+
         <Title>Calque</Title>
 
         <Show when={theme}>{
-            theme => <>
+            theme => {
-                <meta name="color-scheme" content={theme().colorScheme} />
+                const lightness = createMemo(() => {
-                <meta name="theme-color" content="light-dark(#f0f, #0f0)" />
+                    const scheme = theme().colorScheme === ColorScheme.Auto ? event?.request.headers.get('Sec-CH-Prefers-Color-Scheme') : theme().colorScheme;
+
+                    return scheme === ColorScheme.Light ? .9 : .2;
+                });
+
+                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>
 
         <Link rel="icon" href="/images/favicon.dark.svg" media="screen and (prefers-color-scheme: dark)" />