add ThemeInit component that place script inside <head> tag

techniq · Jan 4, 2024 · 29f7081 · 29f7081
1 parent 2e0ad12
commit 29f7081
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 0 deletions.
diff --git a/.changeset/friendly-pets-reflect.md 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
@@ -0,0 +1,12 @@
+<script>
+  import { createHeadSnippet } from '../styles/theme';
+  import { getSettings } from './settings';
+
+  const darkThemes = getSettings().themes?.dark ?? [];
+
+  let headSnippet = createHeadSnippet(darkThemes);
+</script>
+
+<svelte:head>
+  {@html headSnippet}
+</svelte:head>
diff --git 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
@@ -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 `<script>(${_applyInitialStyle.toString()})([${darkThemeList}])</script>`;
+}