diff --git a/apps/svelte.dev/src/app.html b/apps/svelte.dev/src/app.html index e1e9679e3e..8b6aba5fea 100644 --- a/apps/svelte.dev/src/app.html +++ b/apps/svelte.dev/src/app.html @@ -19,11 +19,6 @@ /> diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte index 345cb39d9a..71992c3d0a 100644 --- a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte @@ -4,7 +4,7 @@ import Viewer from '@sveltejs/repl/viewer'; // @ts-expect-error TODO types import Console, { type Log } from '@sveltejs/repl/console'; - import { theme } from '@sveltejs/site-kit/stores'; + import { theme } from '@sveltejs/site-kit/state'; import Chrome from './Chrome.svelte'; import Loading from './Loading.svelte'; import { adapter_state, update } from './adapter.svelte'; @@ -37,7 +37,7 @@ can_escape onLog={(l: Log[]) => (logs = l)} {bundle} - theme={$theme.current} + theme={theme.current} injectedCSS="@import '/tutorial/shared.css';" /> {/if} diff --git a/packages/repl/src/lib/Input/RunesInfo.svelte b/packages/repl/src/lib/Input/RunesInfo.svelte index 5beb4cd3a3..d6728b5abe 100644 --- a/packages/repl/src/lib/Input/RunesInfo.svelte +++ b/packages/repl/src/lib/Input/RunesInfo.svelte @@ -5,7 +5,7 @@ let { runes }: { runes: boolean } = $props(); const { workspace, svelteVersion } = get_repl_context(); - const majorVersion = Number(svelteVersion.split(".")[0]); + const majorVersion = Number(svelteVersion.split('.')[0]); @@ -19,8 +19,8 @@
{#if Number.isInteger(majorVersion) && majorVersion < 5}

- Runes are available from Svelte 5 onwards, and this playground is - using Svelte {svelteVersion}. + Runes are available from Svelte 5 onwards, and this playground + is using Svelte {svelteVersion}.

{:else if workspace.current.name.endsWith('.svelte.js')}

diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json index fcf674226e..a57d77fd98 100644 --- a/packages/site-kit/package.json +++ b/packages/site-kit/package.json @@ -73,6 +73,9 @@ "./actions": { "default": "./src/lib/actions/index.ts" }, + "./state": { + "default": "./src/lib/state/index.ts" + }, "./stores": { "default": "./src/lib/stores/index.ts" }, diff --git a/packages/site-kit/src/lib/components/ThemeToggle.svelte b/packages/site-kit/src/lib/components/ThemeToggle.svelte index 5e93614caf..8135b48cac 100644 --- a/packages/site-kit/src/lib/components/ThemeToggle.svelte +++ b/packages/site-kit/src/lib/components/ThemeToggle.svelte @@ -1,31 +1,37 @@ + + + + diff --git a/packages/site-kit/src/lib/state/Persisted.svelte.ts b/packages/site-kit/src/lib/state/Persisted.svelte.ts new file mode 100644 index 0000000000..6f6147d34c --- /dev/null +++ b/packages/site-kit/src/lib/state/Persisted.svelte.ts @@ -0,0 +1,39 @@ +import { on } from 'svelte/events'; +import { createSubscriber } from 'svelte/reactivity'; + +export class Persisted { + #key: string; + #storage: Storage | undefined; + #fallback: T; + #version = $state(0); + + #subscribe = createSubscriber((update) => { + return on(window, 'storage', (e) => { + if (e.key === this.#key) { + update(); + } + }); + }); + + constructor( + key: string, + fallback: T, + storage = typeof localStorage === 'undefined' ? undefined : localStorage + ) { + this.#key = key; + this.#fallback = fallback; + this.#storage = storage; + } + + get current() { + this.#subscribe(); // handle cross-tab updates + this.#version; // handle same-tab updates + + return (this.#storage?.getItem(this.#key) as T) ?? this.#fallback; + } + + set current(v: T) { + this.#storage?.setItem(this.#key, v); + this.#version += 1; + } +} diff --git a/packages/site-kit/src/lib/state/index.ts b/packages/site-kit/src/lib/state/index.ts new file mode 100644 index 0000000000..ce3d5469ba --- /dev/null +++ b/packages/site-kit/src/lib/state/index.ts @@ -0,0 +1,2 @@ +export { Persisted } from './Persisted.svelte'; +export { theme } from './theme.svelte'; diff --git a/packages/site-kit/src/lib/state/theme.svelte.ts b/packages/site-kit/src/lib/state/theme.svelte.ts new file mode 100644 index 0000000000..729c2c2622 --- /dev/null +++ b/packages/site-kit/src/lib/state/theme.svelte.ts @@ -0,0 +1,18 @@ +import { MediaQuery } from 'svelte/reactivity'; +import { Persisted } from './Persisted.svelte'; + +class Theme { + #preference = new Persisted<'system' | 'light' | 'dark'>('sv:theme', 'system'); + #query = new MediaQuery('prefers-color-scheme: dark'); + #system = $derived<'dark' | 'light'>(this.#query.current ? 'dark' : 'light'); + + get current() { + return this.#preference.current === 'system' ? this.#system : this.#preference.current; + } + + set current(value: 'light' | 'dark') { + this.#preference.current = value === this.#system ? 'system' : value; + } +} + +export const theme = new Theme(); diff --git a/packages/site-kit/src/lib/stores/index.ts b/packages/site-kit/src/lib/stores/index.ts index 1fbecf60fe..39f05a77e0 100644 --- a/packages/site-kit/src/lib/stores/index.ts +++ b/packages/site-kit/src/lib/stores/index.ts @@ -2,4 +2,3 @@ export { mql } from './mql'; export { nav_open, on_this_page_open, overlay_open, should_nav_autohide } from './nav'; export { reduced_motion } from './reduced-motion'; export { search_query, search_recent, searching } from './search'; -export { theme, type Theme } from './theme'; diff --git a/packages/site-kit/src/lib/stores/theme.ts b/packages/site-kit/src/lib/stores/theme.ts deleted file mode 100644 index 1b58f4e93d..0000000000 --- a/packages/site-kit/src/lib/stores/theme.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { BROWSER } from 'esm-env'; -import { persisted } from 'svelte-persisted-store'; - -export interface Theme { - preference: 'light' | 'dark' | 'system'; - current: 'light' | 'dark'; -} - -export const theme = persisted('svelte:theme', { - preference: 'system', - current: BROWSER - ? window.matchMedia('(prefers-color-scheme: dark)').matches - ? 'dark' - : 'light' - : 'light' -}); - -theme.subscribe(($theme) => { - if (!BROWSER) return; - - document.documentElement.classList.remove('light', 'dark'); - document.documentElement.classList.add($theme.current); -});