From 29f70812bb93bde6c7eec095be979605f4976457 Mon Sep 17 00:00:00 2001 From: Daniel Imfeld Date: Wed, 3 Jan 2024 15:59:58 -1000 Subject: [PATCH] add ThemeInit component that place script inside tag --- .changeset/friendly-pets-reflect.md | 5 +++++ .../src/lib/components/ThemeInit.svelte | 12 ++++++++++++ .../svelte-ux/src/lib/components/index.ts | 1 + packages/svelte-ux/src/lib/styles/theme.ts | 19 +++++++++++++++++++ 4 files changed, 37 insertions(+) create mode 100644 .changeset/friendly-pets-reflect.md create mode 100644 packages/svelte-ux/src/lib/components/ThemeInit.svelte diff --git a/.changeset/friendly-pets-reflect.md b/.changeset/friendly-pets-reflect.md new file mode 100644 index 000000000..e86611b37 --- /dev/null +++ b/.changeset/friendly-pets-reflect.md @@ -0,0 +1,5 @@ +--- +"svelte-ux": patch +--- + +Add ThemeInit component to prevent flash of unstyled content when SSR is enabled diff --git a/packages/svelte-ux/src/lib/components/ThemeInit.svelte b/packages/svelte-ux/src/lib/components/ThemeInit.svelte new file mode 100644 index 000000000..6daffa81e --- /dev/null +++ b/packages/svelte-ux/src/lib/components/ThemeInit.svelte @@ -0,0 +1,12 @@ + + + + {@html headSnippet} + diff --git a/packages/svelte-ux/src/lib/components/index.ts b/packages/svelte-ux/src/lib/components/index.ts index acf035412..92b281cc7 100644 --- a/packages/svelte-ux/src/lib/components/index.ts +++ b/packages/svelte-ux/src/lib/components/index.ts @@ -82,6 +82,7 @@ export { default as TableOrderIcon } from './TableOrderIcon.svelte'; export { default as Tab } from './Tab.svelte'; export { default as Tabs } from './Tabs.svelte'; export { default as TextField } from './TextField.svelte'; +export { default as ThemeInit } from './ThemeInit.svelte'; export { default as ThemeButton } from './ThemeButton.svelte'; export { default as Tilt } from './Tilt.svelte'; export { default as Toggle } from './Toggle.svelte'; diff --git a/packages/svelte-ux/src/lib/styles/theme.ts b/packages/svelte-ux/src/lib/styles/theme.ts index aac38dadf..fd8f403c1 100644 --- a/packages/svelte-ux/src/lib/styles/theme.ts +++ b/packages/svelte-ux/src/lib/styles/theme.ts @@ -20,3 +20,22 @@ export const colorNames = [ 'surface-300', 'surface-content', ]; + +/** Return a script tag that will set the initial theme from localStorage. This is suitable */ +export function createHeadSnippet(darkThemes: string[]) { + function _applyInitialStyle() { + let theme = localStorage.getItem('theme'); + if (theme) { + document.documentElement.dataset.theme = theme; + if (darkThemes.includes(theme)) { + document.documentElement.classList.add('dark'); + } + } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) { + document.documentElement.classList.add('dark'); + } + } + + let darkThemeList = darkThemes.map((theme) => `'${theme}'`).join(', '); + + return ``; +}