# Astro Color Scheme Astro Color Scheme is a fully headless dark mode theme toggle for Astro. [**Live Demo on Stackblitz →**](https://stackblitz.com/edit/github-jpfnv9-ep5z59?file=src%2Fpages%2Findex.astro) [**Live Demo on Stablo Template →**](https://stablo-astro.web3templates.com/) ## 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"; ---

``` **Using Radio:** ```jsx --- import { ThemeSwitch } from "astro-color-scheme"; ---

```

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 ` ``` 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 ``` ## Tailwind CSS 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. ```js // tailwind.config.cjs darkMode: "class", ``` ## Contribute Please create an issue. ## Credits Copyright ©️ 2023-2099. [Surjith S M](https://twitter.com/surjithctly).