dark-mode

npm install --save @wcj/dark-mode

<script src="https://unpkg.com/@wcj/dark-mode"></script>

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

import React from 'react';
import '@wcj/dark-mode';

function Demo() {
  return (
    <div>
      <dark-mode permanent light="Light" dark="Dark"></dark-mode>
    </div>
  );
}

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 🌒';
});

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');

/* On the page */
document.addEventListener('colorschemechange', (e) => {
  console.log(`Color scheme changed to ${e.detail.colorScheme}.`);
});

/* On the page */
document.addEventListener('permanentcolorscheme', (e) => {
  console.log(`${e.detail.permanent ? 'R' : 'Not r'}emembering the last selected mode.`);
});

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;
}