From bf5b2a96b53a229f3c82900ffe3fe62ddbe7b5de Mon Sep 17 00:00:00 2001
From: Chris Kruining <c.kruining@4dotnet.nl>
Date: Thu, 21 Nov 2024 20:31:36 +0100
Subject: [PATCH] fix theme color?

---
 src/app.css             | 11 ++++++-----
 src/routes/(editor).tsx | 29 ++++++++++++-----------------
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/src/app.css b/src/app.css
index b6caa23..5369bf0 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2,6 +2,7 @@
 
 :root {
   --hue: 182.77deg;
+  --accent-ofset: 180;
 
   --primary-100: oklch(from var(--primary-500) .95 c h);
   --primary-300: oklch(from var(--primary-500) .9 c h);
@@ -9,11 +10,11 @@
   --primary-700: oklch(from var(--primary-500) .7 c h);
   --primary-900: oklch(from var(--primary-500) .6 c h);
 
-  --secondary-100: oklch(from var(--secondary-500) .95 c h);
-  --secondary-300: oklch(from var(--secondary-500) .9 c h);
-  --secondary-500: oklch(from var(--primary-500) l c calc(h - 180));
-  --secondary-700: oklch(from var(--secondary-500) .7 c h);
-  --secondary-900: oklch(from var(--secondary-500) .6 c h);
+  --secondary-100: oklch(from var(--primary-500) .95 c calc(h + var(--accent-ofset)));
+  --secondary-300: oklch(from var(--primary-500) .9 c calc(h + var(--accent-ofset)));
+  --secondary-500: oklch(from var(--primary-500) .85 c calc(h + var(--accent-ofset)));
+  --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-1: light-dark(oklch(from var(--secondary-500) .9 .02 h), oklch(from var(--secondary-500) .2 .02 h));
   --surface-2: oklch(from var(--surface-1) calc(l + .025) c h);
diff --git a/src/routes/(editor).tsx b/src/routes/(editor).tsx
index edde9a2..2837732 100644
--- a/src/routes/(editor).tsx
+++ b/src/routes/(editor).tsx
@@ -1,5 +1,5 @@
 import { Link, Meta, Style, Title } from "@solidjs/meta";
-import { Component, createEffect, createMemo, createSignal, ErrorBoundary, ParentProps, Show } from "solid-js";
+import { Component, createEffect, createMemo, createSignal, ErrorBoundary, ParentProps, Show, Suspense } from "solid-js";
 import { FilesProvider } from "~/features/file";
 import { CommandPalette, CommandPaletteApi, Menu, MenuProvider } from "~/features/menu";
 import { A, RouteDefinition, useBeforeLeave } from "@solidjs/router";
@@ -16,12 +16,6 @@ export default function Editor(props: ParentProps) {
 
     const [commandPalette, setCommandPalette] = createSignal<CommandPaletteApi>();
 
-    const color = createMemo(() => ({
-        [ColorScheme.Auto]: undefined,
-        [ColorScheme.Light]: '#eee',
-        [ColorScheme.Dark]: '#333',
-    }[theme.colorScheme]));
-
     const commands = [
         createCommand('open command palette', () => {
             commandPalette()?.show();
@@ -43,17 +37,18 @@ export default function Editor(props: ParentProps) {
     return <MenuProvider commands={commands}>
         <Title>Calque</Title>
 
-        <Meta id="theme-scheme" name="color-scheme" content={theme.colorScheme} />
-        <Show when={color() === undefined} fallback={<Meta id="theme-color" name="theme-color" content={color()} />}>
-            <Meta id="theme-auto-light" name="theme-color" media="(prefers-color-scheme: light)" content="#eee" />
-            <Meta id="theme-auto-dark" name="theme-color" media="(prefers-color-scheme: dark)" content="#333" />
-        </Show>
+        <Show when={theme}>{
+            theme => <>
+                <meta name="color-scheme" content={theme().colorScheme} />
+                <meta name="theme-color" content="light-dark(#f0f, #0f0)" />
 
-        <Style>{`
-            :root {
-                --hue: ${theme.hue}deg !important;
-            }
-        `}</Style>
+                <style>{`
+                    :root {
+                        --hue: ${theme().hue}deg !important;
+                    }
+                `}</style>
+            </>
+        }</Show>
 
         <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)" />