next-react-theme/dist/index.js

A flexible theme provider for Next.js and react applications

"use strict";"use client";var u=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var E=(t,e)=>{for(var s in e)u(t,s,{get:e[s],enumerable:!0})},L=(t,e,s,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of x(e))!C.call(t,o)&&o!==s&&u(t,o,{get:()=>e[o],enumerable:!(l=v(e,o))||l.enumerable});return t};var P=t=>L(u({},"__esModule",{value:!0}),t);var w={};E(w,{ThemeProvider:()=>p,useTheme:()=>g});module.exports=P(w);var r=require("react");var d=t=>localStorage.getItem(t)??"",a=(t,e)=>{localStorage.setItem(t,e)},f=["default","red","rose","orange","green","blue","yellow","violet"];var y=require("react/jsx-runtime"),h=(0,r.createContext)(void 0),p=({children:t,colorScheme:e=!1,colors:s=f,disableTransition:l})=>{let[o,c]=(0,r.useState)(null),[n,T]=(0,r.useState)(null);return(0,r.useLayoutEffect)(()=>{if(c(d("theme")||"system"),e&&T(d("color")||"default"),!l){let i="background-color 0.5s ease-in, color 0.5s ease-in";document.documentElement.style.transition=i,document.body.style.transition=i}},[e]),(0,r.useEffect)(()=>{if(!o)return;let i=window.matchMedia("(prefers-color-scheme: dark)"),m=()=>document.documentElement.classList.toggle("dark",o==="dark"||o==="system"&&i.matches);return m(),a("theme",o),o==="system"&&i.addEventListener("change",m),()=>i.removeEventListener("change",m)},[o]),(0,r.useEffect)(()=>{document.documentElement.setAttribute("data-color",n&&e?n:""),n&&a("color",n)},[n,e]),o===null||e&&n===null?null:(0,y.jsx)(h.Provider,{value:{theme:o,setTheme:c,color:n??"N/A",setColor:e?T:()=>{},colors:e?s:[]},children:t})},g=()=>{let t=(0,r.useContext)(h);if(!t)throw new Error("useTheme must be used within ThemeProvider");return t};0&&(module.exports={ThemeProvider,useTheme});