jake/dark-mode
1
Fork 0
mirror of https://github.com/jakejarvis/dark-mode.git synced 2025-04-25 06:05:23 -04:00
Code Issues Releases Activity
dark-mode/README.md

2.8 KiB
Raw Blame History

🌓 Dark Mode Switcheroo™

CI npm (scoped) MIT License

Very simple CSS dark/light mode toggler with saved preference via local storage & dynamic OS setting detection. Zero dependencies and only ~600 bytes gzipped!

Usage

Options

darkMode.init([...options])

  • toggle: The clickable HTML element used to toggle between the two themes. (optional, default: null)
  • classes: An object containing the <body> class names for the light and dark themes. (optional, default: { light: "light", dark: "dark" })
  • default: The initial <body> class hard-coded into the HTML template. (optional, default: "light")
  • storageKey: Name of the localStorage key holding the user's preference. (optional, default: "dark_mode_pref")
  • onInit(toggle?) Callback function executed at the end of initialization. The toggle above is passed in if set. (optional, default: null)
  • onChange(theme?, toggle?) Callback function executed when theme is switched. The new theme and the toggle above (if set) are passed in. (optional, default: null)

Browser

<button class="dark-mode-toggle">💡 Click to see the light... or not.</button>

<script src="https://unpkg.com/@jakejarvis/dark-mode/dist/dark-mode.min.js"></script>
<script>
  window.darkMode.init({
    toggle: document.querySelector(".dark-mode-toggle"),
    classes: {
      light: "light",
      dark: "dark",
    },
    default: "light",
    storageKey: "dark_mode_pref",
  });
</script>

Node

npm install @jakejarvis/dark-mode
# or...
yarn add @jakejarvis/dark-mode

Module via import

import { init } from "@jakejarvis/dark-mode";

init({
  toggle: document.querySelector(".dark-mode-toggle"),
  classes: {
    light: "light",
    dark: "dark",
  },
  default: "light",
  storageKey: "dark_mode_pref",
});

CommonJS via require()

const darkMode = require("@jakejarvis/dark-mode");

darkMode.init({
  toggle: document.querySelector(".dark-mode-toggle"),
  classes: {
    light: "light",
    dark: "dark",
  },
  default: "light",
  storageKey: "dark_mode_pref",
});

To-Do

  • Support more than two themes
  • Better readme docs
  • Add callback function onChange (or onToggle etc.) passed in as an option

License

MIT