theme-color meta needs to be in the head

This commit is contained in:
Chris Kruining 2024-12-02 10:09:22 +01:00
parent 9791c09a25
commit ecf7b0df20
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
2 changed files with 11 additions and 7 deletions

View file

@ -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 { Component, createEffect, createMemo, createSignal, createUniqueId, ErrorBoundary, ParentProps, Show } from "solid-js";
import { FilesProvider } from "~/features/file"; import { FilesProvider } from "~/features/file";
import { CommandPalette, CommandPaletteApi, Menu, MenuProvider } from "~/features/menu"; import { CommandPalette, CommandPaletteApi, Menu, MenuProvider } from "~/features/menu";
@ -62,14 +62,14 @@ export default function Editor(props: ParentProps) {
}); });
return <> 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 { :root {
--hue: ${theme().hue}deg !important; --hue: ${theme().hue}deg !important;
} }
`}</style> `}</Style>
</>; </>;
} }
}</Show> }</Show>

View file

@ -62,6 +62,12 @@
&:hover { &:hover {
background-color: var(--surface-500); background-color: var(--surface-500);
} }
@media (display-mode: window-controls-overlay) {
& {
color: light-dark(#0005, #fff5);
}
}
} }
& > dialog { & > dialog {
@ -83,8 +89,6 @@
} }
} }
} }
@media (display-mode: window-controls-overlay) {}
} }
& > section { & > section {