{"_id":"@adnanwani/universal-darkmode","_rev":"5-40ca3dc15ded06b5fec7f67dc629c6c3","name":"@adnanwani/universal-darkmode","dist-tags":{"latest":"1.1.1"},"versions":{"1.0.0":{"name":"@adnanwani/universal-darkmode","version":"1.0.0","_id":"@adnanwani/universal-darkmode@1.0.0","maintainers":[{"name":"adnanwani","email":"adnanaduuu@gmail.com"}],"dist":{"shasum":"a051531dcc6449ac20b7e4b4e51ca2f99081e2b0","tarball":"https://registry.npmjs.org/@adnanwani/universal-darkmode/-/universal-darkmode-1.0.0.tgz","fileCount":11,"integrity":"sha512-KC58MGahnHtVKXSh31ZxvmaYRKavoTofbjd8O/+RbtuiSM8MlzvI6Rl9BZBgoQPaFJOSVTPFAN6OX48Xs37rqw==","signatures":[{"sig":"MEUCIQCSYvDWXASeGPCBE5pU13sdxjwcWl5HrbnSq5hYPY3mLQIgU2cZIHjgi5YRuVpbXe5Ymx0a8Q+CQKodq/OcBAc2eX4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26700},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","scripts":{"dev":"vite","lint":"eslint .","test":"vitest","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"adnanwani","email":"adnanaduuu@gmail.com"},"_npmVersion":"9.6.5","directories":{},"_nodeVersion":"22.12.0","dependencies":{"lucide-react":"^0.344.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.2","jsdom":"^24.0.0","react":"^18.3.1","eslint":"^9.9.1","vitest":"^1.3.1","globals":"^15.9.0","postcss":"^8.4.35","react-dom":"^18.3.1","@eslint/js":"^9.9.1","typescript":"^5.5.3","tailwindcss":"^3.4.1","@types/react":"^18.3.5","autoprefixer":"^10.4.18","vite-plugin-dts":"^3.7.3","@types/react-dom":"^18.3.0","typescript-eslint":"^8.3.0","@vitejs/plugin-react":"^4.3.1","@testing-library/react":"^14.2.1","eslint-plugin-react-hooks":"^5.1.0-rc.0","eslint-plugin-react-refresh":"^0.4.11"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/universal-darkmode_1.0.0_1744281865245_0.15608416453210427","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@adnanwani/universal-darkmode","version":"1.0.1","author":{"name":"Adnan Wani"},"license":"MIT","_id":"@adnanwani/universal-darkmode@1.0.1","maintainers":[{"name":"adnanwani","email":"adnanaduuu@gmail.com"}],"homepage":"https://github.com/Adnan-Hamid-wani/universal-dark-mode#readme","bugs":{"url":"https://github.com/Adnan-Hamid-wani/universal-dark-mode/issues"},"dist":{"shasum":"52117461c59134425395cd7e7a7e8d2fbea030ff","tarball":"https://registry.npmjs.org/@adnanwani/universal-darkmode/-/universal-darkmode-1.0.1.tgz","fileCount":12,"integrity":"sha512-yi2DD92e1U+SpT5mFgiXoxDIq3SJ2Qsfy+cJ1CX+tI4tCKN7RjMPS6AZQ5YpDK/RMwz/+nssGD3gL78zPcxBXw==","signatures":[{"sig":"MEYCIQDdVV0RUJI7cL3lpaJrLckt4zdBFMMwb03y8fA5+XIgQwIhAMOa3nSeQOWtt4YKWFBEFnarXXD6l/37jmDfxWUQkjuU","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30463},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","scripts":{"dev":"vite","lint":"eslint .","test":"vitest","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"adnanwani","email":"adnanaduuu@gmail.com"},"repository":{"url":"git+https://github.com/Adnan-Hamid-wani/universal-dark-mode.git","type":"git"},"_npmVersion":"9.6.5","description":"Zero-config dark mode for React applications with Tailwind CSS. Add dark mode to your entire application with just one line of code!","directories":{},"_nodeVersion":"22.12.0","dependencies":{"lucide-react":"^0.344.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.2","jsdom":"^24.0.0","react":"^18.3.1","eslint":"^9.9.1","vitest":"^1.3.1","globals":"^15.9.0","postcss":"^8.4.35","react-dom":"^18.3.1","@eslint/js":"^9.9.1","typescript":"^5.5.3","tailwindcss":"^3.4.1","@types/react":"^18.3.5","autoprefixer":"^10.4.18","vite-plugin-dts":"^3.7.3","@types/react-dom":"^18.3.0","typescript-eslint":"^8.3.0","@vitejs/plugin-react":"^4.3.1","@testing-library/react":"^14.2.1","eslint-plugin-react-hooks":"^5.1.0-rc.0","eslint-plugin-react-refresh":"^0.4.11"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/universal-darkmode_1.0.1_1744349606621_0.2192018410859231","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@adnanwani/universal-darkmode","version":"1.0.2","author":{"name":"Adnan Wani"},"license":"MIT","_id":"@adnanwani/universal-darkmode@1.0.2","maintainers":[{"name":"adnanwani","email":"adnanaduuu@gmail.com"}],"homepage":"https://github.com/Adnan-Hamid-wani/universal-dark-mode#readme","bugs":{"url":"https://github.com/Adnan-Hamid-wani/universal-dark-mode/issues"},"dist":{"shasum":"7438fb2b7250845b4bd807b2b1d808d06f9dc8e4","tarball":"https://registry.npmjs.org/@adnanwani/universal-darkmode/-/universal-darkmode-1.0.2.tgz","fileCount":12,"integrity":"sha512-BUU3uXzoKLxVP9WSRz3xp1Rfd+b15BwyuC0qpExH92BHmGKrnMgZaTnl4r0luM9fHrhhkEs8dQR627tS2oIcbw==","signatures":[{"sig":"MEYCIQD4iJhhS1082VWR6iZfEAfKzRoQvJE7EpLygCIcxhnt7wIhAJLF7198lUFSl48BrBOLiqDmW4gvfNZRMxP/bZrhROQt","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30485},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"e346a4cf31cacb35448f9b6e37567f172d6b9133","scripts":{"dev":"vite","lint":"eslint .","test":"vitest","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"adnanwani","email":"adnanaduuu@gmail.com"},"repository":{"url":"git+https://github.com/Adnan-Hamid-wani/universal-dark-mode.git","type":"git"},"_npmVersion":"9.6.5","description":"Zero-config dark mode for React applications with Tailwind CSS. Add dark mode to your entire application with just one line of code!","directories":{},"_nodeVersion":"22.12.0","dependencies":{"lucide-react":"^0.344.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.2","jsdom":"^24.0.0","react":"^18.3.1","eslint":"^9.9.1","vitest":"^1.3.1","globals":"^15.9.0","postcss":"^8.4.35","react-dom":"^18.3.1","@eslint/js":"^9.9.1","typescript":"^5.5.3","tailwindcss":"^3.4.1","@types/react":"^18.3.5","autoprefixer":"^10.4.18","vite-plugin-dts":"^3.7.3","@types/react-dom":"^18.3.0","typescript-eslint":"^8.3.0","@vitejs/plugin-react":"^4.3.1","@testing-library/react":"^14.2.1","eslint-plugin-react-hooks":"^5.1.0-rc.0","eslint-plugin-react-refresh":"^0.4.11"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/universal-darkmode_1.0.2_1744435105521_0.5840903907984096","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@adnanwani/universal-darkmode","version":"1.1.0","_id":"@adnanwani/universal-darkmode@1.1.0","maintainers":[{"name":"adnanwani","email":"adnanaduuu@gmail.com"}],"dist":{"shasum":"67dfc82403e2368252e491010daaf4a7a5a0d478","tarball":"https://registry.npmjs.org/@adnanwani/universal-darkmode/-/universal-darkmode-1.1.0.tgz","fileCount":6,"integrity":"sha512-6QRFl975aJFSJKuh15beLoScgj6CaytvJISHJRkEZrMr3p5T7QsXD0VIViq1ji23oG9GF39jFCN6rCoTrhq+og==","signatures":[{"sig":"MEUCIQDZ8NPN9sl4Bs1/OWuz4maCeO7c+kPa/nqB3VSbq7+DUQIgCbMi287OMefdmflObZonkX3fHuUxVSJ8Qoyw42RZYU8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8219},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","scripts":{"dev":"vite","lint":"eslint .","test":"vitest","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"adnanwani","email":"adnanaduuu@gmail.com"},"_npmVersion":"9.6.5","description":"A lightweight, customizable dark mode implementation for React applications with automatic theme switching and persistent preferences.","directories":{},"_nodeVersion":"22.12.0","dependencies":{"lucide-react":"^0.344.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.2","jsdom":"^24.0.0","react":"^18.3.1","eslint":"^9.9.1","vitest":"^1.3.1","globals":"^15.9.0","postcss":"^8.4.35","react-dom":"^18.3.1","@eslint/js":"^9.9.1","typescript":"^5.5.3","tailwindcss":"^3.4.1","@types/react":"^18.3.5","autoprefixer":"^10.4.18","vite-plugin-dts":"^3.7.3","@types/react-dom":"^18.3.0","typescript-eslint":"^8.3.0","@vitejs/plugin-react":"^4.3.1","@testing-library/react":"^14.2.1","eslint-plugin-react-hooks":"^5.1.0-rc.0","eslint-plugin-react-refresh":"^0.4.11"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/universal-darkmode_1.1.0_1744456622695_0.6731738674543055","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@adnanwani/universal-darkmode","version":"1.1.1","type":"module","main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/Adnan-hamid-wani/Universal-dark-mode.git"},"bugs":{"url":"https://github.com/Adnan-hamid-wani/Universal-dark-mode/issues"},"homepage":"https://github.com/Adnan-hamid-wani/Universal-darkmode#readme","scripts":{"dev":"vite","build":"vite build","test":"vitest","lint":"eslint .","preview":"vite preview"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"dependencies":{"lucide-react":"^0.344.0"},"devDependencies":{"@eslint/js":"^9.9.1","@testing-library/react":"^14.2.1","@types/react":"^18.3.5","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.3.1","autoprefixer":"^10.4.18","eslint":"^9.9.1","eslint-plugin-react-hooks":"^5.1.0-rc.0","eslint-plugin-react-refresh":"^0.4.11","globals":"^15.9.0","jsdom":"^24.0.0","postcss":"^8.4.35","react":"^18.3.1","react-dom":"^18.3.1","tailwindcss":"^3.4.1","typescript":"^5.5.3","typescript-eslint":"^8.3.0","vite":"^5.4.2","vite-plugin-dts":"^3.7.3","vitest":"^1.3.1"},"gitHead":"774f4bb0c4fcaa3659a61f7892d73cf298177609","description":"Zero-config dark mode for React applications with Tailwind CSS. Add dark mode to your entire application with JUST TWO LINES OF CODE! ## Features","_id":"@adnanwani/universal-darkmode@1.1.1","_nodeVersion":"22.12.0","_npmVersion":"9.6.5","dist":{"integrity":"sha512-CtN689PXfY+TObJOSaYFrRZIuWH7v5bXa3thCx0g9KOLQWwBTDeaO9mxvAF/GijVjFaV5LvXi+17wgP92fxuMg==","shasum":"e85bcc632ca8fb939ff78e5298ef1ed59a7a664c","tarball":"https://registry.npmjs.org/@adnanwani/universal-darkmode/-/universal-darkmode-1.1.1.tgz","fileCount":6,"unpackedSize":8506,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIB24WRnbDoR6P92OMkGLcXwwM/x7TAbTAV7VXhd2b51hAiEAwGDfHFYJ0XeE6AsequmVWQDgWMD3DGgTC/TMz9YM9tE="}]},"_npmUser":{"name":"adnanwani","email":"adnanaduuu@gmail.com"},"directories":{},"maintainers":[{"name":"adnanwani","email":"adnanaduuu@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/universal-darkmode_1.1.1_1744457219081_0.038813575641390985"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-10T10:44:25.163Z","modified":"2025-04-12T11:26:59.450Z","1.0.0":"2025-04-10T10:44:25.430Z","1.0.1":"2025-04-11T05:33:26.814Z","1.0.2":"2025-04-12T05:18:25.739Z","1.1.0":"2025-04-12T11:17:02.879Z","1.1.1":"2025-04-12T11:26:59.263Z"},"description":"Zero-config dark mode for React applications with Tailwind CSS. Add dark mode to your entire application with JUST TWO LINES OF CODE! ## Features","maintainers":[{"name":"adnanwani","email":"adnanaduuu@gmail.com"}],"readme":"# React Dark Mode Library\n\nZero-config dark mode for React applications with Tailwind CSS. Add dark mode to your entire application with JUST TWO LINES OF CODE!\n## Features\n\n- 🌓 Smooth dark/light mode transitions\n- 💾 Persists user preferences\n- 🎨 Customizable styling\n- 🎯 Selective dark mode exclusion\n- 📱 Fully responsive\n- ⚛️ React 18+ support\n- 🎨 Tailwind CSS integration\n\n## Installation\n\n```bash\nnpm install @adnanwani/universal-darkmode\n```\n\n## Quick Start\n\n1. Wrap your app with `DarkModeProvider`:\n\n```jsx\nimport { DarkModeProvider } from '@adnanwani/universal-darkmode';\n\nfunction App() {\n  return (\n    <DarkModeProvider>\n      {/* Your app content */}\n    </DarkModeProvider>\n  );\n}\n```\n\n2. Add the toggle button wherever you want:\n\n```jsx\nimport { DarkModeToggle } from '@adnanwani/universal-darkmode';\n\nfunction Navbar() {\n  return (\n    <nav>\n      <DarkModeToggle />\n    </nav>\n  );\n}\n```\n\n3. Configure Tailwind CSS:\n\n```js\n// tailwind.config.js\n/** @type {import('tailwindcss').Config} */\nexport default {\n  content: [\n    \"./index.html\",\n    \"./src/**/*.{js,ts,jsx,tsx}\",\n  ],\n  darkMode: 'class',\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}\n```\n\n## Usage\n\n### Basic Example\n\n```jsx\nimport { DarkModeProvider, DarkModeToggle } from '@adnanwani/universal-darkmode';\n\nfunction App() {\n  return (\n    <DarkModeProvider>\n      <div className=\"min-h-screen p-8\">\n        <DarkModeToggle className=\"mb-4\" />\n        <div className=\"p-6 rounded-lg border\">\n          <h1 className=\"text-2xl font-bold\">Hello Dark Mode!</h1>\n          <p>This content will automatically adapt to dark mode.</p>\n        </div>\n      </div>\n    </DarkModeProvider>\n  );\n}\n```\n\n### Excluding Elements from Dark Mode\n\nUse the `no-dark-mode` class to keep elements in their original styling:\n\n```jsx\n<div className=\"p-6 rounded-lg no-dark-mode bg-blue-100\">\n  <h2 className=\"text-blue-900\">This stays blue in both modes!</h2>\n</div>\n```\n\n### Using the Dark Mode Hook\n\n```jsx\nimport { useDarkMode } from '@adnanwani/universal-darkmode';\n\nfunction CustomComponent() {\n  const { isDarkMode, toggleDarkMode } = useDarkMode();\n\n  return (\n    <div>\n      <p>Current mode: {isDarkMode ? 'Dark' : 'Light'}</p>\n      <button onClick={toggleDarkMode}>Toggle</button>\n    </div>\n  );\n}\n```\n\n### Provider Options\n\n```jsx\n<DarkModeProvider defaultDark={true}>\n  {/* Content */}\n</DarkModeProvider>\n```\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `defaultDark` | boolean | `false` | Initial dark mode state |\n| `children` | ReactNode | - | Child components |\n\n### Toggle Button Props\n\n```jsx\n<DarkModeToggle className=\"custom-class\" />\n```\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `className` | string | `''` | Additional CSS classes |\n\n## Styling\n\nThe library automatically handles dark mode transitions and applies appropriate styles based on the current theme. It uses CSS variables for theme colors which can be customized in your CSS:\n\n```css\n:root {\n  --bg-primary: #ffffff;\n  --text-primary: #000000;\n  --border-color: #e5e7eb;\n}\n\n.dark {\n  --bg-primary: #1a1a1a;\n  --text-primary: #ffffff;\n  --border-color: #374151;\n}\n```\n\n## Browser Support\n\n- Chrome (and Chromium-based browsers)\n- Firefox\n- Safari\n- Edge\n\n## Requirements\n\n- React 18 or higher\n- Tailwind CSS 3.0 or higher\n\n## License\n\nMIT","readmeFilename":"README.md","homepage":"https://github.com/Adnan-hamid-wani/Universal-darkmode#readme","repository":{"type":"git","url":"git+https://github.com/Adnan-hamid-wani/Universal-dark-mode.git"},"bugs":{"url":"https://github.com/Adnan-hamid-wani/Universal-dark-mode/issues"}}