bundle into a UMD script via webpack for both browser & node

2025-09-11 08:28:47 -04:00 · 2021-08-04 11:31:37 -04:00
parent 0d48f8e8af
commit df3b462de0
9 changed files with 1311 additions and 55 deletions
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -0,0 +1,8 @@
+interface DarkModeOptions {
+  toggle?: HTMLElement;
+  classes?: { dark: string, light: string };
+  default?: string;
+  storageKey?: string;
+}
+
+export default function (options?: Partial<DarkModeOptions>): void;
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,93 @@
+const storageAvailable = require("storage-available");
+
+module.exports = function (options) {
+  // { toggle, classes: { light, dark }, default, storageKey }
+  options = options || {};
+
+  // use a specified element(s) to trigger swap when clicked
+  const toggle = options.toggle || null;
+
+  // check for preset `dark_mode_pref` preference in local storage
+  const storageKey = options.storageKey || "dark_mode_pref";
+  const storageEnabled = storageAvailable("localStorage");
+  // eslint-disable-next-line prettier/prettier
+  const pref = storageEnabled ? localStorage.getItem(storageKey) : null;
+
+  // change CSS via these <body> classes:
+  const dark = options.classes ? options.classes.dark : "dark";
+  const light = options.classes ? options.classes.light : "light";
+
+  // which class is <body> set to initially?
+  const defaultTheme = options.default || "light";
+
+  // keep track of current state no matter how we got there
+  let active = defaultTheme === dark;
+
+  // receives a class name and switches <body> to it
+  const activateTheme = function (theme, save = false) {
+    document.body.classList.remove(dark, light);
+    document.body.classList.add(theme);
+    active = theme === dark;
+
+    if (storageEnabled && save) {
+      localStorage.setItem(storageKey, theme);
+    }
+  };
+
+  // user has never clicked the button, so go by their OS preference until/if they do so
+  if (!pref) {
+    // returns media query selector syntax
+    const prefers = function (colorScheme) {
+      // https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
+      return `(prefers-color-scheme: ${colorScheme})`;
+    };
+
+    // check for OS dark/light mode preference and switch accordingly
+    // default to `defaultTheme` set above if unsupported
+    if (window.matchMedia(prefers("dark")).matches) {
+      activateTheme(dark);
+    } else if (window.matchMedia(prefers("light")).matches) {
+      activateTheme(light);
+    } else {
+      activateTheme(defaultTheme);
+    }
+
+    // real-time switching if supported by OS/browser
+    window
+      .matchMedia(prefers("dark"))
+      .addEventListener("change", function (e) {
+        if (e.matches) {
+          activateTheme(dark);
+        }
+      });
+    window
+      .matchMedia(prefers("light"))
+      .addEventListener("change", function (e) {
+        if (e.matches) {
+          activateTheme(light);
+        }
+      });
+  } else if (pref === dark || pref === light) {
+    // if user already explicitly toggled in the past, restore their preference
+    activateTheme(pref);
+  } else {
+    // fallback to default theme (this shouldn't happen)
+    activateTheme(defaultTheme);
+  }
+
+  // don't freak out if page happens not to have a toggle
+  if (toggle !== null) {
+    // toggle re-appears now that we know user has JS enabled
+    toggle.style.visibility = "visible";
+
+    // handle toggle click
+    toggle.addEventListener("click", function () {
+      // switch to the opposite theme & save preference in local storage
+      if (active) {
+        activateTheme(light, true);
+      } else {
+        activateTheme(dark, true);
+      }
+    });
+  }
+};