Web Component that toggles dark mode 🌒
npm install @wcj/dark-modedark-mode
===






A custom element that allows you to easily put a Dark Mode 🌒 toggle. so you can initially adhere to your users' preferences according to prefers-color-scheme, but also allow them to (optionally permanently) override their system setting for just your site.
Install from npm:
``bash`
npm install --save @wcj/dark-mode
Or, alternatively, use a
`
There are two ways how you can use :
`html`
Use in React:
`jsx
import React from 'react';
import '@wcj/dark-mode';
function Demo() {
return (
Toggle in JavaScript:
`js
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:
`js
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:
`js
/ 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:
`js
/ On the page /
document.addEventListener('permanentcolorscheme', (e) => {
console.log(${e.detail.permanent ? 'R' : 'Not r'}emembering the last selected mode.);
});
`Hide Text and Icons
You can use the following CSS selectors to hide the text and icon parts of the
dark-mode component:`css
dark-mode::part(text) {
display: none;
}
dark-mode::part(icon) {
display: none;
}
`Properties
Properties can be set directly on the custom element at creation time, or dynamically via JavaScript.
`typescript
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.- 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
As always, thanks to our amazing contributors!
Made with github-action-contributors.
Licensed under the MIT License.