From ecf7b0df20e8be8da74a32602dc7f5c6160f0e85 Mon Sep 17 00:00:00 2001
From: Chris Kruining <c.kruining@4dotnet.nl>
Date: Mon, 2 Dec 2024 10:09:22 +0100
Subject: [PATCH] theme-color meta needs to be in the head

---
 src/routes/(editor).tsx      | 10 +++++-----
 src/routes/editor.module.css |  8 ++++++--
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/routes/(editor).tsx b/src/routes/(editor).tsx
index 9532512..dc63a3c 100644
--- a/src/routes/(editor).tsx
+++ b/src/routes/(editor).tsx
@@ -1,4 +1,4 @@
-import { Link, Meta, Title } from "@solidjs/meta";
+import { Link, Meta, Style, Title } from "@solidjs/meta";
 import { Component, createEffect, createMemo, createSignal, createUniqueId, ErrorBoundary, ParentProps, Show } from "solid-js";
 import { FilesProvider } from "~/features/file";
 import { CommandPalette, CommandPaletteApi, Menu, MenuProvider } from "~/features/menu";
@@ -62,14 +62,14 @@ export default function Editor(props: ParentProps) {
                 });
 
                 return <>
-                    <meta name="color-scheme" content={theme().colorScheme} />
-                    <meta name="theme-color" content={`oklch(${lightness()} .02 ${theme().hue})`} />
+                    <Meta name="color-scheme" content={theme().colorScheme} />
+                    <Meta name="theme-color" content={`oklch(${lightness()} .02 ${theme().hue})`} />
 
-                    <style>{`
+                    <Style>{`
                         :root {
                             --hue: ${theme().hue}deg !important;
                         }
-                    `}</style>
+                    `}</Style>
                 </>;
             }
         }</Show>
diff --git a/src/routes/editor.module.css b/src/routes/editor.module.css
index f074f34..b37b70b 100644
--- a/src/routes/editor.module.css
+++ b/src/routes/editor.module.css
@@ -62,6 +62,12 @@
                     &:hover {
                         background-color: var(--surface-500);
                     }
+
+                    @media (display-mode: window-controls-overlay) {
+                        & {
+                            color: light-dark(#0005, #fff5);
+                        }
+                    }
                 }
 
                 & > dialog {
@@ -83,8 +89,6 @@
                 }
             }
         }
-
-        @media (display-mode: window-controls-overlay) {}
     }
 
     & > section {