Astro Color Scheme

Astro Color Scheme is a fully headless dark mode theme toggle for Astro.

Live Demo on Stackblitz →

Live Demo on Stablo Template →

Installation

``
npm install astro-color-scheme


or


pnpm add astro-color-scheme
`

Basic Usage

You can toggle the theme using button, select, checkbox or radio inside the .

`jsx
---
import { ThemeSwitch } from "astro-color-scheme";
---


`

Advanced Examples

Using Select:

`jsx
---
import { ThemeSwitch } from "astro-color-scheme";
---




System
Dark
Light





`

Using Radio:

`jsx
---
import { ThemeSwitch } from "astro-color-scheme";
---

System
Dark
Light


`

Set theme without any toggle

`jsx
---
import { ThemeSwitch } from "astro-color-scheme";
---






`

Options

Options for ThemeSwitch

| option | required | notes |
| -------------- | ---------------------------- | --------------------------------------------------------------- |
| strategy | required if you use toggle | Possible values: button, checkbox, select or radio |
| defaultTheme | optional | Default: system, Possible values: light, dark or system |
| as | optional | Default: span, Possible values: div, span |

The as option lets you select what wrapper element to use for the ThemeSwitch. Elements Allowed for Toggle inside ThemeSwitch are , , ,

.

`html

Toggle Theme






System
Dark
Light

`

Customizations

As a headless plugin, You are free to add your own styles and icons based on the theme.

Here's an example on how to add custom styles using css variables.

`html

`

Here's an example shows usage of Astro Icon.

`jsx
---
import { Icon } from "astro-icon";
import { ThemeSwitch } from "astro-color-scheme";
---






Toggle Theme