svelte-os-themes 2.0.0 → 4.0.0

package/README.md

@@ -1,6 +1,6 @@
 # Svelte OS Themes
 
-Lightweight dark mode helper for [Svelte](https://svelte.dev/).
+Light-weight dark mode helper for [Svelte](https://svelte.dev/).
 
 ## Installation
 
@@ -24,8 +24,7 @@ npm install svelte-os-themes
   storageKey="theme"
   colorScheme={true}
   system={true}
-  styleNonce=""
-  scriptNonce=""
+  nonce=""
 >
   {@render children()}
 </ThemeProvider>
@@ -41,13 +40,28 @@ npm install svelte-os-themes
   $inspect(theme.current);
 </script>
 
-<button {...theme.getTriggerProps({value: 'light'})}>
+<button
+  type="button"
+  onclick={() => {
+    theme.current = 'light';
+  }}
+>
   Light
 </button>
-<button {...theme.getTriggerProps({value: 'dark'})}>
+<button
+  type="button"
+  onclick={() => {
+    theme.current = 'dark';
+  }}
+>
   Dark
 </button>
-<button {...theme.getTriggerProps({value: 'system'})}>
+<button
+  type="button"
+  onclick={() => {
+    theme.current = 'system';
+  }}
+>
   System
 </button>
 ```
@@ -93,16 +107,9 @@ npm install svelte-os-themes
   accepted values: `true`, `false`<br/>
   default value: `true`
 
-- `scriptNonce`
+- `nonce`
 
-  The nonce to use for the injected script.
-
-  accepted values: `<string>`<br/>
-  default value: `undefined`
-
-- `styleNonce`
-
-  The nonce to use for the injected style.
+  The nonce to use for the injected script and transition-suppression style.
 
   accepted values: `<string>`<br/>
   default value: `undefined`
@@ -117,57 +124,6 @@ npm install svelte-os-themes
 
   Returns the current theme when used as a getter and sets the theme when used as a setter.
 
-  ```svelte
-  <script>
-    import { useTheme } from 'svelte-os-themes';
-
-    let theme = useTheme();
-  </script>
-
-  <div>Current Theme: {theme.current}</div>
-
-  <button
-    type="button"
-    onclick={function () {
-      theme.current = 'light';
-    }}
-  >
-    Light
-  </button>
-  <button
-    type="button"
-    onclick={function () {
-      theme.current = 'dark';
-    }}
-  >
-    Dark
-  </button>
-  <button
-    type="button"
-    onclick={function () {
-      theme.current = 'system';
-    }}
-  >
-    System
-  </button>
-  ```
-
-- `getTriggerProps`
-
-  Returns button attributes used to trigger a specific theme.
-
-  ```svelte
-  <script>
-    import { useTheme } from 'svelte-os-themes';
-
-    let theme = useTheme();
-  </script>
-
-  <button {...theme.getTriggerProps({value: 'light'})}>Light</button>
-  <button {...theme.getTriggerProps({value: 'dark'})}>Dark</button>
-  <button {...theme.getTriggerProps({value: 'system'})}>System</button>
-  ```
-
 ### parseTheme
 
 `parseTheme` is a helper function that parses any value into a valid theme.

package/dist/ThemeProvider.svelte

@@ -14,14 +14,10 @@ let {children, ...props}: ThemeProviderProps = $props();
 
 let theme = createTheme(() => props);
 let script = createTheme.script(() => props);
-let style = createTheme.style(() => props);
 
 setThemeContext(theme);
 </script>
 
-<svelte:head>
-	{@html style.value}
-	{@html script.value}
-</svelte:head>
+<svelte:head>{@html script.current}</svelte:head>
 
 {@render children?.()}

package/dist/createTheme.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { Theme } from './types.js';
 export interface CreateThemeOptions {
     /**
@@ -26,23 +25,15 @@ export interface CreateThemeOptions {
      * @default true
      */
     colorScheme?: boolean;
-    styleNonce?: string;
-    scriptNonce?: string;
-}
-export interface ThemeTriggerProps {
-    value: Theme;
+    nonce?: string;
 }
 export interface CreateThemeReturn {
     get current(): Theme;
     set current(value: Theme | null | undefined);
-    getTriggerProps(props: ThemeTriggerProps): HTMLButtonAttributes;
 }
 export declare function createTheme(options: CreateThemeOptions | (() => CreateThemeOptions)): CreateThemeReturn;
 export declare namespace createTheme {
-    var style: (props: CreateThemeOptions | (() => CreateThemeOptions)) => {
-        readonly value: string;
-    };
     var script: (props: CreateThemeOptions | (() => CreateThemeOptions)) => {
-        readonly value: string;
+        readonly current: string;
     };
 }

package/dist/createTheme.svelte.js

@@ -15,23 +15,18 @@ export function createTheme(options) {
         };
     });
     let theme = $state(options_.fallback);
-    function getTriggerProps(props) {
-        return {
-            type: 'button',
-            onclick() {
-                theme = props.value;
-            },
-            'aria-label': 'Enable %s mode'.replace('%s', props.value),
-            'data-state': theme === props.value ? 'on' : 'off',
-            'data-value': props.value,
-        };
-    }
-    $effect(() => {
+    $effect.pre(() => {
         theme = parseTheme(window.localStorage.getItem(options_.storageKey), options_.fallback);
     });
     $effect(() => {
         const html = document.documentElement;
-        html.classList.add('svelte-os-themes__no-transition');
+        const head = document.head;
+        const style = document.createElement('style');
+        if (options_.nonce) {
+            style.setAttribute('nonce', options_.nonce);
+        }
+        style.appendChild(document.createTextNode(`*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
+        head.appendChild(style);
         const originalTheme = theme;
         const resolvedTheme = originalTheme === 'system'
             ? window.matchMedia('(prefers-color-scheme: dark)').matches
@@ -46,11 +41,12 @@ export function createTheme(options) {
         else {
             html.setAttribute(options_.attribute, resolvedTheme);
         }
-        if (options_.colorScheme)
+        if (options_.colorScheme) {
             html.style.colorScheme = resolvedTheme;
+        }
         window.localStorage.setItem(options_.storageKey, originalTheme);
         setTimeout(() => {
-            html.classList.remove('svelte-os-themes__no-transition');
+            head.removeChild(style);
         }, 1);
     });
     $effect(() => {
@@ -80,44 +76,16 @@ export function createTheme(options) {
         get current() {
             return theme;
         },
-        set current(newTheme) {
-            if (newTheme) {
-                theme = newTheme;
+        set current(value) {
+            if (value) {
+                theme = value;
             }
             else {
                 theme = options_.fallback;
             }
         },
-        getTriggerProps,
     };
 }
-createTheme.style = (props) => {
-    const options_ = $derived.by(() => {
-        const userOptions = typeof props === 'function' ? props() : props;
-        return {
-            ...defaultOptions,
-            ...userOptions,
-        };
-    });
-    const value = $derived(`
-  <style ${assignNonce(options_.styleNonce)}>
-    .svelte-os-themes__no-transition,
-    .svelte-os-themes__no-transition *,
-    .svelte-os-themes__no-transition *::after,
-    .svelte-os-themes__no-transition *::before {
-      -webkit-transition: none !important;
-      -moz-transition: none !important;
-      -o-transition: none !important;
-      transition: none !important;
-    }
-  </style>
-  `);
-    return {
-        get value() {
-            return value;
-        },
-    };
-};
 createTheme.script = (props) => {
     const options_ = $derived.by(() => {
         const userOptions = typeof props === 'function' ? props() : props;
@@ -127,10 +95,9 @@ createTheme.script = (props) => {
         };
     });
     const value = $derived(`
-  <script ${assignNonce(options_.scriptNonce)}>
-    (function(k, a, f, c) {
+  <script ${options_.nonce ? `nonce="${options_.nonce}"` : ''}>(function(k, a, f, c) {
       const h = document.documentElement;
-      const q = window.matchMedia('(prefers-color-scheme: dark)')
+      const q = window.matchMedia('(prefers-color-scheme: dark)');
       const s = window.localStorage.getItem(k)?.toLowerCase().trim();
 
       const l = [
@@ -156,14 +123,16 @@ createTheme.script = (props) => {
       '${options_.storageKey}',
       '${options_.attribute}',
       '${options_.fallback}',
-      ${options_.colorScheme},
+      ${options_.colorScheme}
     );
   </script>
-  `);
+  `
+        .replace(/\n+/g, '')
+        .replace(/\s+/g, ' ')
+        .trim());
     return {
-        get value() {
+        get current() {
             return value;
         },
     };
 };
-const assignNonce = (nonce) => (nonce ? `nonce="${nonce}"` : '');

package/dist/useTheme.svelte.d.ts

@@ -1,4 +1,6 @@
-import type { CreateThemeReturn } from './createTheme.svelte.js';
-export interface UseThemeReturn extends CreateThemeReturn {
+import type { Theme } from './types.js';
+export interface UseThemeReturn {
+    get current(): Theme;
+    set current(value: Theme | null | undefined);
 }
 export declare const useTheme: () => UseThemeReturn;

package/dist/useTheme.svelte.js

@@ -1,2 +1,12 @@
 import { getThemeContext } from './ThemeContext.svelte.js';
-export const useTheme = () => getThemeContext();
+export const useTheme = () => {
+    const ctx = getThemeContext();
+    return {
+        get current() {
+            return ctx.current;
+        },
+        set current(value) {
+            ctx.current = value;
+        },
+    };
+};

package/package.json

@@ -2,7 +2,7 @@
 	"name": "svelte-os-themes",
 	"type": "module",
 	"license": "MIT",
-	"version": "2.0.0",
+	"version": "4.0.0",
 	"main": "./dist/index.js",
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",