fix color scheme???

This commit is contained in:
Chris Kruining 2024-11-28 13:14:56 +01:00
parent 422501b825
commit 6c1af29847
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
2 changed files with 17 additions and 13 deletions

View file

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

View file

@ -38,16 +38,24 @@ export default function Editor(props: ParentProps) {
<Title>Calque</Title>
<Show when={theme}>{
theme => <>
<meta name="color-scheme" content={theme().colorScheme} />
<meta name="theme-color" content="light-dark(#f0f, #0f0)" />
theme => {
const themeColor = createMemo(() => {
theme();
<style>{`
return window.getComputedStyle(document.body).backgroundColor;
});
return <>
<Meta name="color-scheme" content={theme().colorScheme} />
<Meta name="theme-color" content={themeColor()} />
<Style>{`
:root {
--hue: ${theme().hue}deg !important;
}
`}</style>
</>
`}</Style>
</>;
}
}</Show>
<Link rel="icon" href="/images/favicon.dark.svg" media="screen and (prefers-color-scheme: dark)" />