@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"))()
import toggle from "@holy-two/data-theme"

export default () => <button onclick={toggle}> toggle </button>

iife

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"
          )
        ),
      ],
    }),
  ],
})

without effect

import toggle from "@holy-two/data-theme/dist/toggle"

export default () => <button onclick={toggle}> toggle </button>