{"_id":"@alexsantosquispe/use-theme-hook","_rev":"4-1f6cb5c7a44cfc46c71f1e1278195410","name":"@alexsantosquispe/use-theme-hook","dist-tags":{"beta":"1.0.1-beta.1","latest":"1.0.3"},"versions":{"1.0.1-beta.1":{"name":"@alexsantosquispe/use-theme-hook","version":"1.0.1-beta.1","keywords":["react","hook","theme","typescript","tailwindcss"],"author":{"name":"Alex Santos","email":"alexsantosquispe@gmail.com"},"license":"MIT","_id":"@alexsantosquispe/use-theme-hook@1.0.1-beta.1","maintainers":[{"name":"alexsantosquispe","email":"alexsantosquispe@gmail.com"}],"homepage":"https://github.com/alexsantosquispe/use-theme-hook#readme","bugs":{"url":"https://github.com/alexsantosquispe/use-theme-hook/issues"},"dist":{"shasum":"f8072a8dec2cbd8d6ea314122910f8ac3e89c0ea","tarball":"https://registry.npmjs.org/@alexsantosquispe/use-theme-hook/-/use-theme-hook-1.0.1-beta.1.tgz","fileCount":26,"integrity":"sha512-WWRW79ch1XXM7TblSLGp0kTKJSMdkCzLM4EFRkpFcqOoYcNf5IkqfKpnU1pPtun4EGvsT0w8gu9hhcOWzLptGA==","signatures":[{"sig":"MEUCIQCzLsNbn2hsJVYmppEUhjE64owpTKb4K8jx0fgkQ/tr2gIgR3JD94fkTbDlCfsuiA1tIhSFW4wpDgcOtZRYKLsX3FI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30650},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"17bff0a4ec4b7aea99eeac94dc9f5f2068f575a8","scripts":{"lint":"eslint . --max-warnings 0","test":"jest","build":"rollup -c","prepare":"husky","lint:fix":"eslint . --fix","format:fix":"prettier --write \"src/**/*.{ts,tsx,json,md}\"","test:watch":"jest --watch","type-check":"tsc --noEmit","lint-staged":"lint-staged","format:check":"prettier --check \"src/**/*.{ts,tsx,json,md}\"","test:coverage":"jest --coverage","prepublishOnly":"pnpm run type-check && pnpm run lint && pnpm run test && pnpm run build"},"_npmUser":{"name":"alexsantosquispe","email":"alexsantosquispe@gmail.com"},"repository":{"url":"git+https://github.com/alexsantosquispe/use-theme-hook.git","type":"git"},"_npmVersion":"10.9.2","description":"A React hook for managing themes","directories":{},"lint-staged":{"*.{ts,tsx}":["eslint . --ext .js,.jsx,.ts,.tsx","prettier --check ."],"*.{json,md,yml,yaml,css,html}":["prettier --check ."]},"_nodeVersion":"22.15.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"packageManager":"pnpm@10.12.4","devDependencies":{"jest":"29.7.0","husky":"9.1.7","tslib":"2.8.1","eslint":"9.39.1","rollup":"4.53.3","ts-jest":"29.2.5","prettier":"3.7.4","@eslint/js":"9.39.1","typescript":"5.9.3","@types/jest":"29.5.14","lint-staged":"16.2.7","@types/react":"19.2.7","@types/react-dom":"19.2.3","typescript-eslint":"8.48.1","eslint-plugin-react":"7.37.5","@testing-library/react":"16.1.0","eslint-config-prettier":"10.1.8","jest-environment-jsdom":"29.7.0","@rollup/plugin-typescript":"12.3.0","@testing-library/jest-dom":"6.6.3","@typescript-eslint/parser":"8.48.1","eslint-plugin-react-hooks":"7.0.1","@typescript-eslint/eslint-plugin":"8.48.1"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/use-theme-hook_1.0.1-beta.1_1766963291057_0.04877043520301805","host":"s3://npm-registry-packages-npm-production"}},"1.0.1-beta.2":{"name":"@alexsantosquispe/use-theme-hook","version":"1.0.1-beta.2","keywords":["react","hook","theme","typescript","tailwindcss"],"author":{"name":"Alex Santos","email":"alexsantosquispe@gmail.com"},"license":"MIT","_id":"@alexsantosquispe/use-theme-hook@1.0.1-beta.2","maintainers":[{"name":"alexsantosquispe","email":"alexsantosquispe@gmail.com"}],"homepage":"https://github.com/alexsantosquispe/use-theme-hook#readme","bugs":{"url":"https://github.com/alexsantosquispe/use-theme-hook/issues"},"dist":{"shasum":"d137c7cd1dcf07a6b7581bd862f90d1a184f3023","tarball":"https://registry.npmjs.org/@alexsantosquispe/use-theme-hook/-/use-theme-hook-1.0.1-beta.2.tgz","fileCount":26,"integrity":"sha512-FD7mHejMuirGnUjDAgGoQQL+v7fp/MdkkcUmEzd6ikIBYHtsVqIfVJ2OxwzK8YYTU/F2JbPsRhk7WWdEvKFH7Q==","signatures":[{"sig":"MEYCIQDD73TsKPXvVBGDFzqQ1ltq3tToIUtm5i6cmp/zh9FgYgIhAL/rl1d3lfvVsZI/48617AcuOFDny+PFrFHiBkVgrrsr","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30441},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"2709ce526a2f68b49ea9a7cb0decb96c05e2541d","scripts":{"lint":"eslint . --max-warnings 0","test":"jest","build":"rollup -c","prepare":"husky","lint:fix":"eslint . --fix","format:fix":"prettier --write \"src/**/*.{ts,tsx,json,md}\"","test:watch":"jest --watch","type-check":"tsc --noEmit","lint-staged":"lint-staged","format:check":"prettier --check \"src/**/*.{ts,tsx,json,md}\"","test:coverage":"jest --coverage","prepublishOnly":"pnpm run type-check && pnpm run lint && pnpm run test && pnpm run build"},"_npmUser":{"name":"alexsantosquispe","email":"alexsantosquispe@gmail.com"},"repository":{"url":"git+https://github.com/alexsantosquispe/use-theme-hook.git","type":"git"},"_npmVersion":"10.9.2","description":"A React hook for managing themes","directories":{},"lint-staged":{"*.{ts,tsx}":["eslint . --ext .js,.jsx,.ts,.tsx","prettier --check ."],"*.{json,md,yml,yaml,css,html}":["prettier --check ."]},"_nodeVersion":"22.15.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"packageManager":"pnpm@10.12.4","devDependencies":{"jest":"29.7.0","husky":"9.1.7","tslib":"2.8.1","eslint":"9.39.1","rollup":"4.53.3","ts-jest":"29.2.5","prettier":"3.7.4","@eslint/js":"9.39.1","typescript":"5.9.3","@types/jest":"29.5.14","lint-staged":"16.2.7","@types/react":"19.2.7","@types/react-dom":"19.2.3","typescript-eslint":"8.48.1","eslint-plugin-react":"7.37.5","@testing-library/react":"16.1.0","eslint-config-prettier":"10.1.8","jest-environment-jsdom":"29.7.0","@rollup/plugin-typescript":"12.3.0","@testing-library/jest-dom":"6.6.3","@typescript-eslint/parser":"8.48.1","eslint-plugin-react-hooks":"7.0.1","@typescript-eslint/eslint-plugin":"8.48.1"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/use-theme-hook_1.0.1-beta.2_1767147097064_0.6724707403824892","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@alexsantosquispe/use-theme-hook","version":"1.0.1","keywords":["react","hook","theme","typescript","tailwindcss"],"author":{"name":"Alex Santos","email":"alexsantosquispe@gmail.com"},"license":"MIT","_id":"@alexsantosquispe/use-theme-hook@1.0.1","maintainers":[{"name":"alexsantosquispe","email":"alexsantosquispe@gmail.com"}],"homepage":"https://github.com/alexsantosquispe/use-theme-hook#readme","bugs":{"url":"https://github.com/alexsantosquispe/use-theme-hook/issues"},"dist":{"shasum":"a4a0c859baff229e720662ed3976e21f7734f737","tarball":"https://registry.npmjs.org/@alexsantosquispe/use-theme-hook/-/use-theme-hook-1.0.1.tgz","fileCount":26,"integrity":"sha512-Lxxiu69AlgVmnxBnm3lAClvR9PwMLhfUfwGKOQoC68Te512DYR4IZEE6Wallkye50YrPZGdRhaEx1WZkAH8E4w==","signatures":[{"sig":"MEUCIHOU0Z9ZgIDGhPYNo5DzEnL+bzr5z8NqN1mdN3xnHNDFAiEAkkIMx+YonOy9+SikqvWGGb8DVayqrc82Eb4UpMeh6rI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30480},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"5849d634031e93a2e19bf7d880067c8a6755d529","scripts":{"lint":"eslint . --max-warnings 0","test":"jest","build":"rollup -c","prepare":"husky","publish":"npm publish --access public","lint:fix":"eslint . --fix","format:fix":"prettier --write \"src/**/*.{ts,tsx,json,md}\"","test:watch":"jest --watch","type-check":"tsc --noEmit","lint-staged":"lint-staged","format:check":"prettier --check \"src/**/*.{ts,tsx,json,md}\"","test:coverage":"jest --coverage","prepublishOnly":"pnpm run type-check && pnpm run lint && pnpm run test && pnpm run build"},"_npmUser":{"name":"alexsantosquispe","email":"alexsantosquispe@gmail.com"},"repository":{"url":"git+https://github.com/alexsantosquispe/use-theme-hook.git","type":"git"},"_npmVersion":"10.9.2","description":"A React hook for managing themes","directories":{},"lint-staged":{"*.{ts,tsx}":["eslint . --ext .js,.jsx,.ts,.tsx","prettier --check ."],"*.{json,md,yml,yaml,css,html}":["prettier --check ."]},"_nodeVersion":"22.15.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"packageManager":"pnpm@10.12.4","devDependencies":{"jest":"29.7.0","husky":"9.1.7","tslib":"2.8.1","eslint":"9.39.1","rollup":"4.53.3","ts-jest":"29.2.5","prettier":"3.7.4","@eslint/js":"9.39.1","typescript":"5.9.3","@types/jest":"29.5.14","lint-staged":"16.2.7","@types/react":"19.2.7","@types/react-dom":"19.2.3","typescript-eslint":"8.48.1","eslint-plugin-react":"7.37.5","@testing-library/react":"16.1.0","eslint-config-prettier":"10.1.8","jest-environment-jsdom":"29.7.0","@rollup/plugin-typescript":"12.3.0","@testing-library/jest-dom":"6.6.3","@typescript-eslint/parser":"8.48.1","eslint-plugin-react-hooks":"7.0.1","@typescript-eslint/eslint-plugin":"8.48.1"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/use-theme-hook_1.0.1_1767150311224_0.5267456851560508","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@alexsantosquispe/use-theme-hook","version":"1.0.3","description":"A React hook for managing themes","type":"module","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.cjs","import":"./dist/index.js","types":"./dist/index.d.ts"}},"scripts":{"build":"rollup -c","prepare":"husky","prepublishOnly":"pnpm run type-check && pnpm run lint && pnpm run test && pnpm run build","publish":"npm publish --access public","lint":"eslint . --max-warnings 0","lint:fix":"eslint . --fix","format:check":"prettier --check \"src/**/*.{ts,tsx,json,md}\"","format:fix":"prettier --write \"src/**/*.{ts,tsx,json,md}\"","type-check":"tsc --noEmit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage","lint-staged":"lint-staged"},"keywords":["react","hook","theme","typescript","tailwindcss"],"author":{"name":"Alex Santos","email":"alexsantosquispe@gmail.com"},"license":"MIT","packageManager":"pnpm@10.12.4","repository":{"type":"git","url":"git+https://github.com/alexsantosquispe/use-theme-hook.git"},"bugs":{"url":"https://github.com/alexsantosquispe/use-theme-hook/issues"},"homepage":"https://github.com/alexsantosquispe/use-theme-hook#readme","peerDependencies":{"react":">=18","react-dom":">=18"},"devDependencies":{"@eslint/js":"9.39.1","@rollup/plugin-typescript":"12.3.0","@testing-library/jest-dom":"6.6.3","@testing-library/react":"16.1.0","@types/jest":"29.5.14","@types/react":"19.2.7","@types/react-dom":"19.2.3","@typescript-eslint/eslint-plugin":"8.48.1","@typescript-eslint/parser":"8.48.1","eslint":"9.39.1","eslint-config-prettier":"10.1.8","eslint-plugin-react":"7.37.5","eslint-plugin-react-hooks":"7.0.1","husky":"9.1.7","jest":"29.7.0","jest-environment-jsdom":"29.7.0","lint-staged":"16.2.7","prettier":"3.7.4","rollup":"4.53.3","ts-jest":"29.2.5","tslib":"2.8.1","typescript":"5.9.3","typescript-eslint":"8.48.1"},"lint-staged":{"*.{ts,tsx}":["eslint . --ext .js,.jsx,.ts,.tsx","prettier --check ."],"*.{json,md,yml,yaml,css,html}":["prettier --check ."]},"_id":"@alexsantosquispe/use-theme-hook@1.0.3","gitHead":"5849d634031e93a2e19bf7d880067c8a6755d529","_nodeVersion":"22.15.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-kVL5KgW4SoBE3RKZOSZheY7QcIglsLoC5OMXszMScKGRPq/+xw3Qlrss/sUUNUUDN+KRZvdtovfqmozrNrcj5A==","shasum":"c1dc2b66c201a55b4b3cc4ffe33bc64648c2d940","tarball":"https://registry.npmjs.org/@alexsantosquispe/use-theme-hook/-/use-theme-hook-1.0.3.tgz","fileCount":26,"unpackedSize":30480,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIA2HcKLPOM7s/w2EP/D4huUvpdwb9lglxFHN5MXNwsx3AiANORi0RQ+nnSxc4f14MYocNFDwv/wq2tz5yGS8htCUnQ=="}]},"_npmUser":{"name":"alexsantosquispe","email":"alexsantosquispe@gmail.com"},"directories":{},"maintainers":[{"name":"alexsantosquispe","email":"alexsantosquispe@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/use-theme-hook_1.0.3_1767150414390_0.012433588681709073"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-28T23:08:10.978Z","modified":"2025-12-31T03:06:54.757Z","1.0.1-beta.1":"2025-12-28T23:08:11.195Z","1.0.1-beta.2":"2025-12-31T02:11:37.213Z","1.0.1":"2025-12-31T03:05:11.353Z","1.0.3":"2025-12-31T03:06:54.557Z"},"bugs":{"url":"https://github.com/alexsantosquispe/use-theme-hook/issues"},"author":{"name":"Alex Santos","email":"alexsantosquispe@gmail.com"},"license":"MIT","homepage":"https://github.com/alexsantosquispe/use-theme-hook#readme","keywords":["react","hook","theme","typescript","tailwindcss"],"repository":{"type":"git","url":"git+https://github.com/alexsantosquispe/use-theme-hook.git"},"description":"A React hook for managing themes","maintainers":[{"name":"alexsantosquispe","email":"alexsantosquispe@gmail.com"}],"readme":"<div align=\"center\">\n\n# 🎨 use-theme-hook 🌗\n\n[![npm version](https://img.shields.io/npm/v/@alexsantosquispe/use-theme-hook.svg?style=flat-square)](https://www.npmjs.com/package/@alexsantosquispe/use-theme-hook)\n[![CI Status](https://github.com/alexsantosquispe/use-theme-hook/actions/workflows/github_ci.yml/badge.svg?style=flat-square)](https://github.com/alexsantosquispe/use-theme-hook/actions)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://github.com/alexsantosquispe/use-theme-hook/blob/main/LICENSE)\n[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@alexsantosquispe/use-theme-hook?style=flat-square)](https://bundlephobia.com/package/@alexsantosquispe/use-theme-hook)\n\n<br />\n\n[![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://react.dev/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)\n[![Tailwind CSS](https://img.shields.io/badge/TailwindCSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white)](https://tailwindcss.com/)\n[![Rollup](https://img.shields.io/badge/Rollup-EC4A3F?style=for-the-badge&logo=rollup&logoColor=white)](https://rollupjs.org/)\n\n</div>\n\nA lightweight React hook for managing themes (`light`, `dark`, and `system`) with automatic persistence to `localStorage`.\n\n**Package name on npm:** `@alexsantosquispe/use-theme-hook`\n\n## ✨ Why use this hook?\n\n- ✅ Minimal API, easy to reason about\n- 🧩 Zero runtime dependencies\n- 🎯 Tailwind CSS–friendly (`dark` class strategy)\n- 💾 Persistent theme across sessions\n- 🧪 Fully typed and unit tested\n- 📦 Works with both ESM and CommonJS consumers\n\n---\n\n## ⚠️ Client-side only\n\nThis library relies on `window` and `localStorage`.\n\nWhen using SSR frameworks like **Next.js**, **Remix**, or **Gatsby**, ensure it runs **only on the client** (e.g. inside client components or `useEffect`).\n\n---\n\n## 📦 Installation\n\n**pnpm**\n\n```bash\npnpm add @alexsantosquispe/use-theme-hook\n```\n\n**npm**\n\n```bash\nnpm install @alexsantosquispe/use-theme-hook\n```\n\n## 🚀 Usage\n\n1. First, wrap your application with the `ThemeProvider` to provide the theme context to all your components.\n\n```tsx\n// src/main.tsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport App from \"./App\";\nimport { ThemeProvider } from \"@alexsantosquispe/use-theme-hook\";\n\nReactDOM.createRoot(document.getElementById(\"root\")!).render(\n  <React.StrictMode>\n    <ThemeProvider>\n      <App />\n    </ThemeProvider>\n  </React.StrictMode>\n);\n```\n\n### With Tailwind CSS 🎯\n\nThis hook works by adding a `dark` class to the `<html>` element when the dark theme is active. You can use this to style your application accordingly.\n\nIf you are using Tailwind CSS, add the following line to your global CSS file (e.g., `index.css`) to enable dark mode variants:\n\n```css\n@custom-variant dark (&:is(.dark *));\n```\n\nThis will allow you to use the `dark:` prefix for your utility classes. 🎨\n\nFor more information, see the [Tailwind CSS documentation on toggling dark mode manually](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually). 📖\n\n2. Next, use the `useTheme` hook in any component to access the current theme and the function to update it.\n\n```tsx\n// src/App.tsx\nimport { THEME_TYPES, useTheme } from \"@alexsantosquispe/use-theme-hook\";\n\nfunction App() {\n  const { theme, setTheme } = useTheme();\n\n  return (\n    <div>\n      <h1>Current Theme: {theme}</h1>\n      <button onClick={() => setTheme(THEME_TYPES.LIGHT)}>Light</button>\n      <button onClick={() => setTheme(THEME_TYPES.DARK)}>Dark</button>\n      <button onClick={() => setTheme(THEME_TYPES.SYSTEM)}>System</button>\n    </div>\n  );\n}\n\nexport default App;\n```\n\n3. Now you can use the tailwind styles for dark mode like this example:\n\n```html\n<p className=\"text-black dark:text-white\">Lorem ipsum...</p>\n```\n\n4. Happy coding!!\n\n## 📚 API Reference\n\n### `ThemeProvider`\n\nA React component that provides the theme context to its children. It should be used at the root of your application.\n\nBy default you are going to get `light`, `dark`, or `system`. If you just need a `light` and `dark` options you can set the flag `allowSystemTheme` to `false` in the `ThemeProvider` to disable that option.\n\n```tsx\n// src/main.tsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport App from \"./App\";\nimport { ThemeProvider } from \"@alexsantosquispe/use-theme-hook\";\n\nReactDOM.createRoot(document.getElementById(\"root\")!).render(\n  <React.StrictMode>\n    {/* Here goes the change */}\n    <ThemeProvider allowSystemTheme={false}>\n      <App />\n    </ThemeProvider>\n  </React.StrictMode>\n);\n```\n\nThen you use the `useTheme` hook you are not going to get the `system` option.\n\n```tsx\n// src/component/ThemeButton.tsx\nimport { THEME_TYPES, useTheme } from \"@alexsantosquispe/use-theme-hook\";\n\nexport const ThemeButton = () => {\n  const { theme, setTheme } = useTheme();\n\n  const toggleTheme = () => {\n    const newTheme =\n      theme === THEME_TYPES.DARK ? THEME_TYPES.LIGHT : THEME_TYPES.DARK;\n    setTheme(newTheme);\n  };\n\n  return (\n    <button onClick={toggleTheme}>\n      {theme === THEME_TYPES.DARK ? \"Light\" : \"Dark\"}\n    </button>\n  );\n};\n```\n\n### `useTheme()`\n\nA custom hook that returns the theme context.\n\n- **`theme`**: (`ThemeType`) The current active theme (`light`, `dark`, or `system`).\n- **`setTheme`**: (`(theme: ThemeType) => void`) A function to update the current theme.\n\n```tsx\nimport { useTheme } from \"@alexsantosquispe/use-theme-hook\";\n\nexport const Component = () => {\n  const { theme, setTheme } = useTheme();\n\n  return <div>...</div>;\n};\n```\n\n### `THEME_TYPES` 📋\n\nAn object containing the available theme constants:\n\n- `LIGHT`: `'light'`\n- `DARK`: `'dark'`\n- `SYSTEM`: `'system'`\n\nYou also can use the `ThemeType` if you need it.\n\n```tsx\nimport { THEME_TYPES, type ThemeType } from \"@alexsantosquispe/use-theme-hook\";\n\nexport const Component = () => {\n  const { theme, setTheme } = useTheme();\n\n  return <div>...</div>;\n};\n```\n\n## ⚙️ How It Works\n\nThis hook is designed to provide a seamless theme management experience. Here's a brief overview of its inner workings:\n\n- **System Theme Detection**: When the theme is set to `'system'`, the hook uses `window.matchMedia('(prefers-color-scheme: dark)')` to automatically detect and apply the user's preferred system theme (light or dark).\n\n- **Persistence**: To ensure the selected theme persists across sessions, the hook stores the current theme in `localStorage` under the key `\"uth-theme\"`. When the application loads, it checks for this key and applies the stored theme.\n  You can get the storedTheme using the function `getStoredTheme`.\n\n- **Theme Application**: The hook applies the current theme by adding or removing the `dark` class to the `<html>` element. This allows you to use Tailwind CSS's `dark:` variants to style your components for dark mode.\n\n## 🤝 Contributing\n\nContributions are welcome! If you have any ideas, suggestions, or bug reports, please open an issue on the GitHub repository. If you'd like to contribute code, please fork the repository and submit a pull request. 🚀\n\n## 📄 License\n\nThis project is licensed under the MIT License.\n","readmeFilename":"README.md"}