{"_id":"@bruneckel/nuxt-theme-transitions","_rev":"7-42cade93efebb7881ac2d37d95e822a0","name":"@bruneckel/nuxt-theme-transitions","dist-tags":{"latest":"0.2.2"},"versions":{"0.1.0":{"name":"@bruneckel/nuxt-theme-transitions","version":"0.1.0","keywords":["nuxt","nuxt-module","theme","dark-mode","color-mode","view-transitions","spread","fade","transition","animation"],"author":{"name":"Bruno Neckel"},"license":"MIT","_id":"@bruneckel/nuxt-theme-transitions@0.1.0","maintainers":[{"name":"bncodes","email":"neckel.bw@gmail.com"}],"homepage":"https://github.com/bruneckel/nuxt-theme-transitions#readme","bugs":{"url":"https://github.com/bruneckel/nuxt-theme-transitions/issues"},"dist":{"shasum":"e5b758afe33bf08d4f082ccf1b5cafafa3d96f84","tarball":"https://registry.npmjs.org/@bruneckel/nuxt-theme-transitions/-/nuxt-theme-transitions-0.1.0.tgz","fileCount":21,"integrity":"sha512-5mOs4g1sQzewD48DGi/gfzV075kqnbNWfy3/35mUtb4WxMaFp1aSXVqHQ5720t9JrHVCzy3g4Zt4u8oupMuUPg==","signatures":[{"sig":"MEUCIQCAmAUnw1+w2Ict2yVcHFCEaEhkSaMtyzkwWLcrVaNr4wIgESbO7XE0BJ9sSlKJGfIsvGb74hNmSb/7BlSnsQxfThE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":18531},"main":"./dist/module.mjs","type":"module","types":"./dist/types.d.mts","exports":{".":{"types":"./dist/types.d.mts","import":"./dist/module.mjs"}},"gitHead":"98f013b5aa3ed8de056b91b2252509123d5aeba1","scripts":{"lint":"eslint .","build":"nuxt-module-build build","prepack":"nuxt-module-build build"},"_npmUser":{"name":"bncodes","email":"neckel.bw@gmail.com"},"repository":{"url":"git+https://github.com/bruneckel/nuxt-theme-transitions.git","type":"git"},"_npmVersion":"11.16.0","description":"Animated dark/light theme transitions for Nuxt using the View Transitions API","directories":{},"_nodeVersion":"24.18.0","dependencies":{"@nuxt/kit":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"nuxt":"^4.0.0","eslint":"^10.8.0","@nuxt/cli":"^3.37.0","typescript":"^5.9.3","typescript-eslint":"^8.65.0","@nuxt/module-builder":"^1.0.3","@stylistic/eslint-plugin":"^5.10.0"},"peerDependencies":{"nuxt":">=4.0.0","@nuxtjs/color-mode":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/nuxt-theme-transitions_0.1.0_1785455256642_0.10844021781336677","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.1.1":{"name":"@bruneckel/nuxt-theme-transitions","version":"0.1.1","keywords":["nuxt","nuxt-module","theme","dark-mode","color-mode","view-transitions","spread","fade","transition","animation"],"author":{"name":"Bruno Neckel"},"license":"MIT","_id":"@bruneckel/nuxt-theme-transitions@0.1.1","maintainers":[{"name":"bncodes","email":"neckel.bw@gmail.com"}],"homepage":"https://github.com/bruneckel/nuxt-theme-transitions#readme","bugs":{"url":"https://github.com/bruneckel/nuxt-theme-transitions/issues"},"dist":{"shasum":"5c174b344e2e3eb95c7fd2c6d1e89e6f542d8df8","tarball":"https://registry.npmjs.org/@bruneckel/nuxt-theme-transitions/-/nuxt-theme-transitions-0.1.1.tgz","fileCount":21,"integrity":"sha512-FTilqzgkry/PRfElhkExDjtkqfCN0dLOVrFcl/Zq/Owc7OHLoyPQq4HfdHy9NxX8fFRzqIUwW58bYHhoU/CPLg==","signatures":[{"sig":"MEYCIQDyS47y2nGrUNiYwQUfRR+DGbGaUk+xEXnTU1aZhxqirQIhAOwiwrQypq5PiM2iOBtmPmAxK35LXgJSsT2qyPVR2CKR","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":18632},"main":"./dist/module.mjs","type":"module","types":"./dist/types.d.mts","exports":{".":{"types":"./dist/types.d.mts","import":"./dist/module.mjs"}},"gitHead":"02dd9c4e821387a793181d025f332aa8574d47df","scripts":{"lint":"eslint .","build":"nuxt-module-build build","prepack":"nuxt-module-build build"},"_npmUser":{"name":"bncodes","email":"neckel.bw@gmail.com"},"repository":{"url":"git+https://github.com/bruneckel/nuxt-theme-transitions.git","type":"git"},"_npmVersion":"11.16.0","description":"Animated dark/light theme transitions for Nuxt using the View Transitions API","directories":{},"_nodeVersion":"24.18.0","dependencies":{"@nuxt/kit":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"nuxt":"^4.0.0","eslint":"^10.8.0","@nuxt/cli":"^3.37.0","typescript":"^5.9.3","typescript-eslint":"^8.65.0","@nuxt/module-builder":"^1.0.3","@stylistic/eslint-plugin":"^5.10.0"},"peerDependencies":{"nuxt":">=4.0.0","@nuxtjs/color-mode":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/nuxt-theme-transitions_0.1.1_1785458372971_0.6284211313848904","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.1.2":{"name":"@bruneckel/nuxt-theme-transitions","version":"0.1.2","keywords":["nuxt","nuxt-module","theme","dark-mode","color-mode","view-transitions","spread","fade","transition","animation"],"author":{"name":"Bruno Neckel"},"license":"MIT","_id":"@bruneckel/nuxt-theme-transitions@0.1.2","maintainers":[{"name":"bncodes","email":"neckel.bw@gmail.com"}],"homepage":"https://github.com/bruneckel/nuxt-theme-transitions#readme","bugs":{"url":"https://github.com/bruneckel/nuxt-theme-transitions/issues"},"dist":{"shasum":"7fe8e59aee9eaf1c2b1ebc6abee7be98bea26ee5","tarball":"https://registry.npmjs.org/@bruneckel/nuxt-theme-transitions/-/nuxt-theme-transitions-0.1.2.tgz","fileCount":21,"integrity":"sha512-TvWyM17qYdoH04Q8XhcqMrXKxQbrhtXeclijb6rWu/dwbjG2MuVirBnHgBIAbh95FNh7Dt1+QSXla0MdJHdb3A==","signatures":[{"sig":"MEQCIEQWsZ+ktJvoWsD3EcLceVvU71Bg2fYIBwcx+mmiBsaoAiAayeVpWaLKn5CWoEaELBoh8adenVavW+iqUMfh4QMVlA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":18535},"main":"./dist/module.mjs","type":"module","types":"./dist/types.d.mts","exports":{".":{"types":"./dist/types.d.mts","import":"./dist/module.mjs"}},"gitHead":"88d3b2bf1e94a5be62f4d3a7069e275c154ea5fe","scripts":{"lint":"eslint .","build":"nuxt-module-build build","prepack":"nuxt-module-build build"},"_npmUser":{"name":"bncodes","email":"neckel.bw@gmail.com"},"repository":{"url":"git+https://github.com/bruneckel/nuxt-theme-transitions.git","type":"git"},"_npmVersion":"11.16.0","description":"Animated dark/light theme transitions for Nuxt using the View Transitions API","directories":{},"_nodeVersion":"24.18.0","dependencies":{"@nuxt/kit":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"nuxt":"^4.0.0","eslint":"^10.8.0","@nuxt/cli":"^3.37.0","typescript":"^5.9.3","typescript-eslint":"^8.65.0","@nuxt/module-builder":"^1.0.3","@stylistic/eslint-plugin":"^5.10.0"},"peerDependencies":{"nuxt":">=4.0.0","@nuxtjs/color-mode":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/nuxt-theme-transitions_0.1.2_1785458905166_0.859975964612923","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.0":{"name":"@bruneckel/nuxt-theme-transitions","version":"0.2.0","keywords":["nuxt","nuxt-module","theme","dark-mode","color-mode","view-transitions","spread","fade","transition","animation"],"author":{"name":"Bruno Neckel"},"license":"MIT","_id":"@bruneckel/nuxt-theme-transitions@0.2.0","maintainers":[{"name":"bncodes","email":"neckel.bw@gmail.com"}],"homepage":"https://github.com/bruneckel/nuxt-theme-transitions#readme","bugs":{"url":"https://github.com/bruneckel/nuxt-theme-transitions/issues"},"dist":{"shasum":"d95709cc58577b25bf46c6507af2e19c7d3a9318","tarball":"https://registry.npmjs.org/@bruneckel/nuxt-theme-transitions/-/nuxt-theme-transitions-0.2.0.tgz","fileCount":23,"integrity":"sha512-Jgvz4K2ys7Bfgbn+IUEy9DVpynKAxqCBcxTd6S3kn91Fcvh7uyPBdPQOCwaRgnATWxYwQvjEXkz3kJpVgMbWVw==","signatures":[{"sig":"MEQCIC+n4K/OtTVIJIpDh0Ejln5t/ua3TVZvpPmGUkbWinu4AiB/VnDDjyVv/SqHO55I7BseVYHYZonUlyDiME9pYk76Zg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":22177},"main":"./dist/module.mjs","type":"module","types":"./dist/types.d.mts","exports":{".":{"types":"./dist/types.d.mts","import":"./dist/module.mjs"}},"gitHead":"28fdcfc85a5e3e87b1697dbff5b2f488c56c6d22","scripts":{"lint":"eslint .","build":"nuxt-module-build build","prepack":"nuxt-module-build build"},"_npmUser":{"name":"bncodes","email":"neckel.bw@gmail.com"},"repository":{"url":"git+https://github.com/bruneckel/nuxt-theme-transitions.git","type":"git"},"_npmVersion":"11.16.0","description":"Animated dark/light theme transitions for Nuxt using the View Transitions API","directories":{},"_nodeVersion":"24.18.0","dependencies":{"@nuxt/kit":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.40","nuxt":"^4.0.0","eslint":"^10.8.0","@nuxt/cli":"^3.37.0","typescript":"^5.9.3","typescript-eslint":"^8.65.0","@nuxt/module-builder":"^1.0.3","@stylistic/eslint-plugin":"^5.10.0"},"peerDependencies":{"nuxt":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/nuxt-theme-transitions_0.2.0_1785688426697_0.6584001048107277","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.1":{"name":"@bruneckel/nuxt-theme-transitions","version":"0.2.1","keywords":["nuxt","nuxt-module","theme","dark-mode","color-mode","view-transitions","spread","fade","transition","animation"],"author":{"name":"Bruno Neckel"},"license":"MIT","_id":"@bruneckel/nuxt-theme-transitions@0.2.1","maintainers":[{"name":"bncodes","email":"neckel.bw@gmail.com"}],"homepage":"https://github.com/bruneckel/nuxt-theme-transitions#readme","bugs":{"url":"https://github.com/bruneckel/nuxt-theme-transitions/issues"},"dist":{"shasum":"34eba39145d085cca310aea7bf1a2886b2383c7c","tarball":"https://registry.npmjs.org/@bruneckel/nuxt-theme-transitions/-/nuxt-theme-transitions-0.2.1.tgz","fileCount":23,"integrity":"sha512-JHhhD8mPeuIvUk7YxBkR8wUNa6zVt2iFFwMwfHTNxmi5dYmb61sVyGx9wcGZYricvpg4wCInb+hppwav+V7UEw==","signatures":[{"sig":"MEUCIQDg362A3Kw5i3p7e2hGvb2qXMYp5c/sqA88nMVXeAMGHwIgUxN7DS/avCftQ51lqtsbKfzznFR8z8zLZLAdzIcsLSE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":22420},"main":"./dist/module.mjs","type":"module","types":"./dist/types.d.mts","exports":{".":{"types":"./dist/types.d.mts","import":"./dist/module.mjs"}},"gitHead":"436c7bbc607f8e0c8e2dfae591bf4ae5024b72d8","scripts":{"lint":"eslint .","build":"nuxt-module-build build","prepack":"nuxt-module-build build"},"_npmUser":{"name":"bncodes","email":"neckel.bw@gmail.com"},"repository":{"url":"git+https://github.com/bruneckel/nuxt-theme-transitions.git","type":"git"},"_npmVersion":"11.16.0","description":"Animated dark/light theme transitions for Nuxt using the View Transitions API","directories":{},"_nodeVersion":"24.18.0","dependencies":{"@nuxt/kit":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.40","nuxt":"^4.0.0","eslint":"^10.8.0","@nuxt/cli":"^3.37.0","typescript":"^5.9.3","typescript-eslint":"^8.65.0","@nuxt/module-builder":"^1.0.3","@stylistic/eslint-plugin":"^5.10.0"},"peerDependencies":{"nuxt":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/nuxt-theme-transitions_0.2.1_1785689458044_0.9230372282809016","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.2":{"name":"@bruneckel/nuxt-theme-transitions","version":"0.2.2","keywords":["nuxt","nuxt-module","theme","dark-mode","color-mode","view-transitions","spread","fade","transition","animation"],"author":{"name":"Bruno Neckel"},"license":"MIT","_id":"@bruneckel/nuxt-theme-transitions@0.2.2","maintainers":[{"name":"bncodes","email":"neckel.bw@gmail.com"}],"homepage":"https://github.com/bruneckel/nuxt-theme-transitions#readme","bugs":{"url":"https://github.com/bruneckel/nuxt-theme-transitions/issues"},"dist":{"shasum":"863824f911aea768b45efb3ef58352d911a0a8ca","tarball":"https://registry.npmjs.org/@bruneckel/nuxt-theme-transitions/-/nuxt-theme-transitions-0.2.2.tgz","fileCount":23,"integrity":"sha512-PNcPMrMYUrUeSqhDdqf0QGj9jVp+9fYSBNlHbU6HI5GoH/dAnGe6C2kO1PI7pxWahhl0RnNmBrQd//LKY3/FsA==","signatures":[{"sig":"MEUCIQDMyNHrE/aj23vea6a1IjjVXK8S/OnYJSSbQIJKjxqrgAIgLVON8d6z11I/53e9u9gKdaHQbHyhcJzDSa1nvOWb/n0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":23043},"main":"./dist/module.mjs","type":"module","types":"./dist/types.d.mts","exports":{".":{"types":"./dist/types.d.mts","import":"./dist/module.mjs"}},"gitHead":"190878b8ad9ae820147704eb9dace975c507d227","scripts":{"lint":"eslint .","build":"nuxt-module-build build","prepack":"nuxt-module-build build"},"_npmUser":{"name":"bncodes","email":"neckel.bw@gmail.com"},"repository":{"url":"git+https://github.com/bruneckel/nuxt-theme-transitions.git","type":"git"},"_npmVersion":"11.16.0","description":"Animated dark/light theme transitions for Nuxt using the View Transitions API","directories":{},"_nodeVersion":"24.18.0","dependencies":{"@nuxt/kit":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.40","nuxt":"^4.0.0","eslint":"^10.8.0","@nuxt/cli":"^3.37.0","typescript":"^5.9.3","typescript-eslint":"^8.65.0","@nuxt/module-builder":"^1.0.3","@stylistic/eslint-plugin":"^5.10.0"},"peerDependencies":{"nuxt":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/nuxt-theme-transitions_0.2.2_1785863788274_0.6941960132485188","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2026-07-30T23:47:36.439Z","modified":"2026-08-08T04:21:10.715Z","0.1.0":"2026-07-30T23:47:36.791Z","0.1.1":"2026-07-31T00:39:33.113Z","0.1.2":"2026-07-31T00:48:25.320Z","0.2.0":"2026-08-02T16:33:46.822Z","0.2.1":"2026-08-02T16:50:58.181Z","0.2.2":"2026-08-04T17:16:28.418Z"},"bugs":{"url":"https://github.com/bruneckel/nuxt-theme-transitions/issues"},"author":{"name":"Bruno Neckel"},"license":"MIT","homepage":"https://github.com/bruneckel/nuxt-theme-transitions#readme","keywords":["nuxt","nuxt-module","theme","dark-mode","color-mode","view-transitions","spread","fade","transition","animation"],"repository":{"url":"git+https://github.com/bruneckel/nuxt-theme-transitions.git","type":"git"},"description":"Animated dark/light theme transitions for Nuxt using the View Transitions API","maintainers":[{"name":"bncodes","email":"neckel.bw@gmail.com"}],"readme":"# nuxt-theme-transitions\n\n[![npm version](https://img.shields.io/npm/v/@bruneckel/nuxt-theme-transitions.svg)](https://www.npmjs.com/package/@bruneckel/nuxt-theme-transitions)\n\nAnimated dark/light theme toggle for Nuxt.\n\n## Install\n\n```bash\nnpm install @bruneckel/nuxt-theme-transitions\n```\n\n```ts\n// nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: ['@bruneckel/nuxt-theme-transitions'],\n})\n```\n\nIf you're migrating from `@nuxtjs/color-mode`, remove it from the `modules` array (and uninstall it).\n\n> [!IMPORTANT]\n> Using Tailwind? Set `darkMode: 'class'` in your Tailwind config. Tailwind's default (`'media'`) ignores the `dark`/`light` class this package applies to `<html>`, so the toggle will silently have no visual effect without it.\n\n## Usage\n\n```vue\n<script setup lang=\"ts\">\nconst { theme, isAnimating, toggleTheme } = useThemeTransition()\n</script>\n\n<template>\n  <button\n    :disabled=\"isAnimating\"\n    @click=\"toggleTheme({ origin: originFromEvent($event) })\"\n  >\n    Toggle theme\n  </button>\n</template>\n```\n\nUse `originFromElement(buttonRef)` to animate from the center of an element instead of the click position.\n\nDisable the button with `:disabled=\"isAnimating\"` to avoid double-clicks while the animation runs.\n\n## Configuration (optional)\n\n| Option | Default | Description |\n|--------|---------|-------------|\n| `variant` | `'fade'` | `'spread'` (circle from click) or `'fade'` (crossfade) |\n| `duration` | `'1s'` / `'400ms'` | How long the animation lasts (e.g. `'2s'`) |\n| `easing` | per variant | Animation easing |\n| `radius` | `'150vmax'` | Spread circle size (spread only) |\n\n```ts\nthemeTransition: {\n  variant: 'spread',\n  duration: '1s',\n}\n```\n\nRestart the dev server after changing `themeTransition`.\n\n## Variants\n\n**spread** — circle expands from the click. Pass an origin:\n\n```ts\ntoggleTheme({ origin: originFromEvent($event) })\ntoggleTheme({ origin: originFromElement(buttonRef.value) })\n```\n\n**fade** — smooth crossfade, no origin needed:\n\n```ts\ntoggleTheme({ variant: 'fade' })\nsetTheme('dark', { variant: 'fade' })\n```\n\n## API\n\n| | |\n|---|---|\n| `toggleTheme(options?)` | Switch between light and dark |\n| `setTheme(mode, options?)` | Set `light`, `dark`, or `system` |\n| `theme` | Current resolved theme: `'light'` or `'dark'` |\n| `isAnimating` | `true` while a transition is running |\n| `originFromEvent(event)` | Click position for spread |\n| `originFromElement(el)` | Element center for spread |\n\n## Browser support\n\n| Browser | Animation |\n|---------|-----------|\n| Chrome, Edge, Safari 18+ | Yes |\n| Firefox | Instant switch |\n| Reduced motion | Instant switch |\n\n## Known issues\n\n- Chrome 150 has a regression where the `spread` effect's clip-path animation can render from the wrong position after the browser window moves between displays with different DPI/scaling. This is a Chrome bug, not something this package can work around. It's already fixed upstream and verified in Chrome Canary; the fix should reach the Stable channel in a future release. See [Chromium issue #535696703](https://issues.chromium.org/issues/535696703).\n\n## License\n\n[MIT](LICENSE) © Bruno Neckel\n","readmeFilename":"README.md"}