xtreme-ui
Version:
Collection of reusable components that can be used in web projects
2 lines (1 loc) • 1.86 kB
JavaScript
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("react/jsx-runtime"),m=require("react"),r=require("../../../utils/constants/theme.cjs");require("color-namer");const s={isDarkTheme:void 0,themeScheme:void 0,setThemeScheme:()=>null,themeColor:void 0,setThemeColor:()=>null},d=m.createContext(s),E=({children:i})=>{const[o,a]=m.useState(s.themeScheme),[c,h]=m.useState(s.themeColor),S=()=>matchMedia("(prefers-color-scheme: dark)").matches,[f,l]=m.useState(o==="auto"?S():o==="dark");return m.useEffect(()=>{let e=localStorage.getItem(r.STORAGE.themeScheme),t;try{t=JSON.parse(localStorage.getItem(r.STORAGE.themeColor)||"null")||r.defaultColorPreset}catch{t=r.defaultColorPreset}e||(e=(document==null?void 0:document.documentElement.getAttribute(r.STORAGE.themeSchemeAttr))??void 0),e&&a(e),t&&h(t)},[]),m.useEffect(()=>{if(!o||!c)return;const{h:e,s:t,l:u}=c;document.documentElement.setAttribute(r.STORAGE.themeSchemeAttr,o);const T=document.getElementById(r.STORAGE.themeColor)||document.head.appendChild(Object.assign(document.createElement("style"),{id:r.STORAGE.themeColor}));T.textContent=`:root{ --H: ${e}; --S: ${t}%; --L: ${u}% }`;let n=document.querySelector('meta[name="theme-color"]');n||(n=document.createElement("meta"),n.name="theme-color",document.head.appendChild(n)),n.content=`hsl(${e},${t}%,${u}%)`,localStorage.setItem(r.STORAGE.themeScheme,o),localStorage.setItem(r.STORAGE.themeColor,JSON.stringify(c))},[o,c]),m.useEffect(()=>{if(o!=="auto")return l(o==="dark");const e=matchMedia("(prefers-color-scheme: dark)"),t=()=>l(e.matches);return t(),e.addEventListener("change",t),()=>e.removeEventListener("change",t)},[o]),C.jsx(d.Provider,{value:{isDarkTheme:f,themeScheme:o,setThemeScheme:a,themeColor:c,setThemeColor:h},children:i})};exports.ThemeContext=d;exports.ThemeProvider=E;