{"_id":"@aniruddha1806/theme-toggle","_rev":"4-0886347a5b75d94e18fa57d2dfa78117","name":"@aniruddha1806/theme-toggle","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@aniruddha1806/theme-toggle","version":"1.0.0","keywords":["react","theme","toggle","dark-mode","light-mode"],"author":{"name":"Your Name"},"license":"MIT","_id":"@aniruddha1806/theme-toggle@1.0.0","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"2a71ac141c215c84d31d2476fc2ce91d2cd1d11f","tarball":"https://registry.npmjs.org/@aniruddha1806/theme-toggle/-/theme-toggle-1.0.0.tgz","fileCount":5,"integrity":"sha512-TN1irlz6YXJUsFMFh3QO23+E5WPENOY7y3BYC/zP8tgb+ZPVYYWMx0UpeRayr+3upu7ojd9Hc7H5E0wsKyDK/A==","signatures":[{"sig":"MEUCIQCSMwlj1iOjZhkwB1VF7wLLVeGzQiwPYoBX1uIM81vsrwIgcdwxDk03c4XclAwgvvcDmm55uaYDyMLdQrzmUL/UmjI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10204},"main":"dist/cjs/index.js","types":"dist/index.d.ts","module":"dist/esm/index.js","scripts":{"test":"jest","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"A lightweight, customizable light/dark theme toggle for React","directories":{},"_nodeVersion":"20.14.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^27.5.1","tslib":"^2.8.1","rollup":"^2.70.0","typescript":"^4.6.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","rollup-plugin-typescript2":"^0.31.2"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/theme-toggle_1.0.0_1743952949178_0.7402240950244898","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aniruddha1806/theme-toggle","version":"1.0.1","keywords":["react","theme","toggle","dark-mode","light-mode"],"author":{"name":"Your Name"},"license":"MIT","_id":"@aniruddha1806/theme-toggle@1.0.1","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"d848b3579b9c73700aa7967ddde0b29495e2f3d7","tarball":"https://registry.npmjs.org/@aniruddha1806/theme-toggle/-/theme-toggle-1.0.1.tgz","fileCount":5,"integrity":"sha512-C0rKwXv8ZQOR4u4Wmw2v78k9po73uk7UuJyRgDUgRx6smPdIxXtBDVeWMtI4DCSqphWxic3O1ZvLM+gwaYsjaA==","signatures":[{"sig":"MEQCIGKaxd/NOH9dWOYLWD9tVYRXXHJVAdlYXlW2D3uj3c7LAiBwb7mE6B1PCPwu0D/yf5XbPbPglnmXgEqwYbT5WNv2dg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10822},"main":"dist/cjs/index.js","types":"dist/index.d.ts","module":"dist/esm/index.js","scripts":{"test":"jest","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"A lightweight, customizable light/dark theme toggle for React","directories":{},"_nodeVersion":"20.14.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^27.5.1","tslib":"^2.8.1","rollup":"^2.70.0","typescript":"^4.6.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","rollup-plugin-typescript2":"^0.31.2"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/theme-toggle_1.0.1_1743954310547_0.5159017695362305","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@aniruddha1806/theme-toggle","version":"1.0.2","keywords":["react","theme","toggle","dark-mode","light-mode"],"author":{"name":"Your Name"},"license":"MIT","_id":"@aniruddha1806/theme-toggle@1.0.2","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"31220ebbbd4896e71057a0147c98e8c524dcfefe","tarball":"https://registry.npmjs.org/@aniruddha1806/theme-toggle/-/theme-toggle-1.0.2.tgz","fileCount":5,"integrity":"sha512-S2/lJ4APrhN1INx/7aGPzb8NuEiZiPufzpRgzMbMxvx6hAU89iU3scLz2CWx4zvx7kkXSeEP1U1SZ8jGpN7MLg==","signatures":[{"sig":"MEUCIQCcOPV8n6JECc/3sKNPqb9Jhp39HLuuIvKIouLFWEc3nwIgUp19f4mqYZqHpr1TSE6hyol9o+Q9ZVI9FdJPWlIVG2s=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10794},"main":"dist/cjs/index.js","types":"dist/index.d.ts","module":"dist/esm/index.js","scripts":{"test":"jest","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"A lightweight, customizable light/dark theme toggle for React","directories":{},"_nodeVersion":"20.14.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^27.5.1","tslib":"^2.8.1","rollup":"^2.70.0","typescript":"^4.6.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","rollup-plugin-typescript2":"^0.31.2"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/theme-toggle_1.0.2_1743954808357_0.5718379344317099","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@aniruddha1806/theme-toggle","version":"1.0.3","description":"A lightweight, customizable light/dark theme toggle for React","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","test":"jest","prepublishOnly":"npm run build"},"keywords":["react","theme","toggle","dark-mode","light-mode"],"author":{"name":"Your Name"},"license":"MIT","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","jest":"^27.5.1","rollup":"^2.70.0","rollup-plugin-typescript2":"^0.31.2","tslib":"^2.8.1","typescript":"^4.6.0"},"_id":"@aniruddha1806/theme-toggle@1.0.3","_nodeVersion":"20.14.0","_npmVersion":"10.9.1","dist":{"integrity":"sha512-f3yN7e/CNcas4tA2+ZB6VxEcXefOMiQUpzZ6CeCExavacmJSfqNhQ4uWoMGF5tl6s0DxYcgg7EJ363RLBgLN1A==","shasum":"b183e95d06da8d9bbdcca2eee849ee1141cacbe5","tarball":"https://registry.npmjs.org/@aniruddha1806/theme-toggle/-/theme-toggle-1.0.3.tgz","fileCount":6,"unpackedSize":17667,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC735/Z5u8SMNukXnKk4b72Hcv9fzdxhEReJbNOznsIngIgcwbj22WCiN+A6d8BvefiQ8awBsLIwTus3XjMJVjlIGI="}]},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"directories":{},"maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/theme-toggle_1.0.3_1749126289385_0.671144618487638"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-06T15:22:29.083Z","modified":"2025-06-05T12:24:49.792Z","1.0.0":"2025-04-06T15:22:29.339Z","1.0.1":"2025-04-06T15:45:10.736Z","1.0.2":"2025-04-06T15:53:28.519Z","1.0.3":"2025-06-05T12:24:49.629Z"},"author":{"name":"Your Name"},"license":"MIT","keywords":["react","theme","toggle","dark-mode","light-mode"],"description":"A lightweight, customizable light/dark theme toggle for React","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"readme":"# React Theme Toggle\r\n\r\nA lightweight, customizable theme toggle component for React applications with TypeScript support. Easily switch between light and dark themes with smooth transitions and persistent storage.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @aniruddha1806/theme-toggle\r\n\r\n```\r\n\r\n## Features\r\n\r\n- 🌙 Light and dark theme switching\r\n- 💾 Persistent theme storage with localStorage\r\n- 🎨 Customizable icons and colors\r\n- ⚡ Smooth transitions and animations\r\n- 🔧 Flexible configuration options\r\n- 📱 Responsive design\r\n- ♿ Accessibility features with ARIA labels\r\n- 🪶 Zero dependencies and lightweight\r\n- 📦 TypeScript support with full type definitions\r\n\r\n## Quick Start\r\n\r\n```jsx\r\nimport { ThemeProvider, ThemeToggle } from '@aniruddha1806/theme-toggle';\r\n\r\nfunction App() {\r\n  return (\r\n    <ThemeProvider>\r\n      <div>\r\n        <header>\r\n          <h1>My App</h1>\r\n          <ThemeToggle />\r\n        </header>\r\n        <main>\r\n          <p>Your content here...</p>\r\n        </main>\r\n      </div>\r\n    </ThemeProvider>\r\n  );\r\n}\r\n\r\nexport default App;\r\n```\r\n\r\n## Components\r\n\r\n### ThemeProvider\r\n\r\nWrap your application with the ThemeProvider to enable theme functionality throughout your app.\r\n\r\n#### Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `children` | `ReactNode` | `required` | Child components to wrap |\r\n| `defaultTheme` | `\"light\" \\\\| \"dark\"` | `\"light\"` | Initial theme when no saved preference exists |\r\n| `overrideTextColor` | `boolean` | `true` | Whether to automatically adjust text colors |\r\n\r\n### ThemeToggle\r\n\r\nA button component that toggles between light and dark themes.\r\n\r\n#### Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `size` | `number` | `24` | Size of the toggle button in pixels |\r\n| `className` | `string` | `\"\"` | Additional CSS class for styling |\r\n| `lightIconColor` | `string` | `\"#FDB813\"` | Color of the sun icon (light mode) |\r\n| `darkIconColor` | `string` | `\"#FFFFFF\"` | Color of the moon icon (dark mode) |\r\n\r\n### useTheme Hook\r\n\r\nAccess theme state and controls from any component within the ThemeProvider.\r\n\r\n#### Returns\r\n\r\n| Property | Type | Description |\r\n|----------|------|-------------|\r\n| `theme` | `\"light\" \\\\| \"dark\"` | Current active theme |\r\n| `toggleTheme` | `() => void` | Function to toggle between themes |\r\n| `overrideTextColor` | `boolean` | Whether text color override is enabled |\r\n\r\n## Examples\r\n\r\n### Basic Usage\r\n\r\nSimple theme toggle with default settings:\r\n\r\n```jsx\r\nimport { ThemeProvider, ThemeToggle } from '@aniruddha1806/theme-toggle';\r\n\r\nfunction BasicExample() {\r\n  return (\r\n    <ThemeProvider defaultTheme=\"dark\">\r\n      <div style={{ padding: '20px' }}>\r\n        <h1>Welcome to My App</h1>\r\n        <ThemeToggle />\r\n        <p>This content will automatically adapt to the selected theme.</p>\r\n      </div>\r\n    </ThemeProvider>\r\n  );\r\n}\r\n```\r\n\r\n\r\n### Custom Styled Toggle\r\n\r\nCustomize the appearance of the theme toggle:\r\n\r\n```jsx\r\nimport { ThemeProvider, ThemeToggle } from '@aniruddha1806/theme-toggle';\r\n\r\nfunction CustomStyledExample() {\r\n  return (\r\n    <ThemeProvider>\r\n      <div style={{ padding: '20px' }}>\r\n        <h1>Custom Theme Toggle</h1>\r\n        <ThemeToggle\r\n          size={32}\r\n          lightIconColor=\"#FF6B35\"\r\n          darkIconColor=\"#4ECDC4\"\r\n          className=\"custom-toggle\"\r\n        />\r\n      </div>\r\n    </ThemeProvider>\r\n  );\r\n}\r\n```\r\n\r\n### Using the useTheme Hook\r\n\r\nAccess theme state in any component:\r\n\r\n```jsx\r\nimport { ThemeProvider, ThemeToggle, useTheme } from '@aniruddha1806/theme-toggle';\r\n\r\nfunction ThemeAwareComponent() {\r\n  const { theme, toggleTheme } = useTheme();\r\n\r\n  return (\r\n    <div style={{\r\n      padding: '20px',\r\n      backgroundColor: theme === 'dark' ? '#2a2a2a' : '#f5f5f5',\r\n      borderRadius: '8px'\r\n    }}>\r\n      <h2>Current theme: {theme}</h2>\r\n      <p>This component adapts its styling based on the current theme.</p>\r\n      <button onClick={toggleTheme}>\r\n        Switch to {theme === 'light' ? 'dark' : 'light'} mode\r\n      </button>\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction App() {\r\n  return (\r\n    <ThemeProvider>\r\n      <div style={{ padding: '20px' }}>\r\n        <ThemeToggle />\r\n        <ThemeAwareComponent />\r\n      </div>\r\n    </ThemeProvider>\r\n  );\r\n}\r\n```\r\n\r\n### Navigation Bar with Theme Toggle\r\n\r\nIntegrate theme toggle into a navigation bar:\r\n\r\n```jsx\r\nimport { ThemeProvider, ThemeToggle, useTheme } from '@aniruddha1806/theme-toggle';\r\n\r\nfunction NavigationBar() {\r\n  const { theme } = useTheme();\r\n\r\n  const navStyle = {\r\n    display: 'flex',\r\n    justifyContent: 'space-between',\r\n    alignItems: 'center',\r\n    padding: '1rem 2rem',\r\n    backgroundColor: theme === 'dark' ? '#1a1a1a' : '#ffffff',\r\n    borderBottom: `1px solid \\${theme === 'dark' ? '#333' : '#e0e0e0'}`,\r\n    boxShadow: '0 2px 4px rgba(0,0,0,0.1)'\r\n  };\r\n\r\n  const logoStyle = {\r\n    fontSize: '1.5rem',\r\n    fontWeight: 'bold',\r\n    color: theme === 'dark' ? '#ffffff' : '#333333'\r\n  };\r\n\r\n  return (\r\n    <nav style={navStyle}>\r\n      <div style={logoStyle}>MyApp</div>\r\n      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>\r\n        <a href=\"/about\" style={{ color: theme === 'dark' ? '#ffffff' : '#333333' }}>\r\n          About\r\n        </a>\r\n        <a href=\"/contact\" style={{ color: theme === 'dark' ? '#ffffff' : '#333333' }}>\r\n          Contact\r\n        </a>\r\n        <ThemeToggle size={28} />\r\n      </div>\r\n    </nav>\r\n  );\r\n}\r\n\r\nfunction App() {\r\n  return (\r\n    <ThemeProvider>\r\n      <NavigationBar />\r\n      <main style={{ padding: '2rem' }}>\r\n        <h1>Welcome to MyApp</h1>\r\n        <p>Toggle the theme using the button in the navigation bar.</p>\r\n      </main>\r\n    </ThemeProvider>\r\n  );\r\n}\r\n```\r\n\r\n## TypeScript Usage\r\n\r\nThe component provides full TypeScript support:\r\n\r\n```typescript\r\nimport { \r\n  ThemeProvider, \r\n  ThemeToggle, \r\n  useTheme,\r\n  ThemeProviderProps,\r\n  ThemeToggleProps,\r\n  ThemeContextType\r\n} from '@aniruddha1806/theme-toggle';\r\n\r\ninterface AppProps {\r\n  initialTheme?: 'light' | 'dark';\r\n}\r\n\r\nconst App: React.FC<AppProps> = ({ initialTheme = 'light' }) => {\r\n  const themeProviderProps: ThemeProviderProps = {\r\n    defaultTheme: initialTheme,\r\n    overrideTextColor: true\r\n  };\r\n\r\n  return (\r\n    <ThemeProvider {...themeProviderProps}>\r\n      <AppContent />\r\n    </ThemeProvider>\r\n  );\r\n};\r\n\r\nconst AppContent: React.FC = () => {\r\n  const { theme, toggleTheme }: ThemeContextType = useTheme();\r\n\r\n  const toggleProps: ThemeToggleProps = {\r\n    size: 28,\r\n    lightIconColor: '#f39c12',\r\n    darkIconColor: '#ecf0f1'\r\n  };\r\n\r\n  return (\r\n    <div>\r\n      <h1>Current theme: {theme}</h1>\r\n      <ThemeToggle {...toggleProps} />\r\n      <button onClick={toggleTheme}>\r\n        Toggle Theme Programmatically\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n","readmeFilename":"readme.md"}