@meonode/ui/dist/esm/hook/useTheme.js

A structured approach to component composition, direct CSS-first prop styling, built-in theming, smart prop handling (including raw property pass-through), and dynamic children.

"use client";
import{useContext as e,useEffect as t}from"react";import{ThemeContext as m}from"../components/theme-provider.client.js";const o=()=>{const o=e(m);if(!o)throw new Error("useTheme must be used within a ThemeProvider");const{theme:s}=o;return t(()=>{const e=globalThis.localStorage;if(e&&"function"==typeof e.getItem&&"function"==typeof e.setItem){const t=e.getItem("theme");t&&t===s.mode||e.setItem("theme",s.mode)}const t=document.documentElement;"dark"===s.mode?(t.setAttribute("data-theme","dark"),t.classList.add("dark-theme"),t.classList.remove("light-theme")):(t.setAttribute("data-theme","light"),t.classList.add("light-theme"),t.classList.remove("dark-theme"))},[s.mode,s.system]),o};export{o as useTheme};