Component live demo
↑ Click me!
Keywords:
- astro
- astro-component
- color
- theme
- switch
- toggle
- dark
- light
- mode
- progressive
- no-js
- scheme
- native
- prefers-color-scheme
- javascript
- vanilla
↑ Click me!
🚀 Astro — Color mode, with user override
Provides system or user-defined color scheme preference, with a toggle mechanism.
Settings are persisted, component is progressively enhanced and flash of mis-styled content avoided.
Also, this provides an easier way to target theme with CSS selector / SCSS mixins / JS DOM selector.
Features
- Detects user current color mode
- Apply a
data-color-mode="dark|light"attribute on root document - Provides a toggle mechanism for overriding system preference
- Persists user preference in browser local storage
- Inject saved setting critically, avoiding a blinding flash of mis-styled content.
- Provides SCSS mixins for easy theme targeting
- Supports JS / No-JS, with a fallback to user system preference
📦 Installation
pnpm i astro-color-mode🛠 Usage
---
import { ColorMode } from 'astro-color-mode';
// ...
---<!-- ... -->
<head>
<!-- Place component inside `HEAD` tag -->
<ColorMode />
<!-- ... -->
</head>Use data-color-mode-switch where you want to toggle theme setting,
on an any element, somewhere inside BODY tag:
<!-- ... -->
<body>
<!-- ... -->
<button data-color-mode-switch>Toggle COLOR MODE 💡</button>
<!-- ... -->
</body>🎉 Result
<html data-color-mode="light|dark">
<!-- ... -->
</html>With SCSS
SCSS mixins registration in astro.config.mjs:
export default defineConfig({
// ...
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: `
@use "astro-color-mode/use-color-mode.scss" as *;
`,
},
},
},
},
});Then, use it like this in your stylesheets:
.my-layout {
:is(.my-link, body) {
@include color-mode(light) {
color: black;
background-color: white;
// ...
}
@include color-mode(dark) {
color: white;
background-color: black;
// ...
}
}
}
.some-class {
@include color-mode(light) {
color: blue;
background-color: yellow;
// ...
}
@include color-mode(dark) {
color: yellow;
background-color: blue;
// ...
}
}To do
- Fix no JS support (SCSS mixin…)
- Full JS independant
@mediaquery support for SCSS mixins - SCSS mixins demo usage
- Thorough demo video for all user scenarios
- With JS, system pref.
- With JS, persisted user pref.
- No JS, system pref.
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
0.7.1 (2023-01-05)
Bug Fixes
- color mode scoping for root html element (7fbbd48)
0.7.0 (2022-11-19)
Features
- support for scoped / global mixin (cd014d4)
Bug Fixes
- save state from os switch + optimize listener (372a75e)
0.6.0 (2022-10-17)
Features
Bug Fixes
- remove package prefix, simplify import method (73bd31b)
- remove unused dependency (0c0537e)
- temporary no js fallback defaults (3b889d1)
- wrap global script in scoped function (edf9be5)
0.11.6 (2022-09-22)
Note: Version bump only for package @julian_cataldo/astro-color-mode
0.11.5 (2022-08-20)
Note: Version bump only for package @julian_cataldo/astro-color-mode
0.11.4 (2022-08-06)
Bug Fixes
- temporary no js fallback defaults (3b889d1)
0.11.3 (2022-07-31)
Note: Version bump only for package @julian_cataldo/astro-color-mode
0.11.2 (2022-07-26)
Note: Version bump only for package @julian_cataldo/astro-color-mode
0.11.1 (2022-07-24)
Note: Version bump only for package @julian_cataldo/astro-color-mode
0.11.0 (2022-07-18)
Features
- generic color mode mixin (fb39fb0)
0.10.3 (2022-06-28)
Bug Fixes
- remove unused dependency (0c0537e)
0.10.2 (2022-06-26)
Bug Fixes
- wrap global script in scoped function (edf9be5)
0.10.1 (2022-06-26)
Note: Version bump only for package @julian_cataldo/astro-color-mode
0.10.0 (2022-06-25)
Features
- init color mode component (1a8fb81)
...