Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/surjithctly/astro-color-scheme
Astro Color Scheme is a fully headless dark mode theme toggle for Astro.
https://github.com/surjithctly/astro-color-scheme
astro astro-themes color-scheme dark-mode dark-theme headless
Last synced: 3 months ago
JSON representation
Astro Color Scheme is a fully headless dark mode theme toggle for Astro.
- Host: GitHub
- URL: https://github.com/surjithctly/astro-color-scheme
- Owner: surjithctly
- Created: 2023-01-03T15:32:38.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-01T07:29:23.000Z (10 months ago)
- Last Synced: 2024-04-13T20:53:08.076Z (10 months ago)
- Topics: astro, astro-themes, color-scheme, dark-mode, dark-theme, headless
- Language: Astro
- Homepage: https://www.npmjs.com/package/astro-color-scheme
- Size: 16.6 KB
- Stars: 35
- Watchers: 3
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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";
---
Toggle Theme
```
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
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;
}
```
Here's an example shows usage of Astro Icon.
```jsx
---
import { Icon } from "astro-icon";
import { ThemeSwitch } from "astro-color-scheme";
---
Toggle Theme
```
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).