├── .gitignore ├── README.md ├── index.ts ├── package.json └── src └── ThemeSwitch.astro /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Astro Color Scheme 2 | 3 | Astro Color Scheme is a fully headless dark mode theme toggle for Astro. 4 | 5 | [**Live Demo on Stackblitz →**](https://stackblitz.com/edit/github-jpfnv9-ep5z59?file=src%2Fpages%2Findex.astro) 6 | 7 | [**Live Demo on Stablo Template →**](https://stablo-astro.web3templates.com/) 8 | 9 | ## Installation 10 | 11 | ``` 12 | npm install astro-color-scheme 13 | # or 14 | pnpm add astro-color-scheme 15 | ``` 16 | 17 | ## Basic Usage 18 | 19 | You can toggle the theme using `button`, `select`, `checkbox` or `radio` inside the ``. 20 | 21 | ```jsx 22 | --- 23 | import { ThemeSwitch } from "astro-color-scheme"; 24 | --- 25 | 26 |
27 | 28 | 29 | 30 |
31 | ``` 32 | 33 |
34 | Advanced Examples 35 | 36 | **Using Select:** 37 | 38 | ```jsx 39 | --- 40 | import { ThemeSwitch } from "astro-color-scheme"; 41 | --- 42 | 43 |
44 | 45 | 50 | 51 |
52 | ``` 53 | 54 | **Using Radio:** 55 | 56 | ```jsx 57 | --- 58 | import { ThemeSwitch } from "astro-color-scheme"; 59 | --- 60 | 61 |
62 | 63 |
64 | 65 | 66 | 67 |
68 |
69 |
70 | ``` 71 | 72 |
73 | 74 |
75 | Set theme without any toggle 76 | 77 | ```jsx 78 | --- 79 | import { ThemeSwitch } from "astro-color-scheme"; 80 | --- 81 | 82 |
83 | 84 |
85 | ``` 86 | 87 |
88 | 89 | ## Options 90 | 91 | Options for `ThemeSwitch` 92 | 93 | | option | required | notes | 94 | | -------------- | ---------------------------- | --------------------------------------------------------------- | 95 | | `strategy` | `required` if you use toggle | Possible values: `button`, `checkbox`, `select` or `radio` | 96 | | `defaultTheme` | `optional` | Default: `system`, Possible values: `light`, `dark` or `system` | 97 | | `as` | `optional` | Default: `span`, Possible values: `div`, `span` | 98 | 99 | The `as` option lets you select what wrapper element to use for the ThemeSwitch. Elements Allowed for Toggle inside `ThemeSwitch` are ` 157 |
158 | 159 | ``` 160 | 161 | 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: 162 | 163 | ```html 164 | 165 | ``` 166 | 167 | ## Tailwind CSS 168 | 169 | 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. 170 | 171 | ```js 172 | // tailwind.config.cjs 173 | darkMode: "class", 174 | ``` 175 | 176 | 177 | 178 | ## Contribute 179 | 180 | Please create an issue. 181 | 182 | ## Credits 183 | 184 | Copyright ©️ 2023-2099. [Surjith S M](https://twitter.com/surjithctly). 185 | -------------------------------------------------------------------------------- /index.ts: -------------------------------------------------------------------------------- 1 | export { default as ThemeSwitch } from "./src/ThemeSwitch.astro"; 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "astro-color-scheme", 3 | "version": "1.1.5", 4 | "description": "Perfect dark mode for Astro in few lines of code. Theme Toggle for Dark, Light & Auto (system)", 5 | "type": "module", 6 | "exports": { 7 | ".": "./index.ts" 8 | }, 9 | "homepage": "https://github.com/surjithctly/astro-color-scheme#readme", 10 | "bugs": { 11 | "url": "https://github.com/surjithctly/astro-color-scheme/issues" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/surjithctly/astro-color-scheme.git" 16 | }, 17 | "scripts": { 18 | "test": "echo \"Error: no test specified\" && exit 1" 19 | }, 20 | "keywords": [ 21 | "astro", 22 | "astro-component", 23 | "themes", 24 | "color-scheme", 25 | "dark", 26 | "dark-mode", 27 | "light", 28 | "system", 29 | "auto" 30 | ], 31 | "author": "Surjith S M", 32 | "license": "MIT" 33 | } 34 | -------------------------------------------------------------------------------- /src/ThemeSwitch.astro: -------------------------------------------------------------------------------- 1 | --- 2 | type Props = { 3 | strategy: "button" | "checkbox" | "select" | "radio"; 4 | as?: "div" | "span"; 5 | defaultTheme?: "dark" | "light" | "system"; 6 | }; 7 | 8 | const { strategy, defaultTheme, as: Element = "span" }: Props = Astro.props; 9 | --- 10 | 11 | 12 | 13 | 14 | 15 | 20 | 21 | 110 | --------------------------------------------------------------------------------