set global theme variable theme: 'light'|'dark'
It is stored in document.documentElement.dataset and localStorage
pnpm i @holy-two/data-theme
You need to prevent FOUC yourself.
If you don't care:
// implicit call => (await import("@holy-two/data-theme/dist/init"))() import toggle from "@holy-two/data-theme" export default () => <button onclick={toggle}> toggle </button>
In Astro it's easy:
--- import iife from "@holy-two/data-theme/dist/iife?url" --- <script is:inline fetchpriority="high" src={iife}></script>
In Vite you need vite-plugin-insert-html :
// vite.config.ts import { defineConfig } from "vite" import { insertHtml as insert, h } from "vite-plugin-insert-html" import { readFileSync } from "node:fs" import { fileURLToPath } from "node:url" export default defineConfig({ plugins: [ insert({ head: [ h( "script", { type: "text/javascript" }, readFileSync( fileURLToPath( import.meta.resolve("@holy-two/data-theme/dist/iife/index.js") ), "utf8" ) ), ], }), ], })
import toggle from "@holy-two/data-theme/dist/toggle" export default () => <button onclick={toggle}> toggle </button>