\r\n \r\n\r\n```\r\n\r\n## Advanced Usage\r\n\r\n### With a Theme Toggle Component\r\n\r\n```tsx\r\nimport { useAutoTheme } from '@arsalanshaikhh/auto-time-theme-react';\r\n\r\nfunction ThemeToggle() {\r\n const { theme, mode, setLight, setDark, setAuto, toggleTheme } = useAutoTheme();\r\n\r\n return (\r\n \r\n \r\n ☀️ Light\r\n \r\n \r\n 🌙 Dark\r\n \r\n \r\n ⏰ Auto\r\n \r\n
\r\n );\r\n}\r\n```\r\n\r\n### Using with CSS-in-JS\r\n\r\n```tsx\r\nimport { useTheme } from '@arsalanshaikhh/auto-time-theme-react';\r\n\r\nfunction StyledComponent() {\r\n const theme = useTheme();\r\n const isDark = theme === 'dark';\r\n\r\n const styles = {\r\n backgroundColor: isDark ? '#111111' : '#ffffff',\r\n color: isDark ? '#ffffff' : '#111111',\r\n };\r\n\r\n return Content
;\r\n}\r\n```\r\n\r\n## SSR Compatibility\r\n\r\nThe package is designed to be safe for server-side rendering:\r\n\r\n- No `window` or `document` access during initial render\r\n- Theme is applied on client-side mount\r\n- Proper checks for environment before DOM access\r\n\r\n```tsx\r\n// This works with Next.js, Gatsby, Remix, etc.\r\nimport { AutoThemeProvider } from '@arsalanshaikhh/auto-time-theme-react';\r\n\r\nexport default function MyApp({ Component, pageProps }) {\r\n return (\r\n \r\n \r\n \r\n );\r\n}\r\n```\r\n\r\n## Edge Cases Handled\r\n\r\n- ✅ Time range crossing midnight\r\n- ✅ Tab sleeping and resuming (visibility change)\r\n- ✅ System time change during app usage\r\n- ✅ Invalid time configuration (falls back to defaults)\r\n- ✅ Disabled localStorage (graceful fallback)\r\n- ✅ SSR environments\r\n\r\n## Performance Considerations\r\n\r\n- **No constant polling** - Uses setTimeout to schedule only the next required theme switch\r\n- **Minimal re-renders** - Efficient context design\r\n- **Event listener cleanup** - Proper cleanup on unmount\r\n- **Memoized callbacks** - Reduces unnecessary re-renders\r\n\r\n## Folder Structure\r\n\r\n```\r\nsrc/\r\n ├── AutoThemeProvider.tsx # Context provider component\r\n ├── useAutoTheme.ts # Main hook and additional hooks\r\n ├── timeUtils.ts # Time calculation utilities\r\n ├── storage.ts # LocalStorage utilities\r\n ├── constants.ts # Default values and constants\r\n ├── types.ts # TypeScript type definitions\r\n └── index.ts # Public exports\r\n```\r\n\r\n## Contributing\r\n\r\nContributions are welcome! Please feel free to submit a Pull Request.\r\n\r\n## License\r\n\r\nMIT License - feel free to use this package in your projects.\r\n\r\n## Future Enhancements\r\n\r\nPotential features for future versions:\r\n\r\n- System theme synchronization (prefers-color-scheme)\r\n- Sunrise and sunset based themes (using geolocation)\r\n- Multiple theme presets\r\n- Cookie-based persistence\r\n- Animation support for theme transitions\r\n\r\n---\r\n\r\nBuilt with ❤️ for the React community\r\n","readmeFilename":"README.md"}