npm.io
0.8.1 • Published 1 month ago

astro-theme-toggle

Licence
MIT
Version
0.8.1
Deps
0
Size
12 kB
Vulns
0
Weekly
0
Stars
61
SummaryDependencyVersions

astro-theme-toggle

NPM version

Add a ripple-style theme toggle animation to your Astro project with ease.

https://github.com/user-attachments/assets/19069840-629d-445b-82e7-aea142242225

Installation

npm install astro-theme-toggle

Usage

  1. Add the ThemeScript component to your <head>. This will set the data-theme attribute and toggle the dark class on your <html> element based on the user's theme preference.

    ---
import { ThemeScript } from 'astro-theme-toggle/components';
---
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <ThemeScript />
  <!-- other head elements -->
</head>

  2. Add the Toggle component to your <body> to toggle the theme:

    ---
import { Toggle } from 'astro-theme-toggle/components'
---

<Toggle style="width: 32px; height: 32px;" />

  3. You can customize the icon by passing a Fragment with the icon-light and icon-dark slots.

    ---
import { Toggle } from 'astro-theme-toggle/components'
import MyLightIcon from './my-light-icon.astro'
import MyDarkIcon from './my-dark-icon.astro'
---

<Toggle style="width: 32px; height: 32px;">
  <Fragment slot="icon-light">
    <MyLightIcon />
  </Fragment>
  <Fragment slot="icon-dark">
    <MyDarkIcon />
  </Fragment>
</Toggle>

Live Examples

License

MIT