astro-theme-toggle

Add a ripple-style theme toggle animation to your Astro project with ease
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>