https://github.com/holy-two/data-theme

A setting for mounting themes.
https://github.com/holy-two/data-theme

Last synced: 9 days ago
JSON representation

A setting for mounting themes.

• Host: GitHub
• URL: https://github.com/holy-two/data-theme
• Owner: holy-two
• License: apache-2.0
• Created: 2024-08-01T21:32:53.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-10-16T01:30:32.000Z (about 1 month ago)
• Last Synced: 2024-10-17T14:30:28.289Z (about 1 month ago)
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@holy-two/data-theme
• Size: 158 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @holy-two/data-theme

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

It is stored in `document.documentElement.dataset` and `localStorage`

## install

```bash

pnpm i @holy-two/data-theme

```

## use

You need to prevent [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) yourself.

If you don't care:

```tsx

// implicit call => (await import("@holy-two/data-theme/dist/init"))()

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

export default () =>  toggle 

```

## iife

In [Astro](https://astro.build/) it's easy:

```astro

---

import iife from "@holy-two/data-theme/dist/iife?url"

---

```

In [Vite](https://vite.dev/) you need [`vite-plugin-insert-html`](https://github.com/NotWoods/vite-plugin-insert-html) :

```ts

// 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

```tsx

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

export default () =>  toggle 

```