dark-mode
A custom element that allows you to easily put a Dark Mode prefers-color-scheme, but also allow them to (optionally permanently) override their system setting for just your site.
Installation
Install from npm:
npm install --save @wcj/dark-mode
Or, alternatively, use a <script defer> tag (served from unpkg's CDN):
CDN: UNPKG | jsDelivr | Githack | Statically
<script src="https://unpkg.com/@wcj/dark-mode"></script>
Usage
There are two ways how you can use <dark-mode>:
<dark-mode></dark-mode>
<dark-mode light="Dark" dark="Light"></dark-mode>
<dark-mode dark="Dark" light="Light" style="border: 1px solid red; font-size: 12px;"></dark-mode>
Use in React:
import React from 'react';
import '@wcj/dark-mode';
function Demo() {
return (
<div>
<dark-mode permanent light="Light" dark="Dark"></dark-mode>
</div>
);
}
Toggle in JavaScript:
const toggle = document.querySelector('dark-mode');
const button = document.createElement('button');
button.textContent = 'Change Theme';
button.onclick = () => {
const theme = document.documentElement.dataset.colorMode;
// or => const theme = toggle.mode
document.documentElement.setAttribute('data-color-mode', theme === 'light' ? 'dark' : 'light');
}
document.body.appendChild(button);
// Listen for toggle changes
// and toggle the `dark` class accordingly.
document.addEventListener('colorschemechange', (e) => {
console.log(`Color scheme changed to "${e.detail.colorScheme}" or "${toggle.mode}".`);
button.textContent = toggle.mode === 'dark' ? 'Change Theme ๐' : 'Change Theme ๐';
});
Interacting with the custom element:
const darkMode = document.querySelector('dark-mode');
// Set the mode to dark
darkMode.mode = 'dark';
// Set the mode to light
darkMode.mode = 'light';
// Set the mode to dark
document.documentElement.setAttribute('data-color-mode', 'dark');
// Set the mode to light
document.documentElement.setAttribute('data-color-mode', 'light');
// Set the light label to "off"
darkMode.light = 'off';
// Set the dark label to "on"
darkMode.dark = 'on';
// Set a "remember the last selected mode" label
darkMode.permanent = true;
// Remember the user's last color scheme choice
darkModeToggle.setAttribute('permanent', false);
// Forget the user's last color scheme choice
darkModeToggle.removeAttribute('permanent');
Reacting on color scheme changes:
/* On the page */
document.addEventListener('colorschemechange', (e) => {
console.log(`Color scheme changed to ${e.detail.colorScheme}.`);
});
Reacting on "remember the last selected mode" functionality changes:
/* On the page */
document.addEventListener('permanentcolorscheme', (e) => {
console.log(`${e.detail.permanent ? 'R' : 'Not r'}emembering the last selected mode.`);
});
Properties
Properties can be set directly on the custom element at creation time, or dynamically via JavaScript.
export type ColorScheme = 'light' | 'dark';
export class DarkMode extends HTMLElement {
mode?: ColorScheme;
/**
* Defaults to not remember the last choice.
* If present remembers the last selected mode (`dark` or `light`),
* which allows the user to permanently override their usual preferred color scheme.
*/
permanent?: boolean;
/**
* Any string value that represents the label for the "dark" mode.
*/
dark?: string;
/**
* Any string value that represents the label for the "light" mode.
*/
light?: string;
style?: React.CSSProperties;
}
Events
colorschemechange: Fired when the color scheme gets changed.permanentcolorscheme: Fired when the color scheme should be permanently remembered or not.
Alternatives
- dark-mode-toggle
A custom element that allows you to easily put a Dark Mode
๐ toggle or switch on your site - Darkmode.js
Add a dark-mode / night-mode to your website in a few seconds
- darken
Dark mode made easy
- use-dark-mode
A custom React Hook to help you implement a "dark mode" component.
- Dark Mode Switch
Add a dark-mode theme toggle with a Bootstrap Custom Switch
Contributors
As always, thanks to our amazing contributors!
Made with github-action-contributors.
License
Licensed under the MIT License.
5 Nov 18, 2022
5 Oct 28, 2022
4 Nov 29, 2022
4 Dec 2, 2022
5 Apr 17, 2022
11 Dec 4, 2022
21 Dec 11, 2022
13 Dec 1, 2022
42 Sep 30, 2022
17 Dec 2, 2022
2 Feb 7, 2022
64 Dec 22, 2022
18 Dec 31, 2022
11 Dec 30, 2022
17 Jan 2, 2023
41 Nov 27, 2022
2 Jun 21, 2022
331 Jan 4, 2023
4 Nov 23, 2022