astro-theme-toggle

Add a ripple-style theme toggle animation to your Astro project with ease
Astro Example Custom Icons React Example Vue Example
theme-toggle-button.astro
---
import { Toggle } from 'astro-theme-toggle'
---


<Toggle class="theme-toggle" />


<style>
  .theme-toggle {
    width: 24px;
    height: 24px;
  }
</style>
head.astro
---
import { ThemeScript } from 'astro-theme-toggle'
import { ViewTransitions } from 'astro:transitions'
---


<head>
  <title>astro-theme-toggle</title>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <ViewTransitions />
  <ThemeScript />
</head>