theme-color meta needs to be in the head

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="color-scheme" content={theme().colorScheme} />
-                    <meta name="theme-color" content={`oklch(${lightness()} .02 ${theme().hue})`} />
+                    <Meta name="theme-color" content={`oklch(${lightness()} .02 ${theme().hue})`} />
 
-                    <style>{`
+                    <Style>{`
                         :root {
                             --hue: ${theme().hue}deg !important;
                         }
-                    `}</style>
+                    `}</Style>
                 </>;
             }
         }</Show>

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 {