chris/calque
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

add fallbacks for when theme is undefined

Browse source
This commit is contained in:
Chris Kruining 2024-12-04 09:44:11 +01:00
parent 183618a0c8
commit 6cf4bc450f
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
1 changed files with 5 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/routes/(editor).tsx
View file

@ -23,11 +23,8 @@ export default function Editor(props: ParentProps) {
const themeMenuId = createUniqueId(); const themeMenuId = createUniqueId();
const [commandPalette, setCommandPalette] = createSignal<CommandPaletteApi>(); const [commandPalette, setCommandPalette] = createSignal<CommandPaletteApi>();
const lightness = createMemo(() => { const colorScheme = createMemo(() => theme.colorScheme === ColorScheme.Auto ? event?.request.headers.get('Sec-CH-Prefers-Color-Scheme') ?? 'light dark' : theme.colorScheme);
const scheme = theme.colorScheme === ColorScheme.Auto ? event?.request.headers.get('Sec-CH-Prefers-Color-Scheme') : theme.colorScheme; const lightness = createMemo(() => colorScheme() === ColorScheme.Light ? .9 : .2);
return scheme === ColorScheme.Light ? .9 : .2;
});
const commands = [ const commands = [
createCommand('open command palette', () => { createCommand('open command palette', () => {
@ -53,12 +50,12 @@ export default function Editor(props: ParentProps) {
<Title>Calque</Title> <Title>Calque</Title>
<Meta name="description" content="Simple tool for managing translation files" /> <Meta name="description" content="Simple tool for managing translation files" />
<Meta name="color-scheme" content={theme.colorScheme} /> <Meta name="color-scheme" content={colorScheme()} />
<Meta name="theme-color" content={`oklch(${lightness()} .02 ${theme.hue})`} /> <Meta name="theme-color" content={`oklch(${lightness()} .02 ${theme.hue ?? 0})`} />
<style>{` <style>{`
:root { :root {
--hue: ${theme.hue}deg !important; --hue: ${theme.hue ?? 0}deg !important;
} }
`}</style> `}</style>