@holy-two/data-theme

set global theme variable theme: 'light'|'dark'

It is stored in document.documentElement.dataset and localStorage

install

pnpm i @holy-two/data-theme

use

You need to prevent FOUC yourself.

If you don't care:

// implicit call => (await import("@holy-two/data-theme/dist/init"))()importtogglefrom"@holy-two/data-theme"exportdefault()=><buttononclick={toggle}> toggle </button>

iife

In Astro it's easy:

---importiifefrom"@holy-two/data-theme/dist/iife?url"---
<scriptis:inlinefetchpriority="high"src={iife}></script>

In Vite you need vite-plugin-insert-html :

// vite.config.tsimport{defineConfig}from"vite"import{insertHtmlasinsert,h}from"vite-plugin-insert-html"import{readFileSync}from"node:fs"import{fileURLToPath}from"node:url"exportdefaultdefineConfig({plugins: [insert({head: [h("script",{type: "text/javascript"},readFileSync(fileURLToPath(import.meta.resolve("@holy-two/data-theme/dist/iife/index.js")),"utf8")),],}),],})

without effect

importtogglefrom"@holy-two/data-theme/dist/toggle"exportdefault()=><buttononclick={toggle}> toggle </button>