plugins/CoreHome/javascripts/themes.js

/*!
 * Matomo - free/libre analytics platform
 *
 * @link    https://matomo.org
 * @license https://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
 */

(function () {
  /** @type {Function|null|undefined} */
  let autoListener = null;
  const mediaQuery = typeof window.matchMedia === 'function'
    ? window.matchMedia('(prefers-color-scheme: dark)')
    : null
  let currentPreferredThemeMode = document.documentElement.getAttribute('data-theme-mode') || 'light';

  /**
   * Resolves the saved theme mode to the effective active theme.
   *
   * @param {string} preferredThemeMode
   * @returns {string}
   */
  function resolveThemeMode(preferredThemeMode) {
    if (preferredThemeMode === 'dark') {
        return 'dark';
    }

    if (preferredThemeMode === 'auto') {
        return mediaQuery && mediaQuery.matches ? 'dark' : 'light';
    }

    return 'light';
  }

  /**
   * Removes the browser color scheme change listener when one is registered.
   *
   * @returns {void}
   */
  function removeAutoListener() {
    if (!mediaQuery || !autoListener) {
        return;
    }

    if (typeof mediaQuery.removeEventListener === 'function') {
      mediaQuery.removeEventListener('change', autoListener);
    }
  }

  /**
   * Adds a browser color scheme change listener for auto mode.
   *
   * @returns {void}
   */
  function addAutoListener() {
    removeAutoListener();

    if (!mediaQuery || currentPreferredThemeMode !== 'auto') {
        return;
    }

    autoListener = function () {
      emitThemeModeChange();
    };

    if (typeof mediaQuery.addEventListener === 'function') {
        mediaQuery.addEventListener('change', autoListener);
    }
  }

  /**
   * Emits the theme mode change event with the previous resolved theme.
   *
   * @returns {void}
   */
  function emitThemeModeChange() {
    if (typeof piwik.postEvent === 'function') {
      piwik.postEvent('themeModeChange');
      return;
    }

    window.dispatchEvent(new CustomEvent('themeModeChange'));
  }

  /**
   * Gets the resolved active theme mode.
   *
   * @returns {string}
   */
  piwik.getThemeMode = function () {
    return resolveThemeMode(currentPreferredThemeMode);
  };

  /**
   * Sets the saved theme mode on the page and refreshes the active theme.
   *
   * @param {string} preferredThemeMode
   * @returns {void}
   */
  piwik.setThemeMode = function (preferredThemeMode) {
    document.documentElement.setAttribute('data-theme-mode', preferredThemeMode);
    currentPreferredThemeMode = preferredThemeMode;
    addAutoListener()
    emitThemeModeChange();
  };
  addAutoListener();
}());