@wcj/dark-mode

dark-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.

Installation

Install from npm:

``bash
npm install --save @wcj/dark-mode
`

Or, alternatively, use a
`

Usage

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.

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.