--- name: nikuma-theme-switcher description: Add a system / light / dark theme switcher that remembers the choice and reveals the new theme as a growing circle. Use when the user asks for this effect or component in any framework (vanilla JS, Astro, React, Vue, Svelte, Solid). --- # Theme switcher Three buttons: match my device, day, night. The new theme grows as a circle out of the button you pressed. Try it: this demo changes the real theme of this site. One dependency-free file. `mountThemeSwitcher(element, options)` builds everything inside `element` and **returns a `stop()` function** that removes it and cleans up all listeners. The framework wrappers below only call it in the right lifecycle hook. ## When to use The user wants: system, day or night with a circle reveal. Works in plain HTML, Astro, React (incl. Next.js), Vue (incl. Nuxt), Svelte (incl. SvelteKit) and Solid. ## How to add it 1. Save the file(s) under **Source** into the project (for example `src/lib/theme-switcher/`), keeping their names. They need no installation. 2. Vanilla / Astro / plain HTML: import the function in a ` const css = (id, t) => { if (!document.getElementById(id)) { const s = document.createElement('style'); s.id = id; s.textContent = t; document.head.append(s); } }; const ICONS = { system: '', light: '', dark: '', }; const LABEL = { system: 'Match my device', light: 'Day theme', dark: 'Night theme' }; export function mountThemeSwitcher(el, o = {}) { css('tsx-css', `.tsx{position:relative;display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:rgba(127,127,127,.16)} .tsx button{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:30px;border:0;border-radius:999px;background:none;color:inherit;opacity:.6;cursor:pointer;transition:opacity .25s} .tsx button[aria-pressed="true"]{opacity:1}.tsx button:hover{opacity:1}.tsx svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .tsx i{position:absolute;z-index:0;top:3px;left:3px;width:34px;height:30px;border-radius:999px;background:rgba(127,127,127,.28);transition:transform .35s cubic-bezier(.2,.7,.1,1)} :root.tsx-vt::view-transition-old(root),:root.tsx-vt::view-transition-new(root){animation:none;mix-blend-mode:normal} :root.tsx-vt::view-transition-old(root){z-index:1}:root.tsx-vt::view-transition-new(root){z-index:2}`); const key = o.storageKey || 'theme', def = o.default || 'system', root = document.documentElement, mql = matchMedia('(prefers-color-scheme: dark)'); const get = () => { try { return localStorage.getItem(key) || def; } catch { return def; } }; const save = (v) => { try { localStorage.setItem(key, v); } catch {} }; const resolve = (p) => (p === 'system' ? (mql.matches ? 'dark' : 'light') : p); const names = ['system', 'light', 'dark']; el.innerHTML = `
${names.map((n) => ``).join('')}
`; const seg = el.firstElementChild, thumb = seg.querySelector('i'), btns = [...seg.querySelectorAll('button')]; const apply = () => { const p = get(); root.dataset.pref = p; root.dataset.theme = resolve(p); btns.forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.t === p))); thumb.style.transform = `translateX(${names.indexOf(p) * 36}px)`; }; const choose = (p, btn) => { const change = () => { save(p); apply(); }; if (o.reveal === false || resolve(p) === root.dataset.theme || !document.startViewTransition || (!o.ignoreMotionPref && matchMedia('(prefers-reduced-motion: reduce)').matches)) return change(); const b = btn.getBoundingClientRect(), x = b.left + b.width / 2, y = b.top + b.height / 2, r = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y)); root.classList.add('tsx-vt'); const vt = document.startViewTransition(change); vt.ready.then(() => root.animate({ clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${r}px at ${x}px ${y}px)`] }, { duration: 900, easing: 'cubic-bezier(.65,.05,.25,1)', pseudoElement: '::view-transition-new(root)' })).catch(() => {}); vt.finished.finally(() => root.classList.remove('tsx-vt')); }; const click = (e) => { const b = e.target.closest('button[data-t]'); if (b) choose(b.dataset.t, b); }; const sys = () => { if (get() === 'system') apply(); }; seg.addEventListener('click', click); mql.addEventListener('change', sys); apply(); return () => { seg.removeEventListener('click', click); mql.removeEventListener('change', sys); el.innerHTML = ''; }; } ``` ## Framework wrappers ### React: `ThemeSwitcher.jsx` ```jsx 'use client'; // only needed in Next.js import { useEffect, useRef } from 'react'; import { mountThemeSwitcher } from './theme-switcher.js'; export default function ThemeSwitcher({ options = {}, className, style }) { const ref = useRef(null); useEffect(() => mountThemeSwitcher(ref.current, options), []); // the engine returns its own cleanup return
; } ``` ### Vue: `ThemeSwitcher.vue` ```vue ``` ### Svelte: `ThemeSwitcher.svelte` ```svelte
``` ### Solid: `ThemeSwitcher.jsx` ```jsx import { onMount, onCleanup } from 'solid-js'; import { mountThemeSwitcher } from './theme-switcher.js'; export default function ThemeSwitcher(props) { let root; onMount(() => onCleanup(mountThemeSwitcher(root, props.options || {}))); return
; } ```