react18-themes/client/index.js

Unleash the Power of React Server Components! Use multiple themes on your site with confidence, without losing any advantages of React Server Components.

"use strict";var M=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var B=Object.prototype.hasOwnProperty;var W=(t,e)=>{for(var o in e)M(t,o,{get:e[o],enumerable:!0})},X=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let h of j(e))!B.call(t,h)&&h!==o&&M(t,h,{get:()=>e[h],enumerable:!(n=Q(e,h))||n.enumerable});return t};var Z=t=>X(M({},"__esModule",{value:!0}),t);var ne={};W(ne,{ColorSwitch:()=>ee,ForceColorScheme:()=>te,ForceTheme:()=>oe,ThemeSwitcher:()=>ce});module.exports=Z(ne);var J={"color-switch":"react18-themes--color-switch",swing:"react18-themes--swing"};var N=require("react");var O=require("r18gs");var R="rth",y="light",v="dark",P="system";var U={t:"",d:v,l:y,c:P,s:y},D=t=>{let e=t!=null?t:`#${R}`;return(0,O.useRGS)(e,()=>{let o=typeof m!="undefined"&&localStorage.getItem(e);return o?{...JSON.parse(o),s:m.matches?v:y}:U})},w=t=>{let e=`${t!=null?t:`#${R}`}-`;return(0,O.useRGS)(e,{})};var I=[P,v,y],$,V=t=>{let[e,o]=D(t),[n,h]=w(t);(0,N.useEffect)(()=>{$=window.r},[]);let a=c=>s=>o(i=>({...i,[c]:s})),p={theme:e.t,darkTheme:e.d,lightTheme:e.l,colorSchemePref:e.c,systemColorScheme:e.s,resolvedColorScheme:e.c===P||e.c===""?e.s:e.c,resolvedTheme:e.t,setTheme:a("t"),setDarkTheme:a("d"),setLightTheme:a("l"),setThemeSet:({darkTheme:c,lightTheme:s})=>o(i=>({...i,d:c,l:s})),setColorSchemePref:a("c"),toggleColorScheme(c){let s=I.indexOf(e.c),i=I.length;(s===-1||c&&s===i-1)&&(s=0),a("c")(I[(s+1)%i])},setForcedColorScheme:c=>h(s=>({...s,fc:c})),setForcedTheme:c=>h(s=>({...s,f:c}))};if($){let c=$(e);p.resolvedColorScheme=c[0],p.resolvedTheme=c[1]}return p};var Y=require("react/jsx-runtime"),ee=({size:t=25,skipSystem:e,targetSelector:o,className:n,...h})=>{let{toggleColorScheme:a}=V(o),p=[J["color-switch"],n].join(" ");return(0,Y.jsx)("button",{className:p,onClick:()=>a(e),style:{"--size":`${t}px`},...h})};var te=t=>{let[e,o]=w();return(0,N.useEffect)(()=>(o(n=>({...n,fc:t.colorScheme})),()=>{o(n=>({...n,fc:void 0}))}),[t.colorScheme]),null};var oe=t=>{let[e,o]=w();return(0,N.useEffect)(()=>(o(n=>({...n,f:t.theme})),()=>{o(n=>({...n,f:void 0}))}),[t.theme]),null};var z=(t,e,o,n,h)=>{window.m=matchMedia("(prefers-color-scheme: dark)");let a=["color-scheme","csp","theme","th"];window.u=l=>{var b;let T=(b=document.querySelector(t))!=null?b:document.documentElement,S=[];a.forEach((C,k)=>{S.push(`${C}-${l[k]}`),T.setAttribute(`data-${C}`,l[k])}),S[0]=l[0],o&&(S=S.map(C=>{var k;return(k=o[C])!=null?k:C})),T.className=S.join(" ")};let p=localStorage.getItem(t),c={...p?JSON.parse(p):e,s:m.matches?e.d:e.l},s,i,d,x;window.f=(l,T)=>{i=x=l,s=d=T},window.g=(l,T)=>{i=x!=null?x:l,s=d!=null?d:T},f(n,h),window.r=l=>{let T=s!=null?s:l.c,S=T===e.c?l.s:T,b=S===""?l.t:S===e.d?l.d:l.l,C=i!=null?i:b;return[S||l.s,T,C,i!=null?i:l.t]},u(r(c))};var A,L,E,K,q,re=(0,N.memo)(({k:t,n:e="",s:o,t:n,c:h})=>(typeof m!="undefined"&&([A,L,E,K,q]=[m,u,r,f,g]),(0,Y.jsx)("script",{suppressHydrationWarning:!0,dangerouslySetInnerHTML:{__html:`(${z.toString()})(${JSON.stringify([t,U,o,n,h]).slice(1,-1)})`},nonce:e})),()=>!0),se=(t="none")=>{let e=document.createElement("style");return e.textContent=`transition: ${t.split(";")[0]} !important;`,document.head.appendChild(e),()=>{getComputedStyle(document.body),setTimeout(()=>document.head.removeChild(e),1)}},ce=({forcedTheme:t,forcedColorScheme:e,targetSelector:o,themeTransition:n,styles:h,nonce:a})=>{let p=o||`#${R}`;typeof window!="undefined"&&!window.m&&z(p,U,h,t,e);let[c,s]=D(o),[i]=w(o);return(0,N.useEffect)(()=>{A.addEventListener("change",()=>s(d=>({...d,s:A.matches?v:y}))),addEventListener("storage",d=>{d.key===p&&s(x=>({...x,...JSON.parse(d.newValue||"{}")}))})},[]),(0,N.useEffect)(()=>{let d=se(n);L(E(c)),d(),localStorage.setItem(p,JSON.stringify(c))},[c]),(0,N.useEffect)(()=>{K(t,e),L(E(c))},[e,t]),(0,N.useEffect)(()=>{q(i.f,i.fc),L(E(c))},[i]),(0,Y.jsx)(re,{k:p,n:a,s:h,t,c:e})};0&&(module.exports={ColorSwitch,ForceColorScheme,ForceTheme,ThemeSwitcher});