{"_id":"@a1knla/react-dark-mode","_rev":"4-3a22ce46ee0a44b9b87282d37daad7f9","name":"@a1knla/react-dark-mode","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@a1knla/react-dark-mode","version":"1.0.0","description":"Wraps system dark mode in a React hook.","main":"index.js","author":{"name":"a1knla"},"license":"MIT","dependencies":{"react":"^18.2.0"},"_id":"@a1knla/react-dark-mode@1.0.0","dist":{"shasum":"207f234546973d2f3d9a845ac637d48d8d0b3d09","integrity":"sha512-zVWWKRf1eR1qRC8TgqBOaqBs8myL5dlyKbCSa9tPO30XYosmTHmeV1N1cSkA9plq5KL77s/Lvja/b9hk76/7ZA==","tarball":"https://registry.npmjs.org/@a1knla/react-dark-mode/-/react-dark-mode-1.0.0.tgz","fileCount":4,"unpackedSize":2892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpgbNmMd/l0QkDHGHY58fv7tpZrSsCzUbsYYnpkuQLiQIgEn4SI8xSS34HI29lkyDDvN0oN8PObspZq9sZ1d9EWRk="}]},"_npmUser":{"name":"a1knla","email":"l2a1knla@gmail.com"},"directories":{},"maintainers":[{"name":"a1knla","email":"l2a1knla@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-dark-mode_1.0.0_1709091585679_0.1098998767908661"},"_hasShrinkwrap":false},"1.0.1":{"name":"@a1knla/react-dark-mode","version":"1.0.1","description":"Wraps system dark mode in a React hook.","main":"index.js","author":{"name":"a1knla"},"license":"MIT","keywords":["react","dark mode","system dark mode","mui","joyui"],"dependencies":{"react":"^18.2.0"},"_id":"@a1knla/react-dark-mode@1.0.1","dist":{"shasum":"03c28b1118e5f817a580dc8c956c1d40cab5170f","integrity":"sha512-Ez08Dk5h/GyDi/YupM/bXNJ5rcr0ANBawSBV+sU6NaLsw4OnEbhMPtqQZ8/epWu0julDEg5hqQks7qdSwaju8Q==","tarball":"https://registry.npmjs.org/@a1knla/react-dark-mode/-/react-dark-mode-1.0.1.tgz","fileCount":5,"unpackedSize":5129,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICZ4kPBwHLaHPBP74Chx0oz/xAuW6uJ5UCKs1b6jufHMAiBbXfSnulQnjhHPXh1k+nAPImXwljmVEpxRfkPmAwTMAg=="}]},"_npmUser":{"name":"a1knla","email":"l2a1knla@gmail.com"},"directories":{},"maintainers":[{"name":"a1knla","email":"l2a1knla@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-dark-mode_1.0.1_1709093026907_0.5911807800867288"},"_hasShrinkwrap":false},"1.0.2":{"name":"@a1knla/react-dark-mode","version":"1.0.2","description":"Wraps system dark mode in a React hook.","main":"index.js","author":{"name":"a1knla"},"license":"MIT","keywords":["react","dark mode","system dark mode","mui","joyui"],"dependencies":{"react":"^18.2.0"},"_id":"@a1knla/react-dark-mode@1.0.2","dist":{"shasum":"ce8b79568a4fbb1d5f3b72521b2d91443be74733","integrity":"sha512-TJKNV59nUVHxnvXi+m5V/pbPaoapp3cht/gUub0SWdO5gLyBLaOIOWNkZrBHUlY54m5IK4ScUBpXvBQqKMv4/A==","tarball":"https://registry.npmjs.org/@a1knla/react-dark-mode/-/react-dark-mode-1.0.2.tgz","fileCount":5,"unpackedSize":5086,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbV3GVmnGOK1UhJjkZNVJf5/PCvTx6Lav0+5zLECjkEwIgXn6FInjEB5OiH/eRYVNsX3uLz27/sCHdrFxABFCZmIQ="}]},"_npmUser":{"name":"a1knla","email":"l2a1knla@gmail.com"},"directories":{},"maintainers":[{"name":"a1knla","email":"l2a1knla@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-dark-mode_1.0.2_1709765662737_0.10850063860029713"},"_hasShrinkwrap":false},"1.0.3":{"name":"@a1knla/react-dark-mode","version":"1.0.3","description":"Wraps system dark mode in a React hook.","main":"index.js","author":{"name":"a1knla"},"license":"MIT","keywords":["react","dark mode","system dark mode","mui","joyui"],"dependencies":{"react":"^18.2.0"},"_id":"@a1knla/react-dark-mode@1.0.3","dist":{"shasum":"9cf4f460a074f09ef5749157b650c3b313cf6a6c","integrity":"sha512-MgkaI0A5wvazdPJnutSruaM3tz19+AFvuY27hCz+C6a1NfHO93fwADLd2fNwvBr3ny4s+tXa3mRngcqxhtLxhg==","tarball":"https://registry.npmjs.org/@a1knla/react-dark-mode/-/react-dark-mode-1.0.3.tgz","fileCount":5,"unpackedSize":5101,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3jL9nVELzqHgU4MbNaZij5T9a4/ShdFB01JP/tX2rKwIhANgck9CxUIBn2Tig2yPaxcIydPgFcD+AVOl2xaWLwpzp"}]},"_npmUser":{"name":"a1knla","email":"l2a1knla@gmail.com"},"directories":{},"maintainers":[{"name":"a1knla","email":"l2a1knla@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-dark-mode_1.0.3_1709780141002_0.7830594670244577"},"_hasShrinkwrap":false},"1.0.4":{"name":"@a1knla/react-dark-mode","version":"1.0.4","description":"Wraps system dark mode in a React hook.","main":"index.js","author":{"name":"a1knla"},"license":"MIT","keywords":["react","dark mode","system dark mode","mui","joyui"],"dependencies":{"react":"^18.2.0"},"_id":"@a1knla/react-dark-mode@1.0.4","dist":{"shasum":"a61b0aa4a53cee092187049b46d9ade15d15a8b4","integrity":"sha512-9zoOnzasETT1zzvbpFMqpY6U3d7/Rl4Ynvg4E1XTomN3FxaUTeWvS5ENr0Bcx5yt8BPGnm4plAbxkJLmFgAKPA==","tarball":"https://registry.npmjs.org/@a1knla/react-dark-mode/-/react-dark-mode-1.0.4.tgz","fileCount":5,"unpackedSize":5125,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH0FT6vKU3ES2q1xnlXr7Om6a9J2Hz/WgafG7GobifUBAiEAny755xuvWHcaPcjP77FR1klBBRcZctjYTQde/oBZRLI="}]},"_npmUser":{"name":"a1knla","email":"l2a1knla@gmail.com"},"directories":{},"maintainers":[{"name":"a1knla","email":"l2a1knla@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-dark-mode_1.0.4_1709878102327_0.12715037762199244"},"_hasShrinkwrap":false}},"time":{"created":"2024-02-28T03:39:45.599Z","1.0.0":"2024-02-28T03:39:45.842Z","modified":"2024-03-08T06:08:22.855Z","1.0.1":"2024-02-28T04:03:47.126Z","1.0.2":"2024-03-06T22:54:22.967Z","1.0.3":"2024-03-07T02:55:41.146Z","1.0.4":"2024-03-08T06:08:22.457Z"},"maintainers":[{"name":"a1knla","email":"l2a1knla@gmail.com"}],"description":"Wraps system dark mode in a React hook.","author":{"name":"a1knla"},"license":"MIT","readme":"# React Dark Mode\n\n![Typescript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)\n![Typescript](https://img.shields.io/badge/JavaScript-f7df1e?style=for-the-badge&logo=javascript&logoColor=white)\n\nWraps system dark mode in a React hook. Make dark mode integration as simple as it should be!\n\n## Hook\n\n`useDarkMode` is the only exported function of this package and this is how you use it:\n\n```tsx\nimport { useDarkMode } from \"@a1knla/react-dark-mode\"\n\nexport default function MyComponent() {\n    const isDarkMode = useDarkMode()\n\n    return (\n        <>\n            Current mode: {isDarkMode ? \"dark\" : \"light\"}. Try changing your system\n            settings and this will update automatically.\n        </>\n    )\n}\n```\n\n## Sync MUI/JoyUI's dark mode with system\n\nMUI and JoyUI have their own dark mode systems. Now you can sync them with the system dark mode:\n\n```tsx\nimport { useColorScheme } from \"@mui/joy\"\nimport { useDarkMode } from \"@a1knla/react-dark-mode\"\n\nfunction syncMuiWithSystemDarkMode() {\n    const isDarkMode = useDarkMode()\n    const { setMode } = useColorScheme()\n\n    useEffect(() => {\n        setMode(isDarkMode ? \"dark\" : \"light\")\n    }, [isDarkMode, setMode])\n}\n\nfunction App() {\n    syncMuiJoyUiWithSystemDarkMode()\n\n    // Your app code...\n}\n```\n\n## Doc\n\nGood code documents itself:\n\n```ts\nexport type DarkModeProps = {\n    /**\n     * Whether to detect system dark mode. Defaults to `true`.\n     */\n    detectSystemDarkMode?: boolean\n\n    /**\n     * Whether to automatically set dark mode according to local time. Defaults to `false`, and 18:00 - 6:00 is considered as night time.\n     */\n    detectTimeBasedDarkMode?: boolean\n\n    /**\n     * The interval to detect time based dark mode. Defaults to `1000`.\n     */\n    timeDetectionIntervalMillis?: number\n\n    /**\n     * Custom predicate to determine whether it's night time.\n     */\n    customNightTimePredicate?: () => boolean\n}\n\nexport function useDarkMode(props?: DarkModeProps): boolean\n```\n","readmeFilename":"README.md","keywords":["react","dark mode","system dark mode","mui","joyui"]}