Simple dark mode switch with callback and local storage capability

night.js

/**
 * @param {object} night Configure night mode controls and targets.
 * @param {string} night.mount Mount theme class to single given DOM element.
 * @param {string} night.targets Match control targets using `querySelectorAll()`.
 * @param {string} [night.theme] Set optional theme name to be mounted. Default: night.
 * @param {function} [night.callback] Optional callback triggered on target interaction.
 * @return {object} Current theme state and targeted DOM elements.
 */

const night = ({ mount, targets, theme = "night", callback }) => {
  const _data = { mount, targets };
  const _mount = document.querySelector(mount);
  const _targets = document.querySelectorAll(targets);

  if (localStorage.theme == theme) {
    _mount.classList.add(theme);
    callback({ ..._data, theme: localStorage.theme });
  }

  _targets.forEach((item) => {
    item.onclick = () => {
      _mount.classList.toggle(theme);
      localStorage.theme = localStorage.theme == theme ? "default" : theme;

      callback({ ..._data, theme: localStorage.theme });

      return { ..._data, theme: localStorage.theme };
    };
  });
};

export { night };