https://github.com/avinashjoshi/color-scheme-toggle
A simple javascript to toggle your website between [ 🖥 system theme | 🌙 dark mode | ☀️ light mode ]
https://github.com/avinashjoshi/color-scheme-toggle
dark-mode dark-mode-js dark-mode-switch dark-mode-switcher dark-mode-toggle darkmode darkmode-js
Last synced: 5 months ago
JSON representation
A simple javascript to toggle your website between [ 🖥 system theme | 🌙 dark mode | ☀️ light mode ]
- Host: GitHub
- URL: https://github.com/avinashjoshi/color-scheme-toggle
- Owner: avinashjoshi
- License: mit
- Created: 2020-07-11T17:14:23.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-07-12T14:40:41.000Z (almost 6 years ago)
- Last Synced: 2025-10-06T12:47:44.457Z (8 months ago)
- Topics: dark-mode, dark-mode-js, dark-mode-switch, dark-mode-switcher, dark-mode-toggle, darkmode, darkmode-js
- Language: CSS
- Homepage: https://a10i.me/color-scheme-toggle/
- Size: 3.91 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Color Scheme Toggle [ 🖥 | 🌙 | ☀️ ]
A simple javascript to toggle your website between [ 🖥 system theme | 🌙 dark mode | ☀️ light mode ]
- Defaults to system theme
- Your preference is saved to local storage
# Usage
1. Add your custom button for the toggle followed by the `color-scheme-toggle.js` script:
```html
```
*The script could even go before the closing body tag, but not before the button*
2. Follow `color-scheme-toggle.css` as an example (or the sample css provided below) and adapt in your stylesheet.
# Under the hood
The script adds `data-theme="dark"` to the `html` tag. You can use css like this:
```css
:root {
--body-bg: white;
--body-color: black;
}
:root[data-theme='dark'] {
--body-bg: black;
--body-color: white;
}
body {
background-color: var(--body-bg);
color: var(--body-color);
}
```
# Demo
Visit the [Demo page](https://avinashjoshi.github.io/color-scheme-toggle) to see this in action!
# Browser compatibility
- Toggling between light and dark should be supported by most modern browsers that support javascript
- The system theme compatibility can be seen here - https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#Browser_compatibility
# Sticky footer
I simply followed the [recipe laid out by Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers). This does not seem to work on Firefox.