Add a ripple-style theme toggle animation to your Astro project with ease.
https://github.com/user-attachments/assets/19069840-629d-445b-82e7-aea142242225
npm install astro-theme-toggle-
Add the
ThemeScriptcomponent to your<head>. This will set thedata-themeattribute and toggle thedarkclass on your<html>element based on the user's theme preference.--- import { ThemeScript } from 'astro-theme-toggle'; --- <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <ThemeScript /> <!-- other head elements --> </head>
-
Add the
Togglecomponent to your<body>to toggle the theme:--- import { Toggle } from 'astro-theme-toggle' --- <Toggle style="width: 32px; height: 32px;" />
-
You can customize the icon by passing a
Fragmentwith theicon-lightandicon-darkslots.--- import { Toggle } from 'astro-theme-toggle' import MyLightIcon from './my-light-icon.astro' import MyDarkIcon from './my-dark-icon.astro' --- <Toggle style="width: 32px; height: 32px;"> <Fragment slot="icon-light"> <MyLightIcon /> </Fragment> <Fragment slot="icon-dark"> <MyDarkIcon /> </Fragment> </Toggle>
MIT