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

fix color definitions

Browse source
This commit is contained in:
Chris Kruining 2024-11-28 14:02:22 +01:00
parent 446b4a456f
commit b83d86b7a8
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
2 changed files with 8 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/app.css
View file

@ -14,13 +14,13 @@
--secondary-700: oklch(from var(--primary-500) .7 c calc(h + var(--accent-ofset)));
--secondary-900: oklch(from var(--primary-500) .6 c calc(h + var(--accent-ofset)));
--surface-300: light-dark(oklch(from var(--secondary-500) .9 .02 h), oklch(from var(--secondary-500) .2 .02 h));
--surface-400: oklch(from var(--surface-300) calc(l + .025) c h);
--surface-500: oklch(from var(--surface-400) calc(l + .025) c h);
--surface-600: oklch(from var(--surface-500) calc(l + .025) c h);
--surface-700: oklch(from var(--surface-600) calc(l + .025) c h);
--surface-300: light-dark(oklch(from var(--primary-500) .9 .02 h), oklch(from var(--primary-500) .2 .02 h));
--surface-400: oklch(from var(--primary-300) calc(l + .025) c h);
--surface-500: oklch(from var(--primary-400) calc(l + .025) c h);
--surface-600: oklch(from var(--primary-500) calc(l + .025) c h);
--surface-700: oklch(from var(--primary-600) calc(l + .025) c h);
--text-1: light-dark(oklch(from var(--secondary-500) .2 .02 h), oklch(from var(--secondary-500) .9 .02 h));
--text-1: light-dark(oklch(from var(--primary-500) .2 .02 h), oklch(from var(--primary-500) .9 .02 h));
--text-2: oklch(from var(--text-1) calc(l + .1) c h);
--info: light-dark(oklch(.71 .17 249), oklch(.71 .17 249));

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

@ -40,19 +40,13 @@ export default function Editor(props: ParentProps) {
<Show when={theme}>{
theme => {
const themeColor = createMemo(() => {
theme();
return isServer ? 'lch(.5 .75 0deg)' : globalThis.getComputedStyle(document.body).backgroundColor;
});
createEffect(() => {
console.log(theme(), themeColor());
console.log(theme());
})
return <>
<Meta name="color-scheme" content={theme().colorScheme} />
<Meta name="theme-color" content={themeColor()} />
<Meta name="theme-color" content={`oklch(.5 .02 ${theme().hue})`} />
<style>{`
:root {