astro-theme-toggle

Add a ripple-style theme toggle animation to your Astro project with ease
285,212 62
astro-component astro withastro
Install
npm install astro-theme-toggle
Latest Version:0.8.2
Vue:3
License:MIT
Last Updated:Oct 21, 2026
Links: GitHub  ·  npm
Maintainer: ocavue

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

Related Packages

astro-intlayer

Easily internationalize i18n your Astro applications with type-safe multilingual...

230,318 856
astro astro-component withastro a11y astro-integration astro-loader devtools i18n internationalization intlayer +2
starwind

Install and manage Starwind UI components in Astro, React, Vue (beta), and Svelt...

22,190 752
astro astro-component withastro accessibility astro-ui components react react-component starwind starwind-cli +3
@feugene/astro-granularity

Astro integration for @feugene/granularity — flash-free theme mode, styles, auto...

1,735 0
astro astro-component astro-integration dark-mode design-system granularity granum islands vue vue3
@astrojs/vue

Use Vue components within Astro

2,793,804 63,503
astro-component astro-integration renderer vue
ziko-wrapper

integrate zikojs elements within other ui framework like vue react solidjs svelt...

5,604 49
astro astro-component withastro angular framework front-end lit mobile next nuxt +8

Version History

Version Released License
0.8.2 MIT
0.8.1 MIT
0.8.0 MIT
0.7.0 MIT
0.6.1 MIT