![\"Demo:](\"../../.github/assets/demo.gif\")
\n\n \n
Check out the Live Example to try it for yourself.
\n\n## Install\n\n```sh\nnpm install @brustack/vue-theme-transitions\n# or\npnpm add @brustack/vue-theme-transitions\n# or\nyarn add @brustack/vue-theme-transitions\n```\n\nPrefer to see it running first?\n\n```sh\ngit clone https://github.com/brustack/theme-transitions.git\ncd theme-transitions\nnpm run install:vue-demo\nnpm run dev:vue-demo\n```\n\n## Usage\n\n```vue\n\n\n\n \n\n```\n\nBinding `toggleTheme` directly to `@click` works because it accepts the native `MouseEvent` and derives the spread effect's origin from the click position automatically. No import from the core package needed.\n\n## Styling\n\n`useThemeTransition` applies the current theme's name (`dark`, `light`, or a custom name, see Custom themes below) as a class on ``. Style your palette off that class with any approach.\n\n### CSS variables\n\n```css\n:root {\n --bg: #ffffff;\n --text: #111111;\n}\n\nhtml.dark {\n --bg: #0b0b10;\n --text: #f4f2ed;\n}\n\nhtml.sepia {\n --bg: #f4ecd8;\n --text: #4b3621;\n}\n\nbody {\n background: var(--bg);\n color: var(--text);\n}\n```\n\n### Tailwind\n\nSet `darkMode: 'class'` in your Tailwind config (see Install above), then map your color tokens to the CSS variables above:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n darkMode: 'class',\n theme: {\n extend: {\n colors: {\n bg: 'var(--bg)',\n text: 'var(--text)',\n },\n },\n },\n};\n```\n\n## Configuration (optional)\n\n| Variant | `duration` | `easing` |\n|---|:---:|:---:|\n| `spread` | `'1s'` | ❌ |\n| `fade` (default) | `'400ms'` | `'ease'` |\n| `none` | ❌ | ❌ |\n\n```ts\nuseThemeTransition({ variant: 'spread', duration: '1s' })\n```\n\nThe first call in the app sets the shared default. Pass a `MouseEvent` (as shown in Usage) or an options object to `toggleTheme`/`setTheme` to override just that one call.\n\n### Custom themes\n\nRegister extra theme names beyond `light`/`dark`/`system` via `themes`:\n\n```ts\nuseThemeTransition({ themes: ['sepia', 'sunset'] })\n```\n\n`setTheme('sepia')` then applies a `sepia` class the same way `light`/`dark` do (see Styling above). The composable's `themes` ref always includes `['light', 'dark', 'system', ...your custom names]`, useful for building a theme switcher. `toggleTheme()` is unaffected, it always flips between `light` and `dark`.\n\n## API\n\n| | |\n|---|---|\n| `theme` | Current resolved theme: `'light'`, `'dark'`, or a custom theme name |\n| `mode` | Current preference: `'light'`, `'dark'`, `'system'`, or a custom theme name |\n| `isAnimating` | `true` while a transition is running |\n| `themes` | All registered theme names: `['light', 'dark', 'system', ...custom]` |\n| `toggleTheme(eventOrOptions?)` | Switch between light and dark |\n| `setTheme(mode, eventOrOptions?)` | Set `light`, `dark`, `system`, or a custom theme name |\n\n## Vite plugin\n\nRegister the anti-flash init script in `vite.config.ts`:\n\n```ts\nimport { defineConfig } from 'vite';\nimport { themeTransitions } from '@brustack/theme-transitions-core/vite';\n\nexport default defineConfig({\n plugins: [themeTransitions()],\n});\n```\n\nOptionally, pass the same options as above so every `useThemeTransition()` call in the app picks them up without repeating them:\n\n```ts\nplugins: [themeTransitions({ variant: 'spread', duration: '1s' })],\n```\n\n## Other bundlers\n\nNot using Vite? `themeTransitions()` is a thin wrapper around two functions the core package exports, so you can get the same anti-flash behavior with any bundler by calling them directly.\n\nWith webpack and `html-webpack-plugin`:\n\n```js\nconst { buildColorModeInitScript } = require('@brustack/theme-transitions-core');\n\nnew HtmlWebpackPlugin({\n templateParameters: { themeInitScript: buildColorModeInitScript() },\n});\n```\n\n```html\n\n\n```\n\nThe script must run in ``, before the page paints, regardless of where your bundle's own `