🌓 Super simple CSS theme switching with saved preferences and automatic OS setting detection https://www.npmjs.com/package/dark-mode-switcheroo
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
Jake Jarvis c62cde5e91
fixes for eslint 8.0.0
2 weeks ago
.github Rename package from @jakejarvis/dark-mode to dark-mode-switcheroo 2 months ago
example Rename package from @jakejarvis/dark-mode to dark-mode-switcheroo 2 months ago
src bring bundle config up-to-date with rollup template 3 weeks ago
.editorconfig bring bundle config up-to-date with rollup template 3 weeks ago
.eslintrc.json fixes for eslint 8.0.0 2 weeks ago
.gitattributes bring bundle config up-to-date with rollup template 3 weeks ago
.gitignore bundle into a UMD script via webpack for both browser & node 3 months ago
LICENSE initial commit 🎉 3 months ago
README.md add onUserToggle callback, move onInit and onChange up 3 weeks ago
package.json fixes for eslint 8.0.0 2 weeks ago
rollup.config.js bring bundle config up-to-date with rollup template 3 weeks ago
yarn.lock fixes for eslint 8.0.0 2 weeks ago

README.md

🌓 Dark Mode Switcheroo™

CI npm MIT License

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

Usage

Options

darkMode.init([...options])

  • toggle: The clickable HTMLElement 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)
  • onUserToggle([toggle]): Callback function executed when a user manually interacts with the toggle button. The toggle above (if set) is passed in. (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" style="visibility: hidden;">💡 Click to see the light... or not.</button>

<script src="https://unpkg.com/dark-mode-switcheroo/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",
    onInit: function (toggle) {
      toggle.style.visibility = "visible"; // toggle appears now that we know JS is enabled
    },
    onChange: function (theme, toggle) {
      console.log("Theme is now " + theme);
    },
  });
</script>

Node

npm install dark-mode-switcheroo
# or...
yarn add dark-mode-switcheroo

Module via import

import { init } from "dark-mode-switcheroo";

init({
  // ...same as browser.
});

CommonJS via require()

const darkMode = require("dark-mode-switcheroo");

darkMode.init({
  // ...same as browser.
});

To-Do

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

License

MIT