astro-theme-toggle

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

Astro Example Custom Icons React Example Vue Example

<script setup lang="ts">
import { handleToggleClick } from 'astro-theme-toggle'
import { Moon, Sun } from 'lucide-vue-next'
import './icon.css'
</script>

<template>
  <button @click="handleToggleClick">
    <Moon class="icon-moon" />
    <Sun class="icon-sun" />
  </button>
</template>

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