xtreme-ui/dist/utils/helper/themeController.js

Collection of reusable components that can be used in web projects

import { defaultScheme as a } from "../../components/context/Theme/types.js";
import { defaultColorPreset as h, STORAGE as e } from "../constants/theme.js";
const S = ({
  scheme: t,
  color: o,
  defScheme: r = a,
  defColor: m = h
} = {}) => {
  const l = t != null ? `'${t}'` : "null", n = o ? JSON.stringify(o) : "null", c = JSON.stringify(m);
  return `(function() {
		try {
			let storedScheme = localStorage.getItem('${e.themeScheme}');
			const themeScheme = ${l} ?? storedScheme ?? '${r}';

			const themeColorRaw = localStorage.getItem('${e.themeColor}');
			let { h, s, l } = ${c};

			const preferredColor = ${n};

			if (preferredColor) {
				({ h, s, l } = preferredColor);
			} else {
				try {
					const parsed = JSON.parse(themeColorRaw);
					if (parsed && typeof parsed.h === 'number' && typeof parsed.s === 'number' && typeof parsed.l === 'number') {
						({ h, s, l } = parsed);
					}
				} catch {}
			}

			document.documentElement.setAttribute('${e.themeSchemeAttr}', themeScheme);

			const style = document.getElementById('${e.themeColor}') || 
				document.head.appendChild(Object.assign(document.createElement('style'), { id: '${e.themeColor}' }));
			style.textContent = \`:root{ --H: \${h}; --S: \${s}%; --L: \${l}% }\`;

			let meta = document.head.querySelector('meta[name="theme-color"]');
			if (!meta) {
				meta = document.createElement('meta');
				meta.name = 'theme-color';
				document.head.appendChild(meta);
			}
			meta.content = \`hsl(\${h},\${s}%,\${l}%)\`;

			localStorage.setItem('${e.themeScheme}', themeScheme);
			localStorage.setItem('${e.themeColor}', JSON.stringify({ h, s, l }));
		} catch {}
	})();`;
};
export {
  S as themeController
};