Naysayers Promote Misery

    dark-mode-switcheroo
    TypeScript icon, indicating that this package has built-in type declarations

    0.10.0 • Public • Published

    🌓 Dark Mode Switcheroo™

    CI npm

    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
    • [x] Add callback function onChange (or onToggle etc.) passed in as an option

    License

    MIT

    Install

    npm i dark-mode-switcheroo

    DownloadsWeekly Downloads

    8

    Version

    0.10.0

    License

    MIT

    Unpacked Size

    23.5 kB

    Total Files

    12

    Last publish

    Collaborators

    • jakejarvis