astro-theme-toggle

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

Astro Example Custom Icons React Example Vue Example

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

<Toggle style="width: 64px; height: 64px;">
  <Fragment slot="icon-light">
    <span style="font-size: 64px;">🌞</span>
  </Fragment>
  <Fragment slot="icon-dark">
    <span style="font-size: 64px;">🌚</span>
  </Fragment>
</Toggle>

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