fix color scheme???
This commit is contained in:
parent
422501b825
commit
6c1af29847
2 changed files with 17 additions and 13 deletions
|
@ -52,13 +52,13 @@ const ThemeContext = createContext<ThemeContextType>();
|
||||||
const useStore = () => useContext(ThemeContext)!;
|
const useStore = () => useContext(ThemeContext)!;
|
||||||
|
|
||||||
export const useTheme = () => {
|
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 />');
|
throw new Error('useColorScheme is called outside a <ColorSchemeProvider />');
|
||||||
}
|
}
|
||||||
|
|
||||||
return theme;
|
return ctx.theme;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ThemeProvider: ParentComponent = (props) => {
|
export const ThemeProvider: ParentComponent = (props) => {
|
||||||
|
@ -73,10 +73,6 @@ export const ThemeProvider: ParentComponent = (props) => {
|
||||||
setStore(state());
|
setStore(state());
|
||||||
});
|
});
|
||||||
|
|
||||||
createEffect(() => {
|
|
||||||
console.log({ ...store })
|
|
||||||
});
|
|
||||||
|
|
||||||
return <ThemeContext.Provider value={{
|
return <ThemeContext.Provider value={{
|
||||||
get theme() { return store; },
|
get theme() { return store; },
|
||||||
setColorScheme(colorScheme: ColorScheme) { updateState(mutate(prev => ({ ...prev, colorScheme }))) },
|
setColorScheme(colorScheme: ColorScheme) { updateState(mutate(prev => ({ ...prev, colorScheme }))) },
|
||||||
|
|
|
@ -38,16 +38,24 @@ export default function Editor(props: ParentProps) {
|
||||||
<Title>Calque</Title>
|
<Title>Calque</Title>
|
||||||
|
|
||||||
<Show when={theme}>{
|
<Show when={theme}>{
|
||||||
theme => <>
|
theme => {
|
||||||
<meta name="color-scheme" content={theme().colorScheme} />
|
const themeColor = createMemo(() => {
|
||||||
<meta name="theme-color" content="light-dark(#f0f, #0f0)" />
|
theme();
|
||||||
|
|
||||||
<style>{`
|
return window.getComputedStyle(document.body).backgroundColor;
|
||||||
|
});
|
||||||
|
|
||||||
|
return <>
|
||||||
|
<Meta name="color-scheme" content={theme().colorScheme} />
|
||||||
|
<Meta name="theme-color" content={themeColor()} />
|
||||||
|
|
||||||
|
<Style>{`
|
||||||
:root {
|
:root {
|
||||||
--hue: ${theme().hue}deg !important;
|
--hue: ${theme().hue}deg !important;
|
||||||
}
|
}
|
||||||
`}</style>
|
`}</Style>
|
||||||
</>
|
</>;
|
||||||
|
}
|
||||||
}</Show>
|
}</Show>
|
||||||
|
|
||||||
<Link rel="icon" href="/images/favicon.dark.svg" media="screen and (prefers-color-scheme: dark)" />
|
<Link rel="icon" href="/images/favicon.dark.svg" media="screen and (prefers-color-scheme: dark)" />
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue