{"_id":"@chakra-xui/color-mode","_rev":"1-8668d3e59a8b4455b06d80a02acbc71e","name":"@chakra-xui/color-mode","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.2":{"name":"@chakra-xui/color-mode","version":"1.0.2","description":"React component and hooks for handling light and dark mode.","keywords":["react","theming","ui","light mode","use dark mode","dark mode","color mode","hook","color scheme","media query","chakra xui"],"sideEffects":false,"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"homepage":"https://github.com/chakra-xui/chakra-xui#readme","license":"MIT","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/types/index.d.ts","typings":"dist/types/index.d.ts","exports":{".":{"require":"./dist/cjs/index.js","default":"./dist/esm/index.js"}},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-xui/chakra-xui.git"},"bugs":{"url":"https://github.com/chakra-xui/chakra-xui/issues"},"scripts":{"prebuild":"rimraf dist","start":"nodemon --watch src --exec yarn build -e ts,tsx","build":"concurrently yarn:build:*","test":"jest --env=jsdom --passWithNoTests","lint":"concurrently yarn:lint:*","version":"yarn build","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types","test:cov":"yarn test --coverage","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","lint:types":"tsc --noEmit"},"dependencies":{"@chakra-xui/hooks":"1.0.2","@chakra-xui/utils":"1.0.2"},"peerDependencies":{"react":"16.x || 17.x"},"devDependencies":{"react":"^17.0.1"},"_id":"@chakra-xui/color-mode@1.0.2","_nodeVersion":"12.20.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-EQDaarTM/1LZJkCfw73xVm4CxrtZS0g1lObFl2zG47S76xI1Oa/IcGW4UbDJqneEcRir52ftuXG4JO9vXfVh1A==","shasum":"5c685249556f196157cf98117967d4306a806754","tarball":"https://registry.npmjs.org/@chakra-xui/color-mode/-/color-mode-1.0.2.tgz","fileCount":28,"unpackedSize":75198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf5JbUCRA9TVsSAnZWagAAXCcP/jk/Sd4IT76mzWHPPyYa\nfj/0lj8aF932WJBmsG8cE7a0xUCbwyhb1DRuYXTFjBWApml9rsC2qnWwaFPj\n+45GwX4wrFX5DHehAzHl3u1fv0gAlYjdC9wHDdf4xhRRSbPSphRTJ6LLLLS5\np/vO0etC4Wv5Yf4S8WVJxbp20jUPa/8CEyWjdi3HT2Cb0JNcvBrqdjJrjcGm\naA7NXu07K0skp+4ojFbFbIIv+8JfL8NXJYPZgBqk4CGPHeSdT66Hxagvc7jX\nwPsRDrXFC0bzMIsNW/yu2qcCDn/FMjCYYdo3mYC5i5h+iztg/gCgXxGksQcd\nEx18iBy9GekhAim7DgNRCYhoScfN+EpGDVI4C26PRVNAkUx+aMOhAb9Qq+47\n6cExpqoTzh+k88N2cPYUa8SVPX4YZ3g1uhNT4VeNdxfi/2mJ0rfgnkaCJLRz\nO1YPv/vkt9lrgierAkFH9qDTSVmPjD1YNSFM/euf2HiDro92eObHhn/9JPva\nVT1YI6zoF62VusCDBch4a8Wlp0i4Z0WFu1jQ74A3gF/0yH406n2M6gKfusSE\nVCDmsEQBu9x0isyxHHxkeZH5RGH1gEiBUGKj0K56V5GQDL9ekudfYptTuzW+\n9HOEXUSTG8qcrYFmrv1O++Ct15llUr3cFSQ9gtAOR1q5zYei6v17FaNGRIAr\ntQfQ\r\n=VtiZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwNJWTxVPptzjteirGrcisVmFeCqQLdCSci6QQ72oXYAIhAP/j+7wWse/AyNu4xFbanIikOMzP5AFe+aposkpIYUW2"}]},"_npmUser":{"name":"meabed","email":"mo.meabed@gmail.com"},"directories":{},"maintainers":[{"name":"meabed","email":"mo.meabed@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/color-mode_1.0.2_1608816339696_0.6204311203161699"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-24T13:25:39.437Z","1.0.2":"2020-12-24T13:25:39.810Z","modified":"2022-04-04T22:29:04.504Z"},"maintainers":[{"name":"meabed","email":"mo.meabed@gmail.com"}],"description":"React component and hooks for handling light and dark mode.","homepage":"https://github.com/chakra-xui/chakra-xui#readme","keywords":["react","theming","ui","light mode","use dark mode","dark mode","color mode","hook","color scheme","media query","chakra xui"],"repository":{"type":"git","url":"git+https://github.com/chakra-xui/chakra-xui.git"},"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"bugs":{"url":"https://github.com/chakra-xui/chakra-xui/issues"},"license":"MIT","readme":"# Color Mode\n\nReact component that adds support for light mode and dark mode using\n`localStorage` and `matchMedia`.\n\n## Installation\n\n```sh\nyarn add @chakra-xui/color-mode\n\n# or\n\nnpm i @chakra-xui/color-mode\n```\n\n## Import component\n\nTo enable this behavior within your apps, wrap your application in a\n`ColorModeProvider` below the `ThemeProvider`\n\n```jsx live=false\nimport * as React from \"react\"\nimport { ColorModeProvider } from \"@chakra-xui/color-mode\"\nimport theme from \"./theme\"\n\nfunction App({ children }) {\n  return (\n    <ThemeProvider theme={theme}>\n      <ColorModeProvider>{children}</ColorModeProvider>\n    </ThemeProvider>\n  )\n}\n```\n\nThen you can use the hook `useColorMode` within your application.\n\n```jsx\nfunction Example() {\n  const { colorMode, toggleColorMode } = useColorMode()\n  return (\n    <header>\n      <Button onClick={toggleColorMode}>\n        Toggle {colorMode === \"light\" ? \"Dark\" : \"Light\"}\n      </Button>\n    </header>\n  )\n}\n```\n","readmeFilename":"README.md"}