svelte-os-themes 3.0.0 → 4.0.1

package/README.md

@@ -24,8 +24,7 @@ npm install svelte-os-themes
   storageKey="theme"
   colorScheme={true}
   system={true}
-  styleNonce=""
-  scriptNonce=""
+  nonce=""
 >
   {@render children()}
 </ThemeProvider>
@@ -108,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`

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

@@ -25,8 +25,7 @@ export interface CreateThemeOptions {
      * @default true
      */
     colorScheme?: boolean;
-    styleNonce?: string;
-    scriptNonce?: string;
+    nonce?: string;
 }
 export interface CreateThemeReturn {
     get current(): Theme;
@@ -34,10 +33,7 @@ export interface CreateThemeReturn {
 }
 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

@@ -14,13 +14,19 @@ export function createTheme(options) {
             ...userOptions,
         };
     });
-    let theme = $state(options_.fallback);
-    $effect(() => {
+    let theme = $derived(options_.fallback);
+    $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
@@ -35,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(() => {
@@ -79,33 +86,6 @@ export function createTheme(options) {
         },
     };
 }
-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;
@@ -115,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 = [
@@ -144,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/types.d.ts

@@ -1 +1 @@
-export type Theme = "dark" | "light" | "system";
+export type Theme = 'dark' | 'light' | 'system';

package/package.json

@@ -2,7 +2,7 @@
 	"name": "svelte-os-themes",
 	"type": "module",
 	"license": "MIT",
-	"version": "3.0.0",
+	"version": "4.0.1",
 	"main": "./dist/index.js",
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -37,7 +37,7 @@
 		"name": "John Paul Calvo",
 		"email": "looselytiedshoelace@gmail.com"
 	},
-	"packageManager": "pnpm@10.30.3",
+	"packageManager": "pnpm@10.32.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -49,24 +49,24 @@
 		"release": "release-it"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "^2.4.6",
+		"@biomejs/biome": "^2.4.8",
 		"@eslint/js": "^10.0.1",
 		"@sveltejs/adapter-vercel": "^6.3.3",
-		"@sveltejs/kit": "^2.53.4",
+		"@sveltejs/kit": "^2.55.0",
 		"@sveltejs/package": "^2.5.7",
-		"@sveltejs/vite-plugin-svelte": "^6.2.4",
-		"@tailwindcss/vite": "^4.2.1",
+		"@sveltejs/vite-plugin-svelte": "^7.0.0",
+		"@tailwindcss/vite": "^4.2.2",
 		"publint": "^0.3.18",
 		"release-it": "^19.2.4",
-		"svelte": "^5.53.7",
-		"svelte-check": "^4.4.4",
-		"tailwindcss": "^4.2.1",
+		"svelte": "^5.55.0",
+		"svelte-check": "^4.4.5",
+		"tailwindcss": "^4.2.2",
 		"tslib": "^2.8.1",
-		"typescript": "^5.9.3",
-		"vite": "^7.3.1"
+		"typescript": "^6.0.2",
+		"vite": "^8.0.2"
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0"
+		"svelte": "^5.40.0"
 	},
 	"release-it": {
 		"git": {