Astro-theme-toggle NPM

astro-theme-toggle

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

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';
---
<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>

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

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

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

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

---
import { Toggle } from 'astro-theme-toggle'
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>