svelte-os-themes 0.0.2

package/README.md

@@ -0,0 +1,59 @@
+# Svelte OS Themes
+
+## Installation
+
+```bash
+npm install svelte-os-themes
+```
+
+## Usage
+
+```svelte
+<!-- +layout.svelte -->
+<script>
+  import { ThemeProvider } from 'svelte-os-themes';
+
+  let { children } = $props();
+</script>
+
+<ThemeProvider>
+  {@render children()}
+</ThemeProvider>
+```
+
+```svelte
+<!-- +page.svelte -->
+<script>
+  import { useTheme } from 'svelte-os-themes';
+
+  let theme = useTheme();
+</script>
+
+<button
+  type="button"
+  onclick={function () {
+    theme.value = 'light';
+  }}
+  data-selected={theme.value === 'light'}
+>
+  Light
+</button>
+<button
+  type="button"
+  onclick={function () {
+    theme.value = 'dark';
+  }}
+  data-selected={theme.value === 'dark'}
+>
+  Dark
+</button>
+<button
+  type="button"
+  onclick={function () {
+    theme.value = 'system';
+  }}
+  data-selected={theme.value === 'system'}
+>
+  System
+</button>
+```

package/dist/create-theme-context.svelte.d.ts

@@ -0,0 +1,17 @@
+export type Theme = 'dark' | 'light' | 'system';
+export interface CreateThemeContextConfig {
+    attribute?: 'class' | `data-${string}`;
+    storageKey?: string;
+    systemPreference?: boolean;
+    nonce?: string;
+}
+export type CreateThemeContextReturn = ReturnType<typeof createThemeContext>;
+export declare function createThemeContext(config?: CreateThemeContextConfig): {
+    theme: Theme;
+    readonly effects: {
+        setup(): void;
+        themeChanged(): void;
+        osThemeChanged(): (() => void) | undefined;
+    };
+    readonly script: string;
+};

package/dist/create-theme-context.svelte.js

@@ -0,0 +1,121 @@
+export function createThemeContext(config) {
+    const { 
+    /**/
+    attribute, storageKey, systemPreference, nonce, } = $derived.by(() => {
+        const attribute = config?.attribute ?? 'class';
+        const storageKey = config?.storageKey ?? 'theme';
+        const systemPreference = config?.systemPreference ?? true;
+        const nonce = config?.nonce ?? '';
+        return {
+            attribute,
+            storageKey,
+            systemPreference,
+            nonce,
+        };
+    });
+    let theme = $state('system');
+    const script = $derived(buildScript({
+        nonce,
+        attribute,
+        storageKey,
+    }));
+    const effects = $derived({
+        setup() {
+            theme = getLocalStorageTheme(storageKey);
+        },
+        themeChanged() {
+            const html = document.documentElement;
+            const head = document.head;
+            const style = document.createElement('style');
+            style.innerHTML = noTransitionStyle;
+            head.appendChild(style);
+            const originalTheme = theme;
+            const resolvedTheme = originalTheme === 'system'
+                ? window.matchMedia('(prefers-color-scheme: dark)').matches
+                    ? 'dark'
+                    : 'light'
+                : originalTheme;
+            if (attribute === 'class') {
+                const removeClass = resolvedTheme === 'dark' ? 'light' : 'dark';
+                html.classList.remove(removeClass);
+                html.classList.add(resolvedTheme);
+            }
+            else {
+                html.setAttribute(attribute, resolvedTheme);
+            }
+            localStorage.setItem(storageKey, originalTheme);
+            html.style.colorScheme = resolvedTheme;
+            setTimeout(() => {
+                head.removeChild(style);
+            }, 1);
+        },
+        osThemeChanged() {
+            if (!systemPreference)
+                return;
+            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            function handler(e) {
+                theme = e.matches ? 'dark' : 'light';
+            }
+            mediaQuery.addEventListener('change', handler);
+            return () => {
+                mediaQuery.removeEventListener('change', handler);
+            };
+        },
+    });
+    return {
+        get theme() {
+            return theme;
+        },
+        set theme(value) {
+            theme = value;
+        },
+        get effects() {
+            return effects;
+        },
+        get script() {
+            return script;
+        },
+    };
+}
+function getLocalStorageTheme(key) {
+    const value = localStorage.getItem(key);
+    if (value?.toLocaleLowerCase().trim() === 'dark')
+        return 'dark';
+    if (value?.toLocaleLowerCase().trim() === 'light')
+        return 'light';
+    return 'system';
+}
+function buildScript({ nonce, attribute, storageKey, }) {
+    return `
+  <script nonce="${nonce}">
+    (function(k, a) {
+      let h = document.documentElement;
+      let q = window.matchMedia('(prefers-color-scheme: dark)')
+      let s = localStorage.getItem(k)?.toLowerCase().trim();
+
+      let l = [
+        'dark',
+        'light',
+        'system'
+      ];
+
+      let v = l.includes(s) ? s : 'system';
+      let t = v === 'system' ? q.matches ? 'dark' : 'light' : v;
+
+      if (a === 'class') {
+        h.classList.remove(t === 'dark' ? 'light' : 'dark');
+        h.classList.add(t);
+      } else {
+        h.setAttribute(a, t);
+      }
+
+      localStorage.setItem(k, v);
+      h.style.colorScheme = t;
+    })(
+      '${storageKey}',
+      '${attribute}',
+    );
+  </script>
+  `;
+}
+const noTransitionStyle = '*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;transition:none!important;}';

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ThemeProvider } from './theme-provider.svelte';
+export { default as useTheme } from './use-theme.svelte.js';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { default as ThemeProvider } from './theme-provider.svelte';
+export { default as useTheme } from './use-theme.svelte.js';

package/dist/theme-provider.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">import { setContext } from "svelte";
+import {
+  createThemeContext
+} from "./create-theme-context.svelte.js";
+let { children, ...props } = $props();
+let context = createThemeContext(props);
+$effect(context.effects.setup);
+$effect(context.effects.themeChanged);
+$effect(context.effects.osThemeChanged);
+setContext("theme", context);
+</script>
+
+{@render children?.()}
+
+<svelte:head>
+  {@html context.script}
+</svelte:head>

package/dist/theme-provider.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import { type CreateThemeContextConfig } from './create-theme-context.svelte.js';
+declare const __propDef: {
+    props: CreateThemeContextConfig & {
+        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ThemeProviderProps = typeof __propDef.props;
+export type ThemeProviderEvents = typeof __propDef.events;
+export type ThemeProviderSlots = typeof __propDef.slots;
+export default class ThemeProvider extends SvelteComponent<ThemeProviderProps, ThemeProviderEvents, ThemeProviderSlots> {
+}
+export {};

package/dist/use-theme.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Theme } from './create-theme-context.svelte.js';
+export default function useTheme(): {
+    value: Theme;
+};

package/dist/use-theme.svelte.js

@@ -0,0 +1,14 @@
+import { getContext } from 'svelte';
+export default function useTheme() {
+    const context = getContext('theme');
+    return {
+        get value() {
+            return context.theme;
+        },
+        set value(theme) {
+            if (context) {
+                context.theme = theme;
+            }
+        },
+    };
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "svelte-os-themes",
+  "type": "module",
+  "version": "0.0.2",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "package.json": "./package.json"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "keywords": [
+    "Svelte",
+    "SvelteKit",
+    "theme provider",
+    "theme",
+    "themes",
+    "dark mode"
+  ],
+  "repository": "https://github.com/calvo-jp/svelte-themes",
+  "bugs": {
+    "url": "https://github.com/calvo-jp/svelte-themes/issues"
+  },
+  "author": {
+    "name": "John Paul Calvo",
+    "email": "calvojp92@gmail.com"
+  },
+  "peerDependencies": {
+    "svelte": ">=5.0.0"
+  }
+}