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 { handleToggleClick } from 'astro-theme-toggle'
import { Moon, Sun } from 'lucide-react'
import './icon.css'

export default function ThemeToggleButtonReact() {
  return (
    <button onClick={handleToggleClick}>
      <Moon className="icon-moon" />
      <Sun className="icon-sun" />
    </button>
  )
}

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

.icon-sun {
  display: block;
}
.icon-moon {
  display: none;
}
.dark .icon-sun {
  display: none;
}
.dark .icon-moon {
  display: block;
}