@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
32 lines (31 loc) • 1.41 kB
JavaScript
/*!
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
* v1.5.0-next.4
*/
import { autoMode, darkMode } from "./resources";
/**
* Emits when the mode is dynamically toggled between light and dark on <body> or in OS preferences.
*/
export function initModeChangeEvent() {
const { classList } = document.body;
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
const getMode = () => classList.contains(darkMode) || (classList.contains(autoMode) && prefersDark) ? "dark" : "light";
const emitModeChange = (mode) => document.body.dispatchEvent(new CustomEvent("calciteModeChange", { bubbles: true, detail: { mode } }));
const modeChangeHandler = (newMode) => {
currentMode !== newMode && emitModeChange(newMode);
currentMode = newMode;
};
let currentMode = getMode();
// emits event on page load
emitModeChange(currentMode);
// emits event when changing OS mode preferences
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", (event) => modeChangeHandler(event.matches ? "dark" : "light"));
// emits event when toggling between mode classes on <body>
new MutationObserver(() => modeChangeHandler(getMode())).observe(document.body, {
attributes: true,
attributeFilter: ["class"]
});
}