Astro Color Scheme is a fully headless dark mode theme toggle for Astro.
Live Demo on Stablo Template →
npm install astro-color-scheme
# or
pnpm add astro-color-scheme
You can toggle the theme using button, select, checkbox or radio inside the <ThemeSwitch>.
---
import { ThemeSwitch } from "astro-color-scheme";
---
<div>
<ThemeSwitch strategy="button">
<button>Toggle Theme</button>
</ThemeSwitch>
</div>Advanced Examples
Using Select:
---
import { ThemeSwitch } from "astro-color-scheme";
---
<div>
<ThemeSwitch strategy="select" defaultTheme="system">
<select>
<option value="system">System</option>
<option value="dark">Dark</option>
<option value="light">Light</option>
</select>
</ThemeSwitch>
</div>Using Radio:
---
import { ThemeSwitch } from "astro-color-scheme";
---
<div>
<ThemeSwitch strategy="radio" defaultTheme="system" as="div">
<form>
<label><input type="radio" name="theme" value="system" />System</label>
<label><input type="radio" name="theme" value="dark" />Dark</label>
<label><input type="radio" name="theme" value="light" />Light</label>
</form>
</ThemeSwitch>
</div>Set theme without any toggle
---
import { ThemeSwitch } from "astro-color-scheme";
---
<div>
<ThemeSwitch defaultTheme="dark"/>
</div>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 <button>, <input type=checkbox>, <select>, <form>.
<!-- Button -->
<button>Toggle Theme</button>
<!-- Checkbox -->
<input type="checkbox" />
<!-- Select -->
<select>
<option value="system">System</option>
<option value="dark">Dark</option>
<option value="light">Light</option>
</select>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.
<style>
html {
--background-color: white;
--text-color: black;
color: var(--text-color);
background-color: var(--background-color);
}
.dark {
--background-color: black;
--text-color: white;
}
/* OR */
[data-theme="dark"] {
--background-color: black;
--text-color: white;
}
</style>Here's an example shows usage of Astro Icon.
---
import { Icon } from "astro-icon";
import { ThemeSwitch } from "astro-color-scheme";
---
<div>
<ThemeSwitch>
<button>
<span class="sr-only">Toggle Theme</span>
<Icon class="dark:hidden" name="heroicons-outline:sun" />
<Icon class="hidden dark:block" name="heroicons-outline:moon" />
</button>
</ThemeSwitch>
</div>This plugin also supports custom checkbox switch with animations. Just use strategy="checkbox" and add your content. By default we add dark/light class into the html as well as data-theme attribute. Here's how it would look like:
<html lang="en" class="dark" data-theme="dark"></html>This plugin should work well with regular CSS as well as Tailwind CSS. You can style the dark mode using dark: modifier to add custom icon based on the chosen theme. Make sure you change the darkMode to class to make this work.
// tailwind.config.cjs
darkMode: "class",Please create an issue.
Copyright ©️ 2023-2099. Surjith S M.