@primer/react-brand/esm/ThemeProvider/ThemeProvider.js

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import { createContext as e, useEffect as t, useMemo as n, useState as r } from "react";
import { jsx as i } from "react/jsx-runtime";
//#region src/ThemeProvider/ThemeProvider.tsx
var a = /* @__PURE__ */ function(e) {
	return e.LIGHT = "light", e.DARK = "dark", e.AUTO = "auto", e;
}({}), o = a.LIGHT, s = e({
	colorMode: o,
	availableColorModes: Object.values(a)
});
function c({ colorMode: e = o, children: c, ...l }) {
	let [f, p] = r(e), m = n(() => Object.values(a), []);
	return t(() => (e === a.AUTO ? p(u()) : f !== e && p(e), d(p)), [
		e,
		f,
		p
	]), /* @__PURE__ */ i(s.Provider, {
		value: {
			colorMode: f,
			availableColorModes: m
		},
		children: /* @__PURE__ */ i("div", {
			"data-color-mode": f,
			...l,
			children: c
		})
	});
}
var l = () => window.matchMedia(`(prefers-color-scheme: ${a.DARK})`), u = () => l().matches ? a.DARK : a.LIGHT, d = (e) => {
	let t = l(), n = (t) => e(t.matches ? a.DARK : a.LIGHT);
	return t.addEventListener("change", n), () => t.removeEventListener("change", n);
};
//#endregion
export { a as ColorModesEnum, s as ThemeContext, c as ThemeProvider };

//# sourceMappingURL=ThemeProvider.js.map