├── .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 `<ThemeSwitch>`.
 20 | 
 21 | ```jsx
 22 | ---
 23 | import { ThemeSwitch } from "astro-color-scheme";
 24 | ---
 25 | 
 26 | <div>
 27 |   <ThemeSwitch strategy="button">
 28 |     <button>Toggle Theme</button>
 29 |   </ThemeSwitch>
 30 | </div>
 31 | ```
 32 | 
 33 | <details>
 34 | <summary>Advanced Examples</summary>
 35 | 
 36 | **Using Select:**
 37 | 
 38 | ```jsx
 39 | ---
 40 | import { ThemeSwitch } from "astro-color-scheme";
 41 | ---
 42 | 
 43 | <div>
 44 |   <ThemeSwitch strategy="select" defaultTheme="system">
 45 |     <select>
 46 |       <option value="system">System</option>
 47 |       <option value="dark">Dark</option>
 48 |       <option value="light">Light</option>
 49 |     </select>
 50 |   </ThemeSwitch>
 51 | </div>
 52 | ```
 53 | 
 54 | **Using Radio:**
 55 | 
 56 | ```jsx
 57 | ---
 58 | import { ThemeSwitch } from "astro-color-scheme";
 59 | ---
 60 | 
 61 | <div>
 62 |   <ThemeSwitch strategy="radio" defaultTheme="system" as="div">
 63 |     <form>
 64 |       <label><input type="radio" name="theme" value="system" />System</label>
 65 |       <label><input type="radio" name="theme" value="dark" />Dark</label>
 66 |       <label><input type="radio" name="theme" value="light" />Light</label>
 67 |     </form>
 68 |   </ThemeSwitch>
 69 | </div>
 70 | ```
 71 | 
 72 | </details>
 73 | 
 74 | <details>
 75 | <summary>Set theme without any toggle</summary>
 76 | 
 77 | ```jsx
 78 | ---
 79 | import { ThemeSwitch } from "astro-color-scheme";
 80 | ---
 81 | 
 82 | <div>
 83 |   <ThemeSwitch defaultTheme="dark"/>
 84 | </div>
 85 | ```
 86 | 
 87 | </details>
 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 `<button>`, `<input type=checkbox>`, `<select>`, `<form>`.
100 | 
101 | ```html
102 | <!-- Button -->
103 | <button>Toggle Theme</button>
104 | 
105 | <!-- Checkbox -->
106 | <input type="checkbox" />
107 | 
108 | <!-- Select -->
109 | <select>
110 |   <option value="system">System</option>
111 |   <option value="dark">Dark</option>
112 |   <option value="light">Light</option>
113 | </select>
114 | ```
115 | 
116 | ## Customizations
117 | 
118 | As a headless plugin, You are free to add your own styles and icons based on the theme.
119 | 
120 | Here's an example on how to add custom styles using css variables.
121 | 
122 | ```html
123 | <style>
124 |   html {
125 |     --background-color: white;
126 |     --text-color: black;
127 |     color: var(--text-color);
128 |     background-color: var(--background-color);
129 |   }
130 |   .dark {
131 |     --background-color: black;
132 |     --text-color: white;
133 |   }
134 |   /* OR */
135 |   [data-theme="dark"] {
136 |     --background-color: black;
137 |     --text-color: white;
138 |   }
139 | </style>
140 | ```
141 | 
142 | Here's an example shows usage of Astro Icon.
143 | 
144 | ```jsx
145 | ---
146 | import { Icon } from "astro-icon";
147 | import { ThemeSwitch } from "astro-color-scheme";
148 | ---
149 | 
150 | <div>
151 |   <ThemeSwitch strategy="button">
152 |     <button>
153 |       <span class="sr-only">Toggle Theme</span>
154 |       <Icon class="dark:hidden" name="heroicons-outline:sun" />
155 |       <Icon class="hidden dark:block" name="heroicons-outline:moon" />
156 |     </button>
157 |   </ThemeSwitch>
158 | </div>
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 | <html lang="en" class="dark" data-theme="dark"></html>
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 | </details>
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 | <Element id="astro-color-scheme-switch">
 12 |   <slot />
 13 | </Element>
 14 | 
 15 | <style>
 16 |   :global(.dark) {
 17 |     color-scheme: dark;
 18 |   }
 19 | </style>
 20 | 
 21 | <script define:vars={{ strategy, defaultTheme }}>
 22 |   const themeSwitch = document.getElementById("astro-color-scheme-switch");
 23 |   const theme = localStorage.getItem("theme");
 24 |   const themeMatcher = window.matchMedia("(prefers-color-scheme: dark)");
 25 |   let systemTheme = themeMatcher.matches ? "dark" : "light";
 26 | 
 27 |   themeMatcher.addEventListener("change", (event) => {
 28 |     const theme = event.matches ? "dark" : "light";
 29 |     systemTheme = theme;
 30 |     if (localStorage.getItem("theme") === "system") {
 31 |       updateAppliedTheme(theme);
 32 |     }
 33 |   });
 34 | 
 35 |   function updateAppliedTheme(value) {
 36 |     document.documentElement.classList.remove("light", "dark");
 37 |     document.documentElement.classList.add(value);
 38 |     document.documentElement.setAttribute("data-theme", value);
 39 |   }
 40 | 
 41 |   function updateTheme(value) {
 42 |     const theme = value === "system" ? systemTheme : value;
 43 |     updateAppliedTheme(theme);
 44 |     localStorage.setItem("theme", value);
 45 |   }
 46 | 
 47 |   function setupThemeSwitch(selector, eventType, themeUpdater) {
 48 |     const element = themeSwitch.querySelector(selector);
 49 |     if (!element) {
 50 |       throw new Error(
 51 |         `plugin-astro-color-scheme: <${selector}> element must be present inside 'themeSwitch' or change the 'strategy' attribute`
 52 |       );
 53 |     }
 54 | 
 55 |     if (selector === "form") {
 56 |       element.value = theme || defaultTheme || systemTheme;
 57 |       Array.from(element.querySelectorAll("input")).forEach((input) => {
 58 |         input.checked = (theme || defaultTheme || systemTheme) === input.value;
 59 |       });
 60 |     } else {
 61 |       element.value = theme || defaultTheme || systemTheme;
 62 |     }
 63 | 
 64 |     if (selector === "input") {
 65 |       element.checked = defaultTheme !== element.value;
 66 |     }
 67 | 
 68 |     updateTheme(element.value);
 69 |     element.addEventListener(eventType, themeUpdater);
 70 |   }
 71 | 
 72 |   if (!strategy) {
 73 |       throw new Error(
 74 |         `plugin-astro-color-scheme: Please add a 'strategy' attribute to <ThemeSwitch/>`
 75 |       );
 76 |     }
 77 | 
 78 |   switch (strategy) {
 79 |     case "button":
 80 |       setupThemeSwitch("button", "click", (event) => {
 81 |         const button = event.currentTarget;
 82 |         const settheme = button.value === "dark" ? "light" : "dark";
 83 |         button.value = settheme;
 84 |         updateTheme(settheme);
 85 |       });
 86 |       break;
 87 |     case "select":
 88 |       setupThemeSwitch("select", "change", (event) => {
 89 |         const select = event.currentTarget;
 90 |         updateTheme(select.value);
 91 |       });
 92 |       break;
 93 |     case "checkbox":
 94 |       setupThemeSwitch("input", "change", (event) => {
 95 |         const checkbox = event.currentTarget;
 96 |         const settheme = checkbox.value === "dark" ? "light" : "dark";
 97 |         checkbox.value = settheme;
 98 |         updateTheme(settheme);
 99 |       });
100 |       break;
101 |     case "radio":
102 |       setupThemeSwitch("form", "click", (event) => {
103 |         updateTheme(event.currentTarget.value);
104 |       });
105 |       break;
106 |     default:
107 |       updateTheme(theme || defaultTheme || systemTheme);
108 |   }
109 | </script>
110 | 


--------------------------------------------------------------------------------