From 422501b82586790dfcc86b6461d4692fd85e2a7e Mon Sep 17 00:00:00 2001 From: Chris Kruining Date: Thu, 28 Nov 2024 10:48:14 +0100 Subject: [PATCH 1/9] right --- .github/workflows/app.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/app.yml b/.github/workflows/app.yml index dbbd9e1..047f085 100644 --- a/.github/workflows/app.yml +++ b/.github/workflows/app.yml @@ -1,6 +1,7 @@ name: Deploy App on: + workflow_dispatch: push: branches: - main From 6c1af29847163882f0117340a3885b915d21f554 Mon Sep 17 00:00:00 2001 From: Chris Kruining Date: Thu, 28 Nov 2024 13:14:56 +0100 Subject: [PATCH 2/9] fix color scheme??? --- src/components/colorschemepicker.tsx | 10 +++------- src/routes/(editor).tsx | 20 ++++++++++++++------ 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/components/colorschemepicker.tsx b/src/components/colorschemepicker.tsx index 0f4c9bb..2ba96de 100644 --- a/src/components/colorschemepicker.tsx +++ b/src/components/colorschemepicker.tsx @@ -52,13 +52,13 @@ const ThemeContext = createContext(); 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 '); } - 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 ({ ...prev, colorScheme }))) }, diff --git a/src/routes/(editor).tsx b/src/routes/(editor).tsx index 2837732..c6cb51b 100644 --- a/src/routes/(editor).tsx +++ b/src/routes/(editor).tsx @@ -38,16 +38,24 @@ export default function Editor(props: ParentProps) { Calque { - theme => <> - - + theme => { + const themeColor = createMemo(() => { + theme(); - - + `} + ; + } } From 2c6ea4ce0ebb8fcb85500651fbaba8267246f99a Mon Sep 17 00:00:00 2001 From: Chris Kruining Date: Thu, 28 Nov 2024 13:35:56 +0100 Subject: [PATCH 3/9] oops --- src/routes/(editor).tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/(editor).tsx b/src/routes/(editor).tsx index c6cb51b..98ba34a 100644 --- a/src/routes/(editor).tsx +++ b/src/routes/(editor).tsx @@ -42,7 +42,7 @@ export default function Editor(props: ParentProps) { const themeColor = createMemo(() => { theme(); - return window.getComputedStyle(document.body).backgroundColor; + return globalThis.getComputedStyle(document.body).backgroundColor; }); return <> From d58c57f5fa79996bce10b4e0db9cfa8a97d7c889 Mon Sep 17 00:00:00 2001 From: Chris Kruining Date: Thu, 28 Nov 2024 13:44:50 +0100 Subject: [PATCH 4/9] double oops....... --- src/routes/(editor).tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/routes/(editor).tsx b/src/routes/(editor).tsx index 98ba34a..d38bb41 100644 --- a/src/routes/(editor).tsx +++ b/src/routes/(editor).tsx @@ -6,6 +6,7 @@ import { A, RouteDefinition, useBeforeLeave } from "@solidjs/router"; import { createCommand, Modifier } from "~/features/command"; import { ColorScheme, ColorSchemePicker, getState, useTheme } from "~/components/colorschemepicker"; import css from "./editor.module.css"; +import { isServer } from "solid-js/web"; export const route: RouteDefinition = { preload: () => getState(), @@ -42,7 +43,7 @@ export default function Editor(props: ParentProps) { const themeColor = createMemo(() => { theme(); - return globalThis.getComputedStyle(document.body).backgroundColor; + return isServer ? 'lch(.5 .75 0deg)' : globalThis.getComputedStyle(document.body).backgroundColor; }); return <> From 446b4a456fad47e80e793d5c868b1591409b8cc0 Mon Sep 17 00:00:00 2001 From: Chris Kruining Date: Thu, 28 Nov 2024 13:53:30 +0100 Subject: [PATCH 5/9] kaas --- src/routes/(editor).tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/routes/(editor).tsx b/src/routes/(editor).tsx index d38bb41..abd29df 100644 --- a/src/routes/(editor).tsx +++ b/src/routes/(editor).tsx @@ -46,15 +46,19 @@ export default function Editor(props: ParentProps) { return isServer ? 'lch(.5 .75 0deg)' : globalThis.getComputedStyle(document.body).backgroundColor; }); + createEffect(() => { + console.log(theme(), themeColor()); + }) + return <> - + ; } } From b83d86b7a86d617047651d2db10e85a248b77c5c Mon Sep 17 00:00:00 2001 From: Chris Kruining Date: Thu, 28 Nov 2024 14:02:22 +0100 Subject: [PATCH 6/9] fix color definitions --- src/app.css | 12 ++++++------ src/routes/(editor).tsx | 10 ++-------- 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/src/app.css b/src/app.css index 9e7fffc..261180f 100644 --- a/src/app.css +++ b/src/app.css @@ -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)); diff --git a/src/routes/(editor).tsx b/src/routes/(editor).tsx index abd29df..b069ddf 100644 --- a/src/routes/(editor).tsx +++ b/src/routes/(editor).tsx @@ -40,19 +40,13 @@ export default function Editor(props: ParentProps) { { 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 <> - +