Skip to content

Latest commit

 

History

History
70 lines (52 loc) · 1.72 KB

README.md

File metadata and controls

70 lines (52 loc) · 1.72 KB

astro-theme-toggle

NPM version

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

astro-theme-toggle.mp4

Installation

npm install astro-theme-toggle

Usage

  1. Add the ThemeScript component to your <head>. This will set the data-theme attribute and toggle the dark class 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>

  2. Add the Toggle component to your <body> to toggle the theme:

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

<Toggle style="width: 32px; height: 32px;" />

  3. You can customize the icon by passing a Fragment with the icon-light and icon-dark slots.

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

Live Examples

License

MIT