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

fix theme color?

Browse source
This commit is contained in:
Chris Kruining 2024-11-21 20:31:36 +01:00
parent 13e5727497
commit bf5b2a96b5
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
2 changed files with 18 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/app.css
View file

@ -2,6 +2,7 @@
:root { :root {
--hue: 182.77deg; --hue: 182.77deg;
--accent-ofset: 180;
--primary-100: oklch(from var(--primary-500) .95 c h); --primary-100: oklch(from var(--primary-500) .95 c h);
--primary-300: oklch(from var(--primary-500) .9 c h); --primary-300: oklch(from var(--primary-500) .9 c h);
@ -9,11 +10,11 @@
--primary-700: oklch(from var(--primary-500) .7 c h); --primary-700: oklch(from var(--primary-500) .7 c h);
--primary-900: oklch(from var(--primary-500) .6 c h); --primary-900: oklch(from var(--primary-500) .6 c h);
--secondary-100: oklch(from var(--secondary-500) .95 c h); --secondary-100: oklch(from var(--primary-500) .95 c calc(h + var(--accent-ofset)));
--secondary-300: oklch(from var(--secondary-500) .9 c h); --secondary-300: oklch(from var(--primary-500) .9 c calc(h + var(--accent-ofset)));
--secondary-500: oklch(from var(--primary-500) l c calc(h - 180)); --secondary-500: oklch(from var(--primary-500) .85 c calc(h + var(--accent-ofset)));
--secondary-700: oklch(from var(--secondary-500) .7 c h); --secondary-700: oklch(from var(--primary-500) .7 c calc(h + var(--accent-ofset)));
--secondary-900: oklch(from var(--secondary-500) .6 c h); --secondary-900: oklch(from var(--primary-500) .6 c calc(h + var(--accent-ofset)));
--surface-1: light-dark(oklch(from var(--secondary-500) .9 .02 h), oklch(from var(--secondary-500) .2 .02 h)); --surface-1: light-dark(oklch(from var(--secondary-500) .9 .02 h), oklch(from var(--secondary-500) .2 .02 h));
--surface-2: oklch(from var(--surface-1) calc(l + .025) c h); --surface-2: oklch(from var(--surface-1) calc(l + .025) c h);

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

@ -1,5 +1,5 @@
import { Link, Meta, Style, Title } from "@solidjs/meta"; import { Link, Meta, Style, Title } from "@solidjs/meta";
import { Component, createEffect, createMemo, createSignal, ErrorBoundary, ParentProps, Show } from "solid-js"; import { Component, createEffect, createMemo, createSignal, ErrorBoundary, ParentProps, Show, Suspense } 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";
import { A, RouteDefinition, useBeforeLeave } from "@solidjs/router"; import { A, RouteDefinition, useBeforeLeave } from "@solidjs/router";
@ -16,12 +16,6 @@ export default function Editor(props: ParentProps) {
const [commandPalette, setCommandPalette] = createSignal<CommandPaletteApi>(); const [commandPalette, setCommandPalette] = createSignal<CommandPaletteApi>();
const color = createMemo(() => ({
[ColorScheme.Auto]: undefined,
[ColorScheme.Light]: '#eee',
[ColorScheme.Dark]: '#333',
}[theme.colorScheme]));
const commands = [ const commands = [
createCommand('open command palette', () => { createCommand('open command palette', () => {
commandPalette()?.show(); commandPalette()?.show();
@ -43,17 +37,18 @@ export default function Editor(props: ParentProps) {
return <MenuProvider commands={commands}> return <MenuProvider commands={commands}>
<Title>Calque</Title> <Title>Calque</Title>
<Meta id="theme-scheme" name="color-scheme" content={theme.colorScheme} /> <Show when={theme}>{
<Show when={color() === undefined} fallback={<Meta id="theme-color" name="theme-color" content={color()} />}> theme => <>
<Meta id="theme-auto-light" name="theme-color" media="(prefers-color-scheme: light)" content="#eee" /> <meta name="color-scheme" content={theme().colorScheme} />
<Meta id="theme-auto-dark" name="theme-color" media="(prefers-color-scheme: dark)" content="#333" /> <meta name="theme-color" content="light-dark(#f0f, #0f0)" />
</Show>
<Style>{` <style>{`
:root { :root {
--hue: ${theme.hue}deg !important; --hue: ${theme().hue}deg !important;
} }
`}</Style> `}</style>
</>
}</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)" />
<Link rel="icon" href="/images/favicon.light.svg" media="screen and (prefers-color-scheme: light)" /> <Link rel="icon" href="/images/favicon.light.svg" media="screen and (prefers-color-scheme: light)" />