{"_id":"use-dark-mode","_rev":"24-a964f9df7fb1a7f7332e91f8b3964520","name":"use-dark-mode","dist-tags":{"latest":"2.3.1","next":"2.3.0-alpha.7"},"versions":{"0.0.0":{"name":"use-dark-mode","version":"0.0.0","description":"","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"MIT","_id":"use-dark-mode@0.0.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"donavon","email":"github@donavon.com"},"dist":{"integrity":"sha512-2quZj85xAEuZPKcu7YhUqvjQYg9O4yfBcyOiB9K45Nq/I1BUvoXspV2vlIu43XzgFIiVjVp0Nbw3ygMj9mTBjA==","shasum":"6992b7b31013babd52e2b253b97a2d4904fc0c43","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-0.0.0.tgz","fileCount":1,"unpackedSize":209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcO3+MCRA9TVsSAnZWagAA/1MP/j3eWgBBPT1MzOijSUmq\nnEZtRFyHL15WnvhKuD/eJetMJVkwQ+SLTR9Yk5PWp3uxtdrhwNyJ/xdeGDoN\n4g1z94ZadOn5RJgAs3dPZ412xh5tQXsmWY71kOw8V3j9DK/3XScEj2iaFSvL\nKUBsJ4hRpd9dyWWRz0HNKPUIe8J63dTb9ZYk3ve3KE+I8VZtrKQdvf8f+6cd\nI4/kNqyVuU7IrRPs7wJ5TGpoWZS+ysUoJSDrlflJepQ3MtZQozPI4ogRqyaL\nYyBKgvhfCh9kD4oS5+4u+0DiTXPfY8hIPuI2vIWOqINVtMELGJl7Urb6TJR/\ng85pX/XQdHAK1ds7GaxetZBoAlKdCoUhXE/ZPGNuNZHVANYjAVZtIUZrdSkv\n+O+ZBDUHM4Bo4II3uHCg9tVlMox6a4wJT83KFNEbZrV2p/m7+XnhBThiWBHm\n3cEqRZi2zue5bTQ9BlDLee0izo2XENtqI5vd8fhLL88MLI3f8zdxVCiwQCQk\nwJPhmjWu/GJnqPd/TXCkJC2zOO8TGwwbSRUK8u9RlP5XcqYG1zvFrvuDaq4x\nNeY6KPdy5bXcewtFQggjWJhhX1HSYPx3n/xBC8YvjQXARFD17vjF4bw2foca\nIKPu3rhQdqYAsvajMtTdgxBBDk0VpVUPXbUCOvgsqmIUZuG+8Oc5NDRuofuQ\nGwZ1\r\n=hJmS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqlVfIvWvzYmQbJpm2YaTw8qE81mvjOuMpKcn5fNNFpwIgdlYoenL82BbH4z8eWkmwhnAxxUJi5S0G681nVKhuF/Y="}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_0.0.0_1547403147635_0.3863883213389776"},"_hasShrinkwrap":false},"0.0.1":{"name":"use-dark-mode","version":"0.0.1","description":"A custom React Hook to help you implement a dark mode component.","main":"dist/use-dark-mode.js","umd:main":"dist/use-dark-mode.umd.js","module":"dist/use-dark-mode.m.js","source":"src/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"author":{"name":"donavon"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"16.8.0-alpha.0","react-dom":"16.8.0-alpha.0","react-testing-library":"^5.4.2","rimraf":"^2.6.2"},"peerDependencies":{"react":"16.8.0-alpha.0"},"bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"},"homepage":"https://github.com/donavon/use-dark-mode#readme","_id":"use-dark-mode@0.0.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"donavon","email":"github@donavon.com"},"dist":{"integrity":"sha512-hTGHt3IpvTi1lQ1Ljd53KneUUlVHT28aU6wAR4HgPKObV39QwvNR9rmLOtCoBXsI1ieaI9X0ZBJU9irqIoiOfQ==","shasum":"aa7303e8229583713836b452601d0910ed4eb16c","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-0.0.1.tgz","fileCount":5,"unpackedSize":3906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcO6fHCRA9TVsSAnZWagAAX10P/0s/AD6vqJ9cpei2TyaA\nw4yJ01laIWsS6saptSeG1IMQ2c/Yr9akMzlHKFQ5/5agSUd7M3ujO277pozB\nIeS8/FMjF0gE7OOerwNIHWu70o+/Cp9m3eagHeng4KMfN9QG8iyYU19diuMW\nhHlnkOMngUPA6bCbVlPXkNUSIXt+06fKscxoVngafHKUB1MJfVPEiAyDfaJG\nd4A5tf6gZh4PflxW7supzSgJvgL1KeNQcz/52aFIRGIaR8muOWrcY9f2yiFK\nOojIQ2+O3qBGUxrTkg9IkOyHKoIYev4tuBuiO2YTHNaqDEA+/vEwEAPFHlPy\n87OVtiCy3W3P/vxxt1kQdPBd733htODlTn5aNtxsrkYCsw0umXtOX6Lg8dxX\niOdhqKJpGiAdmC3nu1h5Y1JJqYlVnsu9yXwkQS7rqPkeGZUN4Z0+BZWX7yBI\nGO2pqYQ3Q3Z1Glk96zUKpALS7KEo7kXh9TnBsTsnhl9mryaDOHsK6T05J7FD\nG2XFC0tLX2cj+qvH9YpMTF4ajKfhfckko+7174TYYmo+Q43kdaC79SRvko2r\nPFIAxIyw+AAETm+maRCBTeumr0dDpl1nUeWFWQJ99VOHLlvTcuBa3z4lZBbA\n3XVUDwlVTcsfbNA9ho8b3zaOEYZu+oYyE8lnxT8U8x/bDJVsYX+jyUPqx12q\nVjHL\r\n=Cjv4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHI6JltgRR/n0AUfQTWJtaPdf66W+QnbyZJZp44HQgqQIhALdfJ/WfiA+sXGSmaMP6NQE9ToFU8pj4kCFd0pkNQBca"}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_0.0.1_1547413446553_0.2846646379228661"},"_hasShrinkwrap":false},"0.0.2":{"name":"use-dark-mode","version":"0.0.2","description":"A custom React Hook to help you implement a \"dark mode\" component.","main":"dist/use-dark-mode.js","umd:main":"dist/use-dark-mode.umd.js","module":"dist/use-dark-mode.m.js","source":"src/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"author":{"name":"donavon"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"16.8.0-alpha.0","react-dom":"16.8.0-alpha.0","react-testing-library":"^5.4.2","rimraf":"^2.6.2"},"peerDependencies":{"react":"16.8.0-alpha.0"},"gitHead":"df829510dd13790fb6908224c537af1c9167baa4","bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"},"homepage":"https://github.com/donavon/use-dark-mode#readme","_id":"use-dark-mode@0.0.2","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"donavon","email":"github@donavon.com"},"dist":{"integrity":"sha512-Km8IpdluMitXikDr4hsnZe3aQ4Yqvqc+I+4re1wg22AvObzY8Eouv7GribhfGmu8V8N7Fxqlgo2EQN9W/Syc7w==","shasum":"6c47c4c2bb7cf47dfbfbec98d6d21bb6f4494442","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-0.0.2.tgz","fileCount":6,"unpackedSize":8929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPK7HCRA9TVsSAnZWagAAgswQAJZLBFUDWdUi2pg95tUN\nLWlLgkcP6KiAq1ny7ae1S24v5itIIyvjZi+RbKHdGuwmopeGWhdPxRJQh7qj\n5n0bNGnPFpCCl4ug6jnBaS7fhL5lsNAcnD/TBw59QXMPgYjTtxwVvRTXMYIN\nQxqC1twQ4uZc/62QDHpP62ScyBT5xL6VUwnUU6qnzCZj7EpvoIs2MvlhCJ7a\nu2xyvWUpmwCAQUacKNKW2WddYG5ancooCo7PmmIoptoHF7nM6VIcE9xh7ZSF\nEakmdcBRoCeZOyx1ghZvOd8UNg/oDrL8j1rvowwogeYqPIux4Oed1KeKgM6A\n1Df8dQT0o6RgaUGROtrf27MOyAnXMR+LtfKWuOa3ipiCmF4q9Sel+/Xw0m2g\nmJWsyvyXdZBB/3rmosaMf2Gf+j1Cymw3BR5H7iRfAn4gO8zZPHzFT2B/qdlL\nu15e9cCpA4mInjWmlxYacqdJ5204FNOWxfySX3KRVskZGYWF2QxjOr+mp9ge\nZFp0RyO1lGprs9G5nRvhdl1sPxHXhqbaPoYtFZvYrUNLKh0Wa/gmnk8/PjWI\noIDbU0MN4KBEnIBDbWWwUsrZ43Ev9EDmPlV54kcUGSIhuxSakL26BCqcu71E\nlWLiJYvGjXpA90zjyOhS5x9eGQOLvtS3vPshqDcmqH855ZLusKp5ffC/DekI\nEGlc\r\n=4xua\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEjSDzSksiC6Le54VGx9A3V6UciLHcl4ZZXR3Rak21F2AiEA7djFl82e66SMGRGn9kRGZDcLGVEdFcVjeHBa3fX1RSQ="}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_0.0.2_1547480775412_0.20946482721232607"},"_hasShrinkwrap":false},"0.1.0":{"name":"use-dark-mode","version":"0.1.0","description":"A custom React Hook to help you implement a \"dark mode\" component.","main":"dist/use-dark-mode.js","umd:main":"dist/use-dark-mode.umd.js","module":"dist/use-dark-mode.m.js","source":"src/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"author":{"name":"donavon"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"16.8.0-alpha.0","react-dom":"16.8.0-alpha.0","react-testing-library":"^5.4.2","rimraf":"^2.6.2"},"peerDependencies":{"react":"16.8.0-alpha.0"},"gitHead":"0978e758bb873a29b975b4adfe2c16d491a67964","bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"},"homepage":"https://github.com/donavon/use-dark-mode#readme","_id":"use-dark-mode@0.1.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"donavon","email":"github@donavon.com"},"dist":{"integrity":"sha512-RbaWPI4Y3+/Vk3fQireqVep7wifDov16dUHgaZST1BEOpx+cm/3IVUMpcZtxqNG8iIHi8eqGZgCXj6uVdtpkgw==","shasum":"47269e21384db7fe77fe3ce8ae7b3bffea25d873","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-0.1.0.tgz","fileCount":6,"unpackedSize":9048,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPWRdCRA9TVsSAnZWagAAPnoQAIsWM+kebB8GzMKv7jDm\nFdrB8hkilfVZAu8+FTaIg6UIZAN+QtRR3bl70zkzc71CyKHf0oKq3Cr1noK1\n6eC3BKMwFtdZu3NNVj5R8K+oHwIiLA95qKGeVUllMfWhHTP82Ju0G5sBkj2x\nkCqRTB0zDZ9bimoBeBwhNDS4KdEmFHmRz2v44/W7Ki3qDTnKoA3CfL7phH5b\nHLu1MFqQzqql8KwsvFV9i79UhKcDOwW3puHCXwPi6AN6c8p00LqX2gXzu9hF\nEbgBwLLmeOsBw55e3dZrqqjYjLpnZmiiuGafEqb2K7paYGoL43+8Q1PkaBqj\nGO/uktX51XCxiEvBbMuYnGM5pAc9HmSF03cMDGtNWslm8tDb5GGWCPPbNrrL\ntNf+uHjN7wDuOkHsctpH8nRKAAPHYl76OBm/k/vQ0qlrNyS3fHs11VwMZgh6\n8fdSve2RNp9oUWidjB/xvM4QzdX33N4+xyhLSAoyV0fKcE83ms7Ful6XalB2\nCPvLVAdCEwvd5j9hsFaEnqMXM8S0fdQQ9CITLn0W3EhDUEJ3mTBZtDxny8Q9\nOPCCHVRIZEH7zS2n52taQ6ImFj2MZd0foRXq35oS17cZ/RNR3b+P3CCd9nLP\n4DgiNgPKe24LK0+cVnP1vogIwVOoJB+i5pfAI3fTM9k/RQ+CMkPUcdrpEFou\nnovy\r\n=OIHE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRq5kF7r6WY/1QydCkGuHpeeFFFr4WHICfFt/i2uhG/QIhAJ2yTvjmN9JWYQSp5+w1YcFSrQfClFwIGuTjbKCzWoe1"}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_0.1.0_1547527260412_0.09340077861533747"},"_hasShrinkwrap":false},"1.0.0":{"name":"use-dark-mode","version":"1.0.0","description":"A custom React Hook to help you implement a \"dark mode\" component.","main":"dist/use-dark-mode.js","umd:main":"dist/use-dark-mode.umd.js","module":"dist/use-dark-mode.m.js","source":"src/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"author":{"name":"donavon"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"^16.8.0","react-dom":"^16.8.0","react-testing-library":"^5.5.0","rimraf":"^2.6.2"},"peerDependencies":{"react":"16.8.0"},"jest":{"coverageThreshold":{"global":{"branches":100,"functions":100,"lines":100,"statements":100}}},"gitHead":"f582e7647728daf21ecbe345524a6d02af895c6c","bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"},"homepage":"https://github.com/donavon/use-dark-mode#readme","_id":"use-dark-mode@1.0.0","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-8c9rTOkYqtzI0SeNT0/KZuXoiG2g08kXbfixyzQOoK7q06sxEFy/MWSpnhK/zyXdb8X4n/8bxw6PAMQZWrnkOg==","shasum":"e0f8c176d1a011a259186de1ac06171cbdb84c34","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-1.0.0.tgz","fileCount":6,"unpackedSize":9139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWx00CRA9TVsSAnZWagAAd6sP/0qTUe+ov1HhLoXgwCby\nsSF9z7G672AoZD2kH4ONQcwWl8H2U5fSM4g0STAJaWX1V4Voh+JHbqFQm2lb\ncmsjVqYLBc/TVUbiKWRJSzxTd6o2lHXfMT4JWMzasw9joxhL91zO5P1ciSgL\n9QTSYk0n5I/pxqrq64REo5VqZ6zKSO1hdEYj6IP5ztW9l268f2eptjigA+6/\nchrDyu5NbbmCB3sPDtelu9etkFKjxFsi+je/XBGNFTQAjdHeYUuANDO6dZ9f\n3DE/MCBei1f3v4rO2vxpFGwvwjN9GGp2UxELd44OxWLfU+EZuXjXeJepS1nd\n0HhhnSUXHB65hV+Z022UWoSzyNB1Qrt2JwClI7nyjGTBw42yhbBBnn9CXJYj\n8VeRbHXEqEp4B3c/bJ+QVGCpyAQHribk4YA4LlRfVs3emPUen4bnQxuuChVs\njfbA3W+QXjxGtQ1HZP3kQ5ItskWUCc/6kHPtc4KC2xjl/uyk8OupgaiAx04I\nteAPt2Mjs0QXxN8gJsYNx4mbVA5PkXXkGDg8LYDjBrCq0lmCDBrJC4lXW3cD\nEtr3qt2YWKnG+G3yIPAioxPguc3UlouNK8yYj+l9KO5/OhVXW+mDAkjE6gMm\nnAHW5UjhVL/mBLLe45tSb0l1XDPPVVs8Zid9BfMve578RVCqOWpruCFp7bnH\nFWp4\r\n=rJPW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC6ysAxgd/lGA01ji9NVFOxK+My5pLR6HtsICjguVf8sAiBCoqqgIS5qRY52gbuCrUSYmHE3958tZ3jWlDT/M1Tlnw=="}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"_npmUser":{"name":"donavon","email":"github@donavon.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_1.0.0_1549475123762_0.6112650244939373"},"_hasShrinkwrap":false},"2.0.0":{"name":"use-dark-mode","version":"2.0.0","description":"A custom React Hook to help you implement a \"dark mode\" component.","main":"dist/use-dark-mode.js","umd:main":"dist/use-dark-mode.umd.js","module":"dist/use-dark-mode.m.js","source":"src/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"author":{"name":"donavon"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"^16.8.0","react-dom":"^16.8.0","react-testing-library":"^5.5.0","rimraf":"^2.6.2"},"peerDependencies":{"react":"16.8.0"},"jest":{"coverageThreshold":{"global":{"branches":0,"functions":0,"lines":0,"statements":0}}},"dependencies":{"use-persisted-state":"^0.1.0"},"gitHead":"7085ebeb1d63722424efb37e231b28ef8afeb4e8","bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"},"homepage":"https://github.com/donavon/use-dark-mode#readme","_id":"use-dark-mode@2.0.0","_npmVersion":"6.5.0","_nodeVersion":"11.9.0","_npmUser":{"name":"donavon","email":"github@donavon.com"},"dist":{"integrity":"sha512-IvIejITK5CM+GS1JunTrLQAzE+HMH868BgIrq5GawddcIppNzcb+5KbLLaCYvSINYc8DrvFMNugc6wqilCrmtA==","shasum":"da75c701380fe4ca5bec9b1ed14c891502c2ca22","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-2.0.0.tgz","fileCount":6,"unpackedSize":11151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXMptCRA9TVsSAnZWagAAUzUP/0ozmeUwQG0j8VKyWPAt\nIqN57uaq1IPgkICclyuVxbAtb9Ei2kDs2A5TO1359zcXsY97jbnXffAlXyCy\n54g1NeburL6+ty6C8+fTAEKCmHlXqt2/5BFIiSJFRKswZvE8bYbZGmmCOEtO\nr3eTEOvViuYSrSkCm+pBF9+qlxYojyAMghVVL7i5QKjaRGc9WT+tQgXmB7mt\nfB1exqjkPSxDWUr202hm2AECVxQiP/FtEv8ief8LmiMFZjyi1kPMNhXR+OgA\nG7BV8ZkB1ejVF2PaRoXfDhFnSr1tpLYmZM0lKaZFOYKGASlvtEKs5kdqMd7V\nkGOV+od1V3FkE93PDasI14SawGfnXErO0ietUxTbWmz/19rCbQA7g0x36tZq\nW7+Wc8JjSsWGSn2X2ojtSrivfy+OoMWvU5SZE7he4HiLuDzthWBaZHSQn1OT\ntblo9/UCDguPAhaxe2WI+FEektUEQyd1bHgR0na6dv08BYdUBNP3Ck+9K3IE\n4dQkPQvTHEhymq1GFXyBTLM5z0oc7S9YAXasxIv+AMu6Uf2/m5z6iloJhbq9\nzME7Os0FmfjmJyPuqvEx3UfdgswldwUE9J9wzoyoJtVRW3WRR6uqVH0XgNc5\ntXADvx80wXA/VyEsjY0v83eDXShRNJfDoGEWZ6XdWcP1s1sgkTFOca1wjBs4\nQWfZ\r\n=fBYJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID+JkqqOMlnyH39MiwdjY4ejyAugOcTi2f7GPLtaKnyZAiEA+2ZiT33VyV9WLqq67iH7xMPW7Dw1wNy1HuOndI5FlMQ="}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_2.0.0_1549585004977_0.6342350549230171"},"_hasShrinkwrap":false},"2.1.0":{"name":"use-dark-mode","version":"2.1.0","description":"A custom React Hook to help you implement a \"dark mode\" component.","main":"dist/use-dark-mode.js","umd:main":"dist/use-dark-mode.umd.js","module":"dist/use-dark-mode.m.js","source":"src/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"author":{"name":"donavon"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"^16.8.0","react-dom":"^16.8.0","react-testing-library":"^5.5.0","rimraf":"^2.6.2"},"peerDependencies":{"react":"16.8.0"},"jest":{"coverageThreshold":{"global":{"branches":0,"functions":0,"lines":0,"statements":0}}},"dependencies":{"use-persisted-state":"^0.1.0"},"gitHead":"6ba26ffdb414a19a9bfd67d0f984a894d5633c0a","bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"},"homepage":"https://github.com/donavon/use-dark-mode#readme","_id":"use-dark-mode@2.1.0","_npmVersion":"6.5.0","_nodeVersion":"11.9.0","_npmUser":{"name":"donavon","email":"github@donavon.com"},"dist":{"integrity":"sha512-T/u5lLDuPxL7+vqmJR1Bg+v8HajRRqRNrVqVl0Jck+yKieAZNaL6VAe5S3AyRDiZ0yfB1pyVgm4cYl2SFcyQ1w==","shasum":"3021e450d0a24da832362ea7532f7a804aac36bb","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-2.1.0.tgz","fileCount":7,"unpackedSize":13720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXbhICRA9TVsSAnZWagAA7W4P/in5fj+OdjtIuIxcQs9I\no/U1X9UW4Lc5Zcqmuv1ekcgVwWm4vf5uKjuPSPtCgQh/59O+zUJB+8lGGwku\nVAz/bsAUnIuRNQw6uFOdYtoC+QzR85xd2sAAb6w5JNTF0ISmkkeCIp2ONWHZ\nyxEjpkFeVDf56z95j0WqAPN57Ocz/W9zPcM9RLlZf9LSszsRlVkY67D3/eiK\nQLpVT3S3DdtfH3Awwu3zCuP1e1s3w/iDnSpbqIniHuYWUexDIqLFUPn+yaRF\nTTm1hwuBdbr3MkHhtZrvRScek6GNc2lj1ppMBzfDzTvxJVOSUmmmexl6n2za\nepCDvQ2XjHdYogOu/8Cxpfnz8gKhCN6lD7PtSTgqeqePRCFt2sAedKOeaTaK\nxCP8kwIpn8OXJHQ/US+z/FO38IiZbVqIvKqcLZknyLkFdxCR2hgKFjTeKl8c\ntNHjF6qa13bh4GB0JLVXu75X9jCimqozzbhPVaPsEr9Ao2If3vrJaSVAtzx+\nb06silszvos5QXBzABIvTxyB1Mk04ANZiIwSrw1iqlzp+cCv5gJghS1Bv9BS\n0lx/tJ0fz/rUu3ymjPKGFGhAS7Z0tk7rhGEfqKuU3TtNyQLWj2Ui9QdEbzVA\n0+eO5YMMAhJZeTH1trX0idttfnyoxjZM/VdhQGN+OezjfZu/Lms6dfDQ1Khk\n2ctn\r\n=+ze8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAZk4vum2ZAxWrGvlV0rwim9H9iBdh0H7CThlPnWG5AMAiEAhsyTPgt9ga1bspwAyUuNaZHZIJL1BNo0ZeDjsDBb/54="}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_2.1.0_1549645896258_0.970524229374492"},"_hasShrinkwrap":false},"2.1.1":{"name":"use-dark-mode","version":"2.1.1","description":"A custom React Hook to help you implement a \"dark mode\" component.","main":"dist/use-dark-mode.js","umd:main":"dist/use-dark-mode.umd.js","module":"dist/use-dark-mode.m.js","source":"src/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"author":{"name":"donavon"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"^16.8.0","react-dom":"^16.8.0","react-testing-library":"^5.5.0","rimraf":"^2.6.2"},"peerDependencies":{"react":"16.8.0"},"jest":{"coverageThreshold":{"global":{"branches":0,"functions":0,"lines":0,"statements":0}}},"dependencies":{"use-persisted-state":"^0.1.0"},"gitHead":"0f46e9eff0e10826685ea500df988eba62782848","bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"},"homepage":"https://github.com/donavon/use-dark-mode#readme","_id":"use-dark-mode@2.1.1","_npmVersion":"6.5.0","_nodeVersion":"11.9.0","_npmUser":{"name":"donavon","email":"github@donavon.com"},"dist":{"integrity":"sha512-spPCskXQFKUofIC0QhZFStEsPKKu9BRoARii4aK2v5lLoj9stscduzGIijIFiS1OCZQdH2N4nThqxSInX6+RJA==","shasum":"3d8afa83c4e16be9782f8419d9ccfea414375fba","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-2.1.1.tgz","fileCount":7,"unpackedSize":13750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXeaSCRA9TVsSAnZWagAAFbcP/0IGn43JpXc08hLUTbyD\nEh6AGEhHw9JP2/JgUbDjorM9OW06GtCf1kUQ7xc71MaK4H3O+O2BE+B/nDeN\nIcdLlOegHM6pmQkxRfKo6ALKYbRQFnQuY2K+7sCWrm1ihvyZNZQ+gmP/9EKW\nZu6Fpm7KugjQYPrxE1atl5brPj8/qhovQdbpfogKAOQJmnKuLXxipoM+HWbQ\neyvv1Q13eMU4s8VOVcByDGg52NFoOxMRxIQ8gzgOigp0M0IQ8idbqkHJ1w0V\naNFjmwETW/WvzKhL5jRwonCItPTvHC8DsPrwZO8sh4dZH0HChP6UQaws1zjA\ntyV8m3vFeSOj3vDnUFPC3ZE3Sq11wsejwtFGx8Pwhxa8n3xWwSSZFc7BIori\n1PA85UJ2opphYY4X/PXzkJeuWCA2npEQ6w3bm/1tjS1LbeiXz5R5BnTniW+N\n3DaIaKJoH/TCwIC6q+TlO87JkJWd6IVdmQtjGVs8X+rEfK0vUxBT4QMz5V98\nW429Z7cR8+vn8FlvlEJlNUnYLkIgZVwa2cB5TYdZ8DpGHb73vnOJHmR99Hq6\n3Elxwi/RIOoDKoby+WmvLx8Z+iMwiY4DpcWNErFT6JDAMnZvV156gjiyrxND\noiEmAzyzQLmmELphh1K17feKPPSde7IxzMZ67WY0K3HJA0zFo3CRpwv7zElh\naP8u\r\n=v7mR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDu+R2PaoJeJFoL97t5CbMsKrmsBkG1nmjP8tIb0ukpJQIhAJ/X9djxMgTnaABCa3U2xkyTF7ggooLsLnEoxGcS9rva"}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_2.1.1_1549657745417_0.15040184054254468"},"_hasShrinkwrap":false},"2.1.2":{"name":"use-dark-mode","version":"2.1.2","description":"A custom React Hook to help you implement a \"dark mode\" component.","main":"dist/use-dark-mode.js","umd:main":"dist/use-dark-mode.umd.js","module":"dist/use-dark-mode.m.js","source":"src/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"author":{"name":"donavon"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"^16.8.0","react-dom":"^16.8.0","react-testing-library":"^5.5.0","rimraf":"^2.6.2"},"peerDependencies":{"react":"16.8.0"},"jest":{"coverageThreshold":{"global":{"branches":0,"functions":0,"lines":0,"statements":0}}},"dependencies":{"use-persisted-state":"^0.1.0"},"gitHead":"ad748d3988e58296bc5330633d81df96904f8848","bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"},"homepage":"https://github.com/donavon/use-dark-mode#readme","_id":"use-dark-mode@2.1.2","_npmVersion":"6.5.0","_nodeVersion":"11.9.0","_npmUser":{"name":"donavon","email":"github@donavon.com"},"dist":{"integrity":"sha512-qwKd8mLgEAhFzl7n8x5THdyW9OI63yCRB7zT5PIQMA34SQ8XlyuiFMGnGnGlZB0M5PLSKsG3ROiIdELpXP96yg==","shasum":"afd02bcc9ae82fb67581285fdcba9e3abf646f96","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-2.1.2.tgz","fileCount":8,"unpackedSize":16550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXvv+CRA9TVsSAnZWagAAsBYQAJrAIub/y8qLaUInJlym\nb6wKjoRiMWEpz4gB82gQPrq22jv8nIVBmep2vvFTqv/65XUMxX6os5M2v5Dt\nwESudFIm89JvbGU0RB7llIGSug96vxCHEIG2dNl4/iUAUIWhnlbTXDSzUT8m\nPCpYBO2yPmUhBlpW6RVvZ41csCgpBj9nx1iwEbwJ0XzD62Mi2GavPRLNDKpm\ncAyOBKtSePQhf3Sxi46ok7vGMNtJvZMlm0AslO9lb2/jU6jSXYbE5Nm0M5qV\n7J2C3wrBdiFaqfwGxm4JrjnGxmcjhZtkG40P0IVCTyzsfoMyX2rAzso6OxCy\nuMRPtIUCk7cFPYnIshuKMN5OGSLTPahgEn48gXbFkmMwR6aSEB7Q606fivgz\nnufTosWuRXzyROYyq7nBqsu9GKaGhrEeVc4pz6hjIEiEdwJoI9qq33NpY7cy\njua/cNuYVST9Wl4ipKimr8iMh9pNLawulo54sGNDaEuCjC8IcWHvABi+WPuu\n2tvPaVtea+e2JCF1WksIxNp/Qu9QrZRU3CfP3x/+ydagSlXate6meAW2TTwA\n3Cq5eYAZsilq6hATuWj6Glirf0YAlnz7WnKnG8moTJ9t8pTPtwNrQB5OaMiH\nDIpdbyz7kT2XoTIOOlKUZq069IjVqOAZOcLd3gsE1VlIXLF+AhVVWTt05rJL\nxSpR\r\n=1hjh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoO3WV5tTzmWLXGRlRtpQaD5UC1S5BuWuA/gdHNkObzQIhANBI8/alOYnmb9CwUu/W/4e5TLfuAuKr1PRYITz5ld98"}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_2.1.2_1549728765643_0.8921573132814156"},"_hasShrinkwrap":false},"2.2.0-alpha.0":{"name":"use-dark-mode","version":"2.2.0-alpha.0","description":"A custom React Hook to help you implement a \"dark mode\" component.","main":"dist/use-dark-mode.js","umd:main":"dist/use-dark-mode.umd.js","module":"dist/use-dark-mode.m.js","source":"src/index.js","types":"types/index.d.ts","license":"MIT","repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"author":{"name":"donavon"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"^16.8.0","react-dom":"^16.8.0","react-testing-library":"^5.5.0","rimraf":"^2.6.2"},"peerDependencies":{"react":"16.8.0"},"jest":{"coverageThreshold":{"global":{"branches":0,"functions":0,"lines":0,"statements":0}}},"dependencies":{"use-persisted-state":"^0.1.0"},"readme":"# use-dark-mode\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors)\n\nA custom [React Hook](https://reactjs.org/docs/hooks-overview.html) to help you implement a \"dark mode\" component for your application.\n\n[![npm version](https://badge.fury.io/js/use-dark-mode.svg)](https://badge.fury.io/js/use-dark-mode) [![Build Status](https://travis-ci.com/donavon/use-dark-mode.svg?branch=develop)](https://travis-ci.com/donavon/use-dark-mode)\n\n![usedarkmode-small](https://user-images.githubusercontent.com/887639/51113468-079ee100-17d0-11e9-8a35-e29b12b74740.gif)\n\n`useDarkMode` works in one of two ways:\n\n1.  By toggling a CSS class on whatever element you specify (defaults to `document.body`).\n    You then setup your CSS to display different views based on the presence of the selector. For example, the following CSS is used in the demo app to ease the background color in/out of dark mode.\n\n    ```css\n    body {\n      background-color: #fff;\n      color: #333;\n      transition: background-color 0.3s ease;\n    }\n    body.dark-mode {\n      background-color: #1a1919;\n      color: #999;\n    }\n    ```\n\n2.  If you don't use global classes, you can specify an `onChange` handler and take care of the implementation of switching to dark mode yourself.\n\n## New in Version 2.x\n\n* `useDarkMode` now persists between sessions. It stores the user setting in\n`localStorage`.\n\n* It shares dark mode state with all other `useDarkMode` components on the page.\n\n* It shares dark mode state with all other tabs/browser windows.\n\n* The initial dark mode is queried from the system. Note: this requires a browser that supports the `prefers-color-scheme: dark` media query\n(currently only [Safari Technology Preview](https://developer.apple.com/safari/technology-preview/release-notes/))\nand a system that supports dark mode, such as macOS Mojave.\n\n* Changing the system dark mode state will also change the state of `useDarkMode`\n(i.e, change to light mode in the system will change to light mode in your app).\n\n## Requirement\n\nTo use `use-dark-mode`, you must use `react@16.8.0` or greater which includes Hooks.\n\n## Installation\n\n```sh\n$ npm i use-dark-mode\n```\n\n## Usage\n\n```js\nconst darkMode = useDarkMode(initialState, optionalConfigObject);\n```\n\n### Config\n\nYou pass `useDarkMode` an `initialState` (a boolean specifying whether it should be in dark mode\nby default) and an optional configuration object. The configuration object contains the following.\n\n| Key         | Description                                                                                                                                                                                                                                                                                        |\n| :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `classNameDark` | The class to apply. Default = `dark-mode`.                                                                                                                                                                                                                                                         |\n| `classNameLight` | The class to apply. Default = `light-mode`.                                                                                                                                                                                                                                                         |\n| `element`   | The element to apply the class name. Default = `document.body`.                                                                                                                                                                                                                                    |\n| `onChange`  | A function that will be called when the dark mode value changes and it is safe to access the DOM (i.e. it is called from within a `useEffect`). If you specify `onChange` then `classNameDark`, `classNameLight`, and `element` are ignored (i.e. no classes are automatically placed on the DOM). You have full control! |\n\n### Return object\n\nA `darkMode` object is returned with the following properties.\n\n| Key         | Description                                             |\n| :---------- | :------------------------------------------------------ |\n| `value`     | A boolean containing the current state of dark mode.    |\n| `enable()`  | A function that allows you to set dark mode to `true`.  |\n| `disable()` | A function that allows you to set dark mode to `false`. |\n| `toggle()`  | A function that allows you to toggle dark mode.         |\n\n## Example\n\nHere is a simple component that uses `useDarkMode` to provide a dark mode toggle control.\nIf dark mode is selected, the CSS class `dark-mode` is applied to `document.body` and is removed\nwhen de-selected.\n\n```jsx\nimport React from 'react';\n\nimport Toggle from './Toggle';\nimport useDarkMode from 'use-dark-mode';\n\nconst DarkModeToggle = () => {\n  const darkMode = useDarkMode(false);\n\n  return (\n    <div>\n      <button type=\"button\" onClick={darkMode.disable}>\n        ☀\n      </button>\n      <Toggle checked={darkMode.value} onChange={darkMode.toggle} />\n      <button type=\"button\" onClick={darkMode.enable}>\n        ☾\n      </button>\n    </div>\n  );\n};\n\nexport default DarkModeToggle;\n```\n\n## That flash!\n\nIf your CSS is setup to default to light mode, but the user selects dark mode,\nthe next time they visit your app, they will be in dark mode.\nHowever, the user will see a flash of light mode before the app is spun up\nand `useDarkMode` is called.\n\nTo prevent this, I've included some vanilla JavaScript that you can insert in your\n`index.html` just after the `<body>` tag. It is in a file named `noflash.js.txt`.\nYou can either insert the contents of this file in a `<script>` tag or automate the\nstep in your build process.\n\n## Live demo\n\nYou can view/edit a dark mode demo app on CodeSandbox.\n\n[![Edit demo app on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mzj64x80ny)\n\n## License\n\n**[MIT](LICENSE)** Licensed\n\n---\n\nA special thanks to [@revelcw](https://twitter.com/revelcw) for his help and inspiration on this package.\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore -->\n| [<img src=\"https://avatars3.githubusercontent.com/u/887639?v=4\" width=\"100px;\" alt=\"Donavon West\"/><br /><sub><b>Donavon West</b></sub>](http://donavon.com)<br />[🚇](#infra-donavon \"Infrastructure (Hosting, Build-Tools, etc)\") [⚠️](https://github.com/donavon/use-dark-mode/commits?author=donavon \"Tests\") [💡](#example-donavon \"Examples\") [🤔](#ideas-donavon \"Ideas, Planning, & Feedback\") [🚧](#maintenance-donavon \"Maintenance\") [👀](#review-donavon \"Reviewed Pull Requests\") [🔧](#tool-donavon \"Tools\") [💻](https://github.com/donavon/use-dark-mode/commits?author=donavon \"Code\") | [<img src=\"https://avatars2.githubusercontent.com/u/29359616?v=4\" width=\"100px;\" alt=\"Revel Carlberg West\"/><br /><sub><b>Revel Carlberg West</b></sub>](https://github.com/revelcw)<br />[🤔](#ideas-revelcw \"Ideas, Planning, & Feedback\") | [<img src=\"https://avatars2.githubusercontent.com/u/9800850?v=4\" width=\"100px;\" alt=\"Mateusz Burzyński\"/><br /><sub><b>Mateusz Burzyński</b></sub>](https://github.com/Andarist)<br />[💻](https://github.com/donavon/use-dark-mode/commits?author=Andarist \"Code\") | [<img src=\"https://avatars1.githubusercontent.com/u/1288694?v=4\" width=\"100px;\" alt=\"Justin Hall\"/><br /><sub><b>Justin Hall</b></sub>](https://github.com/wKovacs64)<br />[💻](https://github.com/donavon/use-dark-mode/commits?author=wKovacs64 \"Code\") |\n| :---: | :---: | :---: | :---: |\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!","readmeFilename":"README.md","gitHead":"ae6b67b07edb93a5a22f8cf407cda316e17bf81f","bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"},"homepage":"https://github.com/donavon/use-dark-mode#readme","_id":"use-dark-mode@2.2.0-alpha.0","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-nov6dsSv82vakkS41Kq7pwB+AfhBX0B4vWEU8/NWmqqYiDzf0TAfArzQnegeF0NMHyrCLoeJgZ+pHdZy1bdYPA==","shasum":"15d4ed57d826168fe059865d84cf9ac0d8397e9b","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-2.2.0-alpha.0.tgz","fileCount":8,"unpackedSize":16523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcX3CMCRA9TVsSAnZWagAADyYP/RKu85VE3+Sy+RUrbjHl\nZsHzGg1ra0IqlGOCE3y29SEuS4CqHYt9B902FutqnZP79oPJw5eP2NyyIzvT\nhDCr0BWoc9SNEtqVtSCjTOxkrWg+FVvqd+rGz1bgZDjje5Z5sEIXj6ytb817\nvHLBSfTJs6gZFW6mqCB1shtUj3eXovUTbHPvdl7+lMvAsBk6D2DmxVryrZea\nb13WE2bPBKaMH+QbivJ70xlaRcs/cHe26re/85XFVnho6f/RnhUiDV5wtnbU\nAeay/6fCMMS1csSZpRjlMVnrD4Ncpsb/jNKtBFMN/x87VGCVAX9lBzK8/YeC\nd3nMVcx8gB7TUTS5kBa1t7GwE2P2b6Tb0QH1/vX2NAOFLiFtKV7JW4/A2m1C\nk4VIRSvzED6Au3Ag9LKWTI2eMGmjYKN1kHcrZLzXqBPiD6NtiRfomvbrlCt4\ngHF+8ESW/uplTD9ncznRm99qRwqVsnFzox0wDR7NUM5vKbjhWWtM5pdtxFuT\n7H6DT2kK1CHufrh0HSQzFwU60HdhR7GBFoILFWZoARoPE1BCRHaVfJSlRoaF\noif1Aq9ysWQMLw2+imIVpcBgnRWMJxT8zS8XuZO69+cz275blvCJdqvCQ+oN\nIVKmPvWdhuDa3Nthxpgxs1j8Each0bnsA/VL74pKb7rhZ0K5tI8dYPHUugVz\nFxlC\r\n=31gv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICrHMgZZsyaiIHDQugjfYTBvITON648btYJH3sIUz1KCAiEA0Bf/YjMbaY5pvx3xoGrP6T6K51cz4cvnmBQuI8SsB2c="}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"_npmUser":{"name":"donavon","email":"github@donavon.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_2.2.0-alpha.0_1549758603669_0.3518915035878356"},"_hasShrinkwrap":false},"2.2.0-alpha.1":{"name":"use-dark-mode","version":"2.2.0-alpha.1","description":"A custom React Hook to help you implement a \"dark mode\" component.","main":"dist/use-dark-mode.js","umd:main":"dist/use-dark-mode.umd.js","module":"dist/use-dark-mode.m.js","source":"src/index.js","types":"types/index.d.ts","license":"MIT","repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"author":{"name":"donavon"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"^16.8.0","react-dom":"^16.8.0","react-testing-library":"^5.5.0","rimraf":"^2.6.2"},"peerDependencies":{"react":"16.8.0"},"jest":{"coverageThreshold":{"global":{"branches":0,"functions":0,"lines":0,"statements":0}}},"dependencies":{"use-persisted-state":"^0.2.0"},"readme":"# use-dark-mode\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors)\n\nA custom [React Hook](https://reactjs.org/docs/hooks-overview.html) to help you implement a \"dark mode\" component for your application.\n\n[![npm version](https://badge.fury.io/js/use-dark-mode.svg)](https://badge.fury.io/js/use-dark-mode) [![Build Status](https://travis-ci.com/donavon/use-dark-mode.svg?branch=develop)](https://travis-ci.com/donavon/use-dark-mode)\n\n![usedarkmode-small](https://user-images.githubusercontent.com/887639/51113468-079ee100-17d0-11e9-8a35-e29b12b74740.gif)\n\n`useDarkMode` works in one of two ways:\n\n1.  By toggling a CSS class on whatever element you specify (defaults to `document.body`).\n    You then setup your CSS to display different views based on the presence of the selector. For example, the following CSS is used in the demo app to ease the background color in/out of dark mode.\n\n    ```css\n    body {\n      background-color: #fff;\n      color: #333;\n      transition: background-color 0.3s ease;\n    }\n    body.dark-mode {\n      background-color: #1a1919;\n      color: #999;\n    }\n    ```\n\n2.  If you don't use global classes, you can specify an `onChange` handler and take care of the implementation of switching to dark mode yourself.\n\n## New in Version 2.x\n\n* `useDarkMode` now persists between sessions. It stores the user setting in\n`localStorage`.\n\n* It shares dark mode state with all other `useDarkMode` components on the page.\n\n* It shares dark mode state with all other tabs/browser windows.\n\n* The initial dark mode is queried from the system. Note: this requires a browser that supports the `prefers-color-scheme: dark` media query\n(currently only [Safari Technology Preview](https://developer.apple.com/safari/technology-preview/release-notes/))\nand a system that supports dark mode, such as macOS Mojave.\n\n* Changing the system dark mode state will also change the state of `useDarkMode`\n(i.e, change to light mode in the system will change to light mode in your app).\n\n## Requirement\n\nTo use `use-dark-mode`, you must use `react@16.8.0` or greater which includes Hooks.\n\n## Installation\n\n```sh\n$ npm i use-dark-mode\n```\n\n## Usage\n\n```js\nconst darkMode = useDarkMode(initialState, optionalConfigObject);\n```\n\n### Config\n\nYou pass `useDarkMode` an `initialState` (a boolean specifying whether it should be in dark mode\nby default) and an optional configuration object. The configuration object contains the following.\n\n| Key         | Description                                                                                                                                                                                                                                                                                        |\n| :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `classNameDark` | The class to apply. Default = `dark-mode`.                                                                                                                                                                                                                                                         |\n| `classNameLight` | The class to apply. Default = `light-mode`.                                                                                                                                                                                                                                                         |\n| `element`   | The element to apply the class name. Default = `document.body`.                                                                                                                                                                                                                                    |\n| `onChange`  | A function that will be called when the dark mode value changes and it is safe to access the DOM (i.e. it is called from within a `useEffect`). If you specify `onChange` then `classNameDark`, `classNameLight`, and `element` are ignored (i.e. no classes are automatically placed on the DOM). You have full control! |\n\n### Return object\n\nA `darkMode` object is returned with the following properties.\n\n| Key         | Description                                             |\n| :---------- | :------------------------------------------------------ |\n| `value`     | A boolean containing the current state of dark mode.    |\n| `enable()`  | A function that allows you to set dark mode to `true`.  |\n| `disable()` | A function that allows you to set dark mode to `false`. |\n| `toggle()`  | A function that allows you to toggle dark mode.         |\n\n## Example\n\nHere is a simple component that uses `useDarkMode` to provide a dark mode toggle control.\nIf dark mode is selected, the CSS class `dark-mode` is applied to `document.body` and is removed\nwhen de-selected.\n\n```jsx\nimport React from 'react';\n\nimport Toggle from './Toggle';\nimport useDarkMode from 'use-dark-mode';\n\nconst DarkModeToggle = () => {\n  const darkMode = useDarkMode(false);\n\n  return (\n    <div>\n      <button type=\"button\" onClick={darkMode.disable}>\n        ☀\n      </button>\n      <Toggle checked={darkMode.value} onChange={darkMode.toggle} />\n      <button type=\"button\" onClick={darkMode.enable}>\n        ☾\n      </button>\n    </div>\n  );\n};\n\nexport default DarkModeToggle;\n```\n\n## That flash!\n\nIf your CSS is setup to default to light mode, but the user selects dark mode,\nthe next time they visit your app, they will be in dark mode.\nHowever, the user will see a flash of light mode before the app is spun up\nand `useDarkMode` is called.\n\nTo prevent this, I've included some vanilla JavaScript that you can insert in your\n`index.html` just after the `<body>` tag. It is in a file named `noflash.js.txt`.\nYou can either insert the contents of this file in a `<script>` tag or automate the\nstep in your build process.\n\n## Live demo\n\nYou can view/edit a dark mode demo app on CodeSandbox.\n\n[![Edit demo app on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mzj64x80ny)\n\n## License\n\n**[MIT](LICENSE)** Licensed\n\n---\n\nA special thanks to [@revelcw](https://twitter.com/revelcw) for his help and inspiration on this package.\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore -->\n| [<img src=\"https://avatars3.githubusercontent.com/u/887639?v=4\" width=\"100px;\" alt=\"Donavon West\"/><br /><sub><b>Donavon West</b></sub>](http://donavon.com)<br />[🚇](#infra-donavon \"Infrastructure (Hosting, Build-Tools, etc)\") [⚠️](https://github.com/donavon/use-dark-mode/commits?author=donavon \"Tests\") [💡](#example-donavon \"Examples\") [🤔](#ideas-donavon \"Ideas, Planning, & Feedback\") [🚧](#maintenance-donavon \"Maintenance\") [👀](#review-donavon \"Reviewed Pull Requests\") [🔧](#tool-donavon \"Tools\") [💻](https://github.com/donavon/use-dark-mode/commits?author=donavon \"Code\") | [<img src=\"https://avatars2.githubusercontent.com/u/29359616?v=4\" width=\"100px;\" alt=\"Revel Carlberg West\"/><br /><sub><b>Revel Carlberg West</b></sub>](https://github.com/revelcw)<br />[🤔](#ideas-revelcw \"Ideas, Planning, & Feedback\") | [<img src=\"https://avatars2.githubusercontent.com/u/9800850?v=4\" width=\"100px;\" alt=\"Mateusz Burzyński\"/><br /><sub><b>Mateusz Burzyński</b></sub>](https://github.com/Andarist)<br />[💻](https://github.com/donavon/use-dark-mode/commits?author=Andarist \"Code\") | [<img src=\"https://avatars1.githubusercontent.com/u/1288694?v=4\" width=\"100px;\" alt=\"Justin Hall\"/><br /><sub><b>Justin Hall</b></sub>](https://github.com/wKovacs64)<br />[💻](https://github.com/donavon/use-dark-mode/commits?author=wKovacs64 \"Code\") |\n| :---: | :---: | :---: | :---: |\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!","readmeFilename":"README.md","gitHead":"ae6b67b07edb93a5a22f8cf407cda316e17bf81f","bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"},"homepage":"https://github.com/donavon/use-dark-mode#readme","_id":"use-dark-mode@2.2.0-alpha.1","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-AjL65JICRCE4XPl9E+fQhZyOZOVi2ngBmvND19EGH9WfRAn7iTe9hR544qb15WbV1RpD7MoJv9WLxjQjIW0vSg==","shasum":"7f408353db9c6795baa61862c0df7bb65166c4d9","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-2.2.0-alpha.1.tgz","fileCount":8,"unpackedSize":16325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcX8F1CRA9TVsSAnZWagAAXikP/14D9ejq8nmZO3gHCQ+d\n0InxFNVnZHWiibGFKTNpI4cm7c2Myhfuo9pAjfXJtRSkW/zykGRXbGtrFMMP\n/MEMFtNj+n0UCuTFsasDPHfybttspcr5MnF+EqWzP65es6aoZ92IzvE9O4ou\nn/CkLIrZYH2xlmacdrsogcrDMopeOmOairNCmmpDSOF0ANDFQDRaoW3PT1Ok\nsLHNi54kNGIj0LkCzTtO/ZwTJx7Zs7Z0++Lr69ayBgLIv6B4xMOqYZLDZ5sF\n+PJY4N+MLASkY5igVgiTKJ/JeHS6jQac2Afu/g/Po5IXF7ylXWkaTYKmKPdh\n12gngoMzj3ajnZrXnmUh4cZIG0PB/ysWnA3sZgHfsQL5EgDD5VmBp1+yKg1t\nPnK4HcW9SpwmEXgFWo3iByU+LXMNy7j4lzuzHQvpnnYodN9yj+FdOS6+VQa0\ni+01nb/4gQgiDAuyOf1I0YmCpzCdOOWf3m5bmOrjWFCJDMQ7/wrx474rKOe+\nyOp7p8nOiaO2Qs8ejnVZW4lf+gqK2VxulSF0UbUnjiiRwwCCLR7RWLI5RWha\ny8rGRc7w/p0JyJxqng7SR6bB5i2ZqZMPfweq4e6v2UnIBr662EQG/4mo+Kvd\nn6kMYYk9W0aZ+eC42Luv6+K1VMsOPeJBXzAo+O7O4m8smrypLwWzCQsZEn/I\n4nn2\r\n=dPWl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1BVueXYwdrAjBAT3j8p3EZchXrU15DPpjVncFwsLMdgIgXGWTduzy2fO55A/6tjZOseCCqv9ajcI6JmGeZKdOjys="}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"_npmUser":{"name":"donavon","email":"github@donavon.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_2.2.0-alpha.1_1549779316543_0.11052136608120589"},"_hasShrinkwrap":false},"2.2.0":{"name":"use-dark-mode","version":"2.2.0","description":"A custom React Hook to help you implement a \"dark mode\" component.","main":"dist/use-dark-mode.js","umd:main":"dist/use-dark-mode.umd.js","module":"dist/use-dark-mode.m.js","source":"src/index.js","types":"types/index.d.ts","license":"MIT","repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"author":{"name":"donavon"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"^16.8.0","react-dom":"^16.8.0","react-testing-library":"^5.5.0","rimraf":"^2.6.2"},"peerDependencies":{"react":"16.8.0"},"jest":{"coverageThreshold":{"global":{"branches":0,"functions":0,"lines":0,"statements":0}}},"dependencies":{"use-persisted-state":"^0.2.0"},"gitHead":"051e658a4d3dedd603d11e09a3e42b4dcd60d57c","bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"},"homepage":"https://github.com/donavon/use-dark-mode#readme","_id":"use-dark-mode@2.2.0","_npmVersion":"6.5.0","_nodeVersion":"11.9.0","_npmUser":{"name":"donavon","email":"github@donavon.com"},"dist":{"integrity":"sha512-9Pg8Y+9sJGVI/UIWSML5oOw00Pa36Us+wd3t+fY8u/AAVfpFqXNI9Ii/FZKKkk5q8KlgpJ51R0vYe5igZ0mbvQ==","shasum":"3299910fc922c057c5ac5e0ad89464ec656e2ebf","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-2.2.0.tgz","fileCount":8,"unpackedSize":16861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcYCKsCRA9TVsSAnZWagAAMwwQAJC1YTlG+lmI+BgIdKml\n15j1Jl8Vl/NBmeiBlUKfsrKckb6iTNUAvnLfYTe5RwAFF75M8SyNPcBJT1vs\nwzurbs8HBwzqBtaTIvi650aSdsCDvQu6Q7ndqTs3U+AMbLegOMPQp3RcbgN2\nypUvP9v6km/8NvuqQ6UuzK1d4L4B8U3oaap8Dk2qhF8GOrpFQ3wZTWLBRcn4\nzs/7HE55VrcTOh9g773/DTjqgGMTYdtLRH9AsnGVpy8OZet7UB4UDg7v5Sor\nc1fV0csIHgpk2QTAp4kzgQJwTPBfo2iqGZJknoxAOuFzEEqq7RUDJoJQ4zoi\nI1JH/N7iFunyu7XaiqtIEGgSKSpWU6rl7DNVi22TIYJIJLN6nW7USoPY9lcG\n/AsJth4HhzN3Z/sQq/ZQQU+U1JIPaumrqESQUH9EYCcKmtkgpt0QhDGV4ITr\ny5xuy/O9gzNu9lbWqHoh7L9+jz/okZQkrKEuwoZa4chwtTSpUhWgyGn3KUe0\nDNR2edutriDSoxfgKq/9TdX0RRPvQYSAHya1WOiheCYiL7kaAKX2HnD7ZIGK\nBr4JJyUwsSQejLjwxszH6iBvKgOh10qxuuTv4MgYvPICOf+O1XFr3GopqnwW\n2OpGzDD6yxinePd5KYOakykfn4tckqNEG/EKNaRl6gBBbaoW6zuT8xfVfFno\nIybt\r\n=BkMt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4BhEpWH6memzI/LApiGvr/umOv8wLDiiwjLBkodYafgIgCmOuPltMPaZwGSYuZGiEa0DWrtGOUOVaSthQj+rfyxs="}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_2.2.0_1549804203531_0.7072275108777799"},"_hasShrinkwrap":false},"2.2.1":{"name":"use-dark-mode","version":"2.2.1","description":"A custom React Hook to help you implement a \"dark mode\" component.","main":"dist/use-dark-mode.js","umd:main":"dist/use-dark-mode.umd.js","module":"dist/use-dark-mode.m.js","source":"src/index.js","types":"types/index.d.ts","license":"MIT","repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"author":{"name":"donavon"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"^16.8.0","react-dom":"^16.8.0","react-testing-library":"^5.5.0","rimraf":"^2.6.2"},"peerDependencies":{"react":"16.8.0"},"jest":{"coverageThreshold":{"global":{"branches":0,"functions":0,"lines":0,"statements":0}}},"dependencies":{"use-persisted-state":"^0.2.0"},"gitHead":"fcc484b4f2944b0d3ea86be38ba603c16a37b2da","bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"},"homepage":"https://github.com/donavon/use-dark-mode#readme","_id":"use-dark-mode@2.2.1","_npmVersion":"6.5.0","_nodeVersion":"11.9.0","_npmUser":{"name":"donavon","email":"github@donavon.com"},"dist":{"integrity":"sha512-cf0t2tRLXv7VdbbKlI5mHAQFWk7Hszt7prrNpnV/hSuAfRZ9EzhQ1/gCD3ioLckgQzUjD/d+8yoIt0Gn4+0D8A==","shasum":"877dc96b126f88ff850f16ea5aff35d3b21dab10","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-2.2.1.tgz","fileCount":8,"unpackedSize":16860,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcYDGeCRA9TVsSAnZWagAAFnYQAJX6hZprWrIkzjQ/JbgK\nrbehSFXeUlEfkYD/uUbC1mzWcbjdtTp+jHHh10n3p+I1I4Mpb4oBfk7z1IP8\n7Ay/ui+wjkW/skolajXAqlUeEPF2j+1mC4joV1Iy6DqKxene0ZI1pW5XfJ1O\njhOBUK8WN/UzBbUHn8yUTey6DuJNQ/cpfTpDwgrvRth1Ssmi40CeuoDXbgiU\nEziKyAtckYuJDHZHuwpCqgNbECw5uBqnx5WyJWKLNKjkV2aJmnAraVHNWZ8h\n/LqltwD8xMuSHr0ETMJKo5AQXcWw7cZyzXaAtiMVCZ9hqe+gsHlxd7Esmd3O\n5t/Hyb6jMHmjFhGQN/Mwx48f0UCdJeuxx/DHIHm+SCGUsZi1PR77dwxJMGRZ\ney3YjDIypdLD0OCJFMuouK6QOoCPI6xhCbzxvzu3DmT2fxWBrCPjWgGR5dFw\nQUztMsHcN/cJjgZItLil4XUqp6PqLnvQQbhzm9VTuj+lj0/R2qMtTBvE4nNs\nf2bE8Xa2UhB7zEdkrEDdEZK5ZNCylBSLZdkKOxpCQzGUIQPfZRN2tl+nXkeW\nwC/t6NBqA6qSORRLWwQeikvYT1nqSYbHKWlFTb+s8Cugp2JEQNk7bnXrFe8S\nnJ+1GFqS11xNd2KtF8D43cU0tG7XbfTSf7C/N9Km2b0KySTiRpkE0BzMIhd5\nV5Hb\r\n=KZMx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDOZ5bBeuANxI87qau3venqTVS5A2Tpty0+C0krmgvUCAiEA/r8gz7oIGKU8/v0T88BoMc9GaCfLCgydaeiSODwyrsw="}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_2.2.1_1549808029826_0.8773725967511383"},"_hasShrinkwrap":false},"2.2.2":{"name":"use-dark-mode","version":"2.2.2","description":"A custom React Hook to help you implement a \"dark mode\" component.","main":"dist/use-dark-mode.js","umd:main":"dist/use-dark-mode.umd.js","module":"dist/use-dark-mode.m.js","source":"src/index.js","types":"types/index.d.ts","license":"MIT","repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"author":{"name":"donavon"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"^16.8.0","react-dom":"^16.8.0","react-testing-library":"^5.5.0","rimraf":"^2.6.2"},"peerDependencies":{"react":"^16.8.0"},"jest":{"coverageThreshold":{"global":{"branches":0,"functions":0,"lines":0,"statements":0}}},"dependencies":{"use-persisted-state":"^0.2.0"},"gitHead":"3ef4f79e31550c763cb5ea756788e954514fb094","bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"},"homepage":"https://github.com/donavon/use-dark-mode#readme","_id":"use-dark-mode@2.2.2","_npmVersion":"6.5.0","_nodeVersion":"11.9.0","_npmUser":{"name":"donavon","email":"github@donavon.com"},"dist":{"integrity":"sha512-t/LAwBBxxtFIJd0VUax0inDYqC7OzgxXVn2qmdLPS2xqsarl8fuZyoAfZh4Dw9UagLDZffwD+7K12qBTgcIigA==","shasum":"6d31c2a597ad1391097a76b8b89b6f3a755884e7","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-2.2.2.tgz","fileCount":8,"unpackedSize":16860,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcYHbhCRA9TVsSAnZWagAA4PgP/0UBmf4XDhjJhaYDBslX\n+42DZSGQp+u+6UOTQ+jxu2t0Xo5GsQxagPtpWKMPRS8yGual/P4FA5N/hzDt\nOdVoPfDnoul0GpE5YGyFgM84U31ehUhu6ekJFvBPcp086qMlwRETPh3zyctk\nRHx8bNmJRfZJSrPn5CsXZO8dMLju9sf1+u5Phsamsf5HfMN0Pmgu5vu8tddt\nn69Kj6VTiOSrk2FcJIN/IrE1Fiypz1Ydsk0x8aIfdFFigEcOU+Z3uJnPWILy\nNaOYA+EbbTLpvkSntlgv6GJmfaQvYEoPQSwOUKwdzgh/7OWNX341wzTL4Kw+\nT8BnEepobUgGv+SRO+m3AuB0iUZKYRc2Yr32rca7fNWS6o/QHuDq9XU+V7eL\n2PNNEhfTC6orQC9k6HTdR6pB4RbfQWb9JL4bEQsBGBJDdZRxEqNHObQ2jw2V\nZvYgbxRwHeAJeCmXgol/r+2Yz4qFjIl1tLzQH/pZoYekc+WCjQNjh+C7aM2G\nRVjNsdJkM6L+Do3y/tyNeEwraX4bsAUb4rTDchmt2vRPgsVOI9thV45GeL6A\nsTdbUN2TI3y9MnaWWPEbHTknFbQA9JRULLgZ1PkcaVbZjPD9ZOeiDE5+5/b1\n2LvhSbnY6WJxSMw76xKYqpIumK0ZEStZlaRzd/Ta+OTWSF9Hxs1SXIr1eH1n\nDfw8\r\n=IJGd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA/moqiNI+XQwmNKpeiGX6GcTgsAPJnTxLX40kSXGPFVAiEA2AcptdGJ+jvNn6xlItN3eOlv1ma6rZ0fetdYDTe3b5Q="}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_2.2.2_1549825760826_0.5018472194913235"},"_hasShrinkwrap":false},"2.3.0-alpha.0":{"name":"use-dark-mode","publishConfig":{"tag":"next"},"version":"2.3.0-alpha.0","description":"A custom React Hook to help you implement a \"dark mode\" component.","main":"dist/use-dark-mode.js","umd:main":"dist/use-dark-mode.umd.js","module":"dist/use-dark-mode.m.js","source":"src/index.js","types":"types/index.d.ts","license":"MIT","repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"author":{"name":"donavon"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"^16.8.0","react-dom":"^16.8.0","react-testing-library":"^5.5.0","rimraf":"^2.6.2"},"peerDependencies":{"react":"^16.8.0"},"jest":{"coverageThreshold":{"global":{"branches":0,"functions":0,"lines":0,"statements":0}}},"dependencies":{"use-persisted-state":"^0.3.0"},"readme":"# use-dark-mode\n\nA custom [React Hook](https://reactjs.org/docs/hooks-overview.html) to help you implement a \"dark mode\" component for your application.\n\n[![npm version](https://badge.fury.io/js/use-dark-mode.svg)](https://badge.fury.io/js/use-dark-mode) [![Build Status](https://travis-ci.com/donavon/use-dark-mode.svg?branch=develop)](https://travis-ci.com/donavon/use-dark-mode) [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors)\n\n![usedarkmode-small](https://user-images.githubusercontent.com/887639/51113468-079ee100-17d0-11e9-8a35-e29b12b74740.gif)\n\n`useDarkMode` works in one of two ways:\n\n1.  By toggling a CSS class on whatever element you specify (defaults to `document.body`).\n    You then setup your CSS to display different views based on the presence of the selector. For example, the following CSS is used in the demo app to ease the background color in/out of dark mode.\n\n    ```css\n    body.light-mode {\n      background-color: #fff;\n      color: #333;\n      transition: background-color 0.3s ease;\n    }\n    body.dark-mode {\n      background-color: #1a1919;\n      color: #999;\n    }\n    ```\n\n2.  If you don't use global classes, you can specify an `onChange` handler and take care of the implementation of switching to dark mode yourself.\n\n## New in Version 2.x\n\n* `useDarkMode` now persists between sessions. It stores the user setting in\n`localStorage`.\n\n* It shares dark mode state with all other `useDarkMode` components on the page.\n\n* It shares dark mode state with all other tabs/browser windows.\n\n* The initial dark mode is queried from the system. Note: this requires a browser that supports the `prefers-color-scheme: dark` media query\n(currently only [Safari Technology Preview](https://developer.apple.com/safari/technology-preview/release-notes/))\nand a system that supports dark mode, such as macOS Mojave.\n\n* Changing the system dark mode state will also change the state of `useDarkMode`\n(i.e, change to light mode in the system will change to light mode in your app).\n\n* Support for Server Side Rendering (SSR) in version 2.2 and above.\n\n## Requirement\n\nTo use `use-dark-mode`, you must use `react@16.8.0` or greater which includes Hooks.\n\n## Installation\n\n```sh\n$ npm i use-dark-mode\n```\n\n## Usage\n\n```js\nconst darkMode = useDarkMode(initialState, optionalConfigObject);\n```\n\n### Config\n\nYou pass `useDarkMode` an `initialState` (a boolean specifying whether it should be in dark mode\nby default) and an optional configuration object. The configuration object contains the following.\n\n| Key         | Description                                                                                                                                                                                                                                                                                        |\n| :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `classNameDark` | The class to apply. Default = `dark-mode`.                                                                                                                                                                                                                                                         |\n| `classNameLight` | The class to apply. Default = `light-mode`.                                                                                                                                                                                                                                                         |\n| `element`   | The element to apply the class name. Default = `document.body`.                                                                                                                                                                                                                                    |\n| `onChange`  | A function that will be called when the dark mode value changes and it is safe to access the DOM (i.e. it is called from within a `useEffect`). If you specify `onChange` then `classNameDark`, `classNameLight`, and `element` are ignored (i.e. no classes are automatically placed on the DOM). You have full control! |\n\n### Return object\n\nA `darkMode` object is returned with the following properties.\n\n| Key         | Description                                             |\n| :---------- | :------------------------------------------------------ |\n| `value`     | A boolean containing the current state of dark mode.    |\n| `enable()`  | A function that allows you to set dark mode to `true`.  |\n| `disable()` | A function that allows you to set dark mode to `false`. |\n| `toggle()`  | A function that allows you to toggle dark mode.         |\n\n## Example\n\nHere is a simple component that uses `useDarkMode` to provide a dark mode toggle control.\nIf dark mode is selected, the CSS class `dark-mode` is applied to `document.body` and is removed\nwhen de-selected.\n\n```jsx\nimport React from 'react';\nimport useDarkMode from 'use-dark-mode';\n\nimport Toggle from './Toggle';\n\nconst DarkModeToggle = () => {\n  const darkMode = useDarkMode(false);\n\n  return (\n    <div>\n      <button type=\"button\" onClick={darkMode.disable}>\n        ☀\n      </button>\n      <Toggle checked={darkMode.value} onChange={darkMode.toggle} />\n      <button type=\"button\" onClick={darkMode.enable}>\n        ☾\n      </button>\n    </div>\n  );\n};\n\nexport default DarkModeToggle;\n```\n\n## That flash!\n\nIf your CSS is setup to default to light mode, but the user selects dark mode,\nthe next time they visit your app, they will be in dark mode.\nHowever, the user will see a flash of light mode before the app is spun up\nand `useDarkMode` is called.\n\nTo prevent this, I've included some vanilla JavaScript that you can insert in your\n`index.html` just after the `<body>` tag. It is in a file named [noflash.js.txt](https://github.com/donavon/use-dark-mode/blob/develop/noflash.js.txt).\nYou can either insert the contents of this file in a `<script>` tag or automate the\nstep in your build process.\n\n## Live demo\n\nYou can view/edit a dark mode demo app on CodeSandbox.\n\n[![Edit demo app on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mzj64x80ny)\n\n## License\n\n**[MIT](LICENSE)** Licensed\n\n---\n\nA special thanks to [@revelcw](https://twitter.com/revelcw) for his help and inspiration on this package.\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore -->\n| [<img src=\"https://avatars3.githubusercontent.com/u/887639?v=4\" width=\"100px;\" alt=\"Donavon West\"/><br /><sub><b>Donavon West</b></sub>](http://donavon.com)<br />[🚇](#infra-donavon \"Infrastructure (Hosting, Build-Tools, etc)\") [⚠️](https://github.com/donavon/use-dark-mode/commits?author=donavon \"Tests\") [💡](#example-donavon \"Examples\") [🤔](#ideas-donavon \"Ideas, Planning, & Feedback\") [🚧](#maintenance-donavon \"Maintenance\") [👀](#review-donavon \"Reviewed Pull Requests\") [🔧](#tool-donavon \"Tools\") [💻](https://github.com/donavon/use-dark-mode/commits?author=donavon \"Code\") | [<img src=\"https://avatars2.githubusercontent.com/u/29359616?v=4\" width=\"100px;\" alt=\"Revel Carlberg West\"/><br /><sub><b>Revel Carlberg West</b></sub>](https://github.com/revelcw)<br />[🤔](#ideas-revelcw \"Ideas, Planning, & Feedback\") | [<img src=\"https://avatars2.githubusercontent.com/u/9800850?v=4\" width=\"100px;\" alt=\"Mateusz Burzyński\"/><br /><sub><b>Mateusz Burzyński</b></sub>](https://github.com/Andarist)<br />[💻](https://github.com/donavon/use-dark-mode/commits?author=Andarist \"Code\") | [<img src=\"https://avatars1.githubusercontent.com/u/1288694?v=4\" width=\"100px;\" alt=\"Justin Hall\"/><br /><sub><b>Justin Hall</b></sub>](https://github.com/wKovacs64)<br />[💻](https://github.com/donavon/use-dark-mode/commits?author=wKovacs64 \"Code\") | [<img src=\"https://avatars1.githubusercontent.com/u/24556921?v=4\" width=\"100px;\" alt=\"Jeremy\"/><br /><sub><b>Jeremy</b></sub>](https://github.com/fxbabys)<br />[📓](#userTesting-fxbabys \"User Testing\") [🐛](https://github.com/donavon/use-dark-mode/issues?q=author%3Afxbabys \"Bug reports\") |\n| :---: | :---: | :---: | :---: | :---: |\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"3ef4f79e31550c763cb5ea756788e954514fb094","bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"},"homepage":"https://github.com/donavon/use-dark-mode#readme","_id":"use-dark-mode@2.3.0-alpha.0","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-E7yjBaOqPuPdAFIpM/RYRO3K8rOCH68OIns3lsdt+bguUwZ0a2vuq5hya84wtm0TSRpXWFpevviypDx/jJLQcQ==","shasum":"8e85b7e796e0bac25881c4995813ebf57a2ead60","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-2.3.0-alpha.0.tgz","fileCount":8,"unpackedSize":17432,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcYgAECRA9TVsSAnZWagAAV9oQAKT1+YXW2pFcmVfRarHQ\nIj7M8Mlui41R6ziPeQ1Wd595CQT9f6GWmb0phDsYJW3MRsXiDqXvoj31BQqG\nk9dkPsfDbr+isrgBmJiqcvBnE6VxQgaiPCLkn0nCfRuUUy7HPEt5Q0CdgBhJ\nygQ71HdNMyEPS5400AzgRZHo6937pP2ceJceHtlmII9J6u42CAnr5D8NVz+6\nK/58cc+xJVDdAGE1nIlTXHQoTO0scrJGgdGXoBDGCXzJXVz1IwHuMfsJNclI\nOhjFdRNh8s/MhYY6R2fumkCPmCzgCCQyq/QjFHUPLO1Q+dJHnoJge9YMI+BY\nkF9r/4mzamna6ZE5BqNNGNl1UzToun1yPz2aagDtpmtvq8NZvKxJE9k5mz6r\nng54sSHjs/dxHp0jkFaXpGpLxUEvdv+ok/mi3M4c8/p+tKXochhZCmM6EKxC\novWCGhqXPxMsLmUQDVGWxHN+oUxvPTCBdoGk1DxpOKEQYqB12eyTXaD7ZrzF\nSe+fZBd6N8iUVPHxhaFaHd7EeW4vsfcDuG6EjUIkPWmsFu1snP2XoqKCfg1W\n8Pq7nHGlm10XdfPmRkNSZ4FEuJL3cKTY4QbJ5TU+U6+StOU8cFxViy5tCDGz\nw1x5PBlCT1Z7mUpnJ5W5td7rHdMiCyYtXUONt7+/NEl62wAZioioqY6FfdBl\nQUID\r\n=Vmuf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEwsIMP89q1WUIMPn/w9WV1/sEFYEq+GIaqVp+MF2b6qAiEA1BOM8O4QSEpA2brSECALQ12+mK4X1x4a0iMoHWWa02E="}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"_npmUser":{"name":"donavon","email":"github@donavon.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_2.3.0-alpha.0_1549926403645_0.699838598580425"},"_hasShrinkwrap":false},"2.3.0-alpha.1":{"name":"use-dark-mode","publishConfig":{"tag":"next"},"version":"2.3.0-alpha.1","description":"A custom React Hook to help you implement a \"dark mode\" component.","main":"dist/use-dark-mode.js","umd:main":"dist/use-dark-mode.umd.js","module":"dist/use-dark-mode.m.js","source":"src/index.js","types":"types/index.d.ts","license":"MIT","repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"author":{"name":"donavon"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"^16.8.0","react-dom":"^16.8.0","react-testing-library":"^5.5.0","rimraf":"^2.6.2"},"peerDependencies":{"react":"^16.8.0"},"jest":{"coverageThreshold":{"global":{"branches":0,"functions":0,"lines":0,"statements":0}}},"dependencies":{"use-persisted-state":"^0.3.0"},"readme":"# use-dark-mode\n\nA custom [React Hook](https://reactjs.org/docs/hooks-overview.html) to help you implement a \"dark mode\" component for your application.\n\n[![npm version](https://badge.fury.io/js/use-dark-mode.svg)](https://badge.fury.io/js/use-dark-mode) [![Build Status](https://travis-ci.com/donavon/use-dark-mode.svg?branch=develop)](https://travis-ci.com/donavon/use-dark-mode) [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors)\n\n![usedarkmode-small](https://user-images.githubusercontent.com/887639/51113468-079ee100-17d0-11e9-8a35-e29b12b74740.gif)\n\n`useDarkMode` works in one of two ways:\n\n1.  By toggling a CSS class on whatever element you specify (defaults to `document.body`).\n    You then setup your CSS to display different views based on the presence of the selector. For example, the following CSS is used in the demo app to ease the background color in/out of dark mode.\n\n    ```css\n    body.light-mode {\n      background-color: #fff;\n      color: #333;\n      transition: background-color 0.3s ease;\n    }\n    body.dark-mode {\n      background-color: #1a1919;\n      color: #999;\n    }\n    ```\n\n2.  If you don't use global classes, you can specify an `onChange` handler and take care of the implementation of switching to dark mode yourself.\n\n## New in Version 2.x\n\n* `useDarkMode` now persists between sessions. It stores the user setting in\n`localStorage`.\n\n* It shares dark mode state with all other `useDarkMode` components on the page.\n\n* It shares dark mode state with all other tabs/browser windows.\n\n* The initial dark mode is queried from the system. Note: this requires a browser that supports the `prefers-color-scheme: dark` media query\n(currently only [Safari Technology Preview](https://developer.apple.com/safari/technology-preview/release-notes/))\nand a system that supports dark mode, such as macOS Mojave.\n\n* Changing the system dark mode state will also change the state of `useDarkMode`\n(i.e, change to light mode in the system will change to light mode in your app).\n\n* Support for Server Side Rendering (SSR) in version 2.2 and above.\n\n## Requirement\n\nTo use `use-dark-mode`, you must use `react@16.8.0` or greater which includes Hooks.\n\n## Installation\n\n```sh\n$ npm i use-dark-mode\n```\n\n## Usage\n\n```js\nconst darkMode = useDarkMode(initialState, optionalConfigObject);\n```\n\n### Config\n\nYou pass `useDarkMode` an `initialState` (a boolean specifying whether it should be in dark mode\nby default) and an optional configuration object. The configuration object contains the following.\n\n| Key         | Description                                                                                                                                                                                                                                                                                        |\n| :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `classNameDark` | The class to apply. Default = `dark-mode`.                                                                                                                                                                                                                                                         |\n| `classNameLight` | The class to apply. Default = `light-mode`.                                                                                                                                                                                                                                                         |\n| `element`   | The element to apply the class name. Default = `document.body`.                                                                                                                                                                                                                                    |\n| `onChange`  | A function that will be called when the dark mode value changes and it is safe to access the DOM (i.e. it is called from within a `useEffect`). If you specify `onChange` then `classNameDark`, `classNameLight`, and `element` are ignored (i.e. no classes are automatically placed on the DOM). You have full control! |\n\n### Return object\n\nA `darkMode` object is returned with the following properties.\n\n| Key         | Description                                             |\n| :---------- | :------------------------------------------------------ |\n| `value`     | A boolean containing the current state of dark mode.    |\n| `enable()`  | A function that allows you to set dark mode to `true`.  |\n| `disable()` | A function that allows you to set dark mode to `false`. |\n| `toggle()`  | A function that allows you to toggle dark mode.         |\n\n## Example\n\nHere is a simple component that uses `useDarkMode` to provide a dark mode toggle control.\nIf dark mode is selected, the CSS class `dark-mode` is applied to `document.body` and is removed\nwhen de-selected.\n\n```jsx\nimport React from 'react';\nimport useDarkMode from 'use-dark-mode';\n\nimport Toggle from './Toggle';\n\nconst DarkModeToggle = () => {\n  const darkMode = useDarkMode(false);\n\n  return (\n    <div>\n      <button type=\"button\" onClick={darkMode.disable}>\n        ☀\n      </button>\n      <Toggle checked={darkMode.value} onChange={darkMode.toggle} />\n      <button type=\"button\" onClick={darkMode.enable}>\n        ☾\n      </button>\n    </div>\n  );\n};\n\nexport default DarkModeToggle;\n```\n\n## That flash!\n\nIf your CSS is setup to default to light mode, but the user selects dark mode,\nthe next time they visit your app, they will be in dark mode.\nHowever, the user will see a flash of light mode before the app is spun up\nand `useDarkMode` is called.\n\nTo prevent this, I've included some vanilla JavaScript that you can insert in your\n`index.html` just after the `<body>` tag. It is in a file named [noflash.js.txt](https://github.com/donavon/use-dark-mode/blob/develop/noflash.js.txt).\nYou can either insert the contents of this file in a `<script>` tag or automate the\nstep in your build process.\n\n## Live demo\n\nYou can view/edit a dark mode demo app on CodeSandbox.\n\n[![Edit demo app on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mzj64x80ny)\n\n## License\n\n**[MIT](LICENSE)** Licensed\n\n---\n\nA special thanks to [@revelcw](https://twitter.com/revelcw) for his help and inspiration on this package.\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore -->\n| [<img src=\"https://avatars3.githubusercontent.com/u/887639?v=4\" width=\"100px;\" alt=\"Donavon West\"/><br /><sub><b>Donavon West</b></sub>](http://donavon.com)<br />[🚇](#infra-donavon \"Infrastructure (Hosting, Build-Tools, etc)\") [⚠️](https://github.com/donavon/use-dark-mode/commits?author=donavon \"Tests\") [💡](#example-donavon \"Examples\") [🤔](#ideas-donavon \"Ideas, Planning, & Feedback\") [🚧](#maintenance-donavon \"Maintenance\") [👀](#review-donavon \"Reviewed Pull Requests\") [🔧](#tool-donavon \"Tools\") [💻](https://github.com/donavon/use-dark-mode/commits?author=donavon \"Code\") | [<img src=\"https://avatars2.githubusercontent.com/u/29359616?v=4\" width=\"100px;\" alt=\"Revel Carlberg West\"/><br /><sub><b>Revel Carlberg West</b></sub>](https://github.com/revelcw)<br />[🤔](#ideas-revelcw \"Ideas, Planning, & Feedback\") | [<img src=\"https://avatars2.githubusercontent.com/u/9800850?v=4\" width=\"100px;\" alt=\"Mateusz Burzyński\"/><br /><sub><b>Mateusz Burzyński</b></sub>](https://github.com/Andarist)<br />[💻](https://github.com/donavon/use-dark-mode/commits?author=Andarist \"Code\") | [<img src=\"https://avatars1.githubusercontent.com/u/1288694?v=4\" width=\"100px;\" alt=\"Justin Hall\"/><br /><sub><b>Justin Hall</b></sub>](https://github.com/wKovacs64)<br />[💻](https://github.com/donavon/use-dark-mode/commits?author=wKovacs64 \"Code\") | [<img src=\"https://avatars1.githubusercontent.com/u/24556921?v=4\" width=\"100px;\" alt=\"Jeremy\"/><br /><sub><b>Jeremy</b></sub>](https://github.com/fxbabys)<br />[📓](#userTesting-fxbabys \"User Testing\") [🐛](https://github.com/donavon/use-dark-mode/issues?q=author%3Afxbabys \"Bug reports\") |\n| :---: | :---: | :---: | :---: | :---: |\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"3ef4f79e31550c763cb5ea756788e954514fb094","bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"},"homepage":"https://github.com/donavon/use-dark-mode#readme","_id":"use-dark-mode@2.3.0-alpha.1","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-5I9qJSPziUXFT1tU5QJkfRvAKD9OAVooXsQEKsKRGh6O7ZhGrksHl8ote95WBHWkDwXplYn6U/5utjYq0Pn8Ow==","shasum":"b7180550cf5a24773776a5a6e5c8f8f92616f04d","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-2.3.0-alpha.1.tgz","fileCount":8,"unpackedSize":17206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcYhfTCRA9TVsSAnZWagAAVYYP/1kli6lnLggYlETikpAX\nmtt7DqjpralXjJ0uMAnsCm81QNFRu4XCfYE01Mrmv9qhCyNc8bhmgpu1aDlS\n3shwiiFXzoD9Pj6obI0BRWaYT2qT7RBM579ECSXl499ocGYsAAc0Kn7NZb0n\nikLGNR1CuczC4OfeytoOmd1nbHXVo/bTvKzoMBFNdtbx1oyd+Y6AUZX8p2Xt\n4mkxoII0B6q2SA05XD0VlyWfkW8nG1FRn/gI6Qfv3/5kzO1uwXAGtdMlqbRg\nH+YXCZEY7VpuQLmCPZHRnWmzLFexObm82kdP+WD9DFN0BpOzHuLzEKnN5IoS\nlJeHH4DifVJmBIiFx05ZEQUvHY0nXTlsvrtEOq1ntMi0tsI3y2xLkCtLDaQZ\nig6YxaKGXdUtyP4xkgzZy5cN4Pa/zsrdgHePWGsfcGLiqHIZ9W/T02GXqrFc\nYFpRcN338W2cxZAYM/pZGBnn21mVauBnevBZA7hSsr9L+tT84BfoEjEsgVTE\nieMSFBuD9yGH3TeU7M+aXh++s4wrWp3y47bu0GJpyuoNewULXa8yynls/0yC\nv7oryEV1t6ZdhYHAaSqQJAZKNzdfbd0HNp0ibK+gXjM5GktTrlFl80oQGiqc\n5dhcMf2nCleo1bR3/5cU4Rhxfh9B5EK3fL33SIB1MiO5vmBqgcCDuz000lFZ\npt72\r\n=80s+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1+/xooVz7ff6zzOP5aZA5BggBsYzwmhVuF88ZyOeFxQIgYRMQcXnDdGujzPK0hpzc62cDoxOe309UXwaAjgINWB8="}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"_npmUser":{"name":"donavon","email":"github@donavon.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_2.3.0-alpha.1_1549932498393_0.44345511662570747"},"_hasShrinkwrap":false},"2.3.0-alpha.2":{"name":"use-dark-mode","publishConfig":{"tag":"next"},"version":"2.3.0-alpha.2","description":"A custom React Hook to help you implement a \"dark mode\" component.","main":"dist/use-dark-mode.js","umd:main":"dist/use-dark-mode.umd.js","module":"dist/use-dark-mode.m.js","source":"src/index.js","types":"types/index.d.ts","license":"MIT","repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"author":{"name":"donavon"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"^16.8.0","react-dom":"^16.8.0","react-testing-library":"^5.5.0","rimraf":"^2.6.2"},"peerDependencies":{"react":"^16.8.0"},"jest":{"coverageThreshold":{"global":{"branches":0,"functions":0,"lines":0,"statements":0}}},"dependencies":{"use-persisted-state":"^0.3.0"},"readme":"# use-dark-mode\n\nA custom [React Hook](https://reactjs.org/docs/hooks-overview.html) to help you implement a \"dark mode\" component for your application.\n\n[![npm version](https://badge.fury.io/js/use-dark-mode.svg)](https://badge.fury.io/js/use-dark-mode) [![Build Status](https://travis-ci.com/donavon/use-dark-mode.svg?branch=develop)](https://travis-ci.com/donavon/use-dark-mode) [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors)\n\n![usedarkmode-small](https://user-images.githubusercontent.com/887639/51113468-079ee100-17d0-11e9-8a35-e29b12b74740.gif)\n\n`useDarkMode` works in one of two ways:\n\n1.  By toggling a CSS class on whatever element you specify (defaults to `document.body`).\n    You then setup your CSS to display different views based on the presence of the selector. For example, the following CSS is used in the demo app to ease the background color in/out of dark mode.\n\n    ```css\n    body.light-mode {\n      background-color: #fff;\n      color: #333;\n      transition: background-color 0.3s ease;\n    }\n    body.dark-mode {\n      background-color: #1a1919;\n      color: #999;\n    }\n    ```\n\n2.  If you don't use global classes, you can specify an `onChange` handler and take care of the implementation of switching to dark mode yourself.\n\n## New in Version 2.x\n\n* `useDarkMode` now persists between sessions. It stores the user setting in\n`localStorage`.\n\n* It shares dark mode state with all other `useDarkMode` components on the page.\n\n* It shares dark mode state with all other tabs/browser windows.\n\n* The initial dark mode is queried from the system. Note: this requires a browser that supports the `prefers-color-scheme: dark` media query\n(currently only [Safari Technology Preview](https://developer.apple.com/safari/technology-preview/release-notes/))\nand a system that supports dark mode, such as macOS Mojave.\n\n* Changing the system dark mode state will also change the state of `useDarkMode`\n(i.e, change to light mode in the system will change to light mode in your app).\n\n* Support for Server Side Rendering (SSR) in version 2.2 and above.\n\n## Requirement\n\nTo use `use-dark-mode`, you must use `react@16.8.0` or greater which includes Hooks.\n\n## Installation\n\n```sh\n$ npm i use-dark-mode\n```\n\n## Usage\n\n```js\nconst darkMode = useDarkMode(initialState, optionalConfigObject);\n```\n\n### Config\n\nYou pass `useDarkMode` an `initialState` (a boolean specifying whether it should be in dark mode\nby default) and an optional configuration object. The configuration object contains the following.\n\n| Key         | Description                                                                                                                                                                                                                                                                                        |\n| :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `classNameDark` | The class to apply. Default = `dark-mode`.                                                                                                                                                                                                                                                         |\n| `classNameLight` | The class to apply. Default = `light-mode`.                                                                                                                                                                                                                                                         |\n| `element`   | The element to apply the class name. Default = `document.body`.                                                                                                                                                                                                                                    |\n| `onChange`  | A function that will be called when the dark mode value changes and it is safe to access the DOM (i.e. it is called from within a `useEffect`). If you specify `onChange` then `classNameDark`, `classNameLight`, and `element` are ignored (i.e. no classes are automatically placed on the DOM). You have full control! |\n\n### Return object\n\nA `darkMode` object is returned with the following properties.\n\n| Key         | Description                                             |\n| :---------- | :------------------------------------------------------ |\n| `value`     | A boolean containing the current state of dark mode.    |\n| `enable()`  | A function that allows you to set dark mode to `true`.  |\n| `disable()` | A function that allows you to set dark mode to `false`. |\n| `toggle()`  | A function that allows you to toggle dark mode.         |\n\n## Example\n\nHere is a simple component that uses `useDarkMode` to provide a dark mode toggle control.\nIf dark mode is selected, the CSS class `dark-mode` is applied to `document.body` and is removed\nwhen de-selected.\n\n```jsx\nimport React from 'react';\nimport useDarkMode from 'use-dark-mode';\n\nimport Toggle from './Toggle';\n\nconst DarkModeToggle = () => {\n  const darkMode = useDarkMode(false);\n\n  return (\n    <div>\n      <button type=\"button\" onClick={darkMode.disable}>\n        ☀\n      </button>\n      <Toggle checked={darkMode.value} onChange={darkMode.toggle} />\n      <button type=\"button\" onClick={darkMode.enable}>\n        ☾\n      </button>\n    </div>\n  );\n};\n\nexport default DarkModeToggle;\n```\n\n## That flash!\n\nIf your CSS is setup to default to light mode, but the user selects dark mode,\nthe next time they visit your app, they will be in dark mode.\nHowever, the user will see a flash of light mode before the app is spun up\nand `useDarkMode` is called.\n\nTo prevent this, I've included some vanilla JavaScript that you can insert in your\n`index.html` just after the `<body>` tag. It is in a file named [noflash.js.txt](https://github.com/donavon/use-dark-mode/blob/develop/noflash.js.txt).\nYou can either insert the contents of this file in a `<script>` tag or automate the\nstep in your build process.\n\n## Live demo\n\nYou can view/edit a dark mode demo app on CodeSandbox.\n\n[![Edit demo app on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mzj64x80ny)\n\n## License\n\n**[MIT](LICENSE)** Licensed\n\n---\n\nA special thanks to [@revelcw](https://twitter.com/revelcw) for his help and inspiration on this package.\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore -->\n| [<img src=\"https://avatars3.githubusercontent.com/u/887639?v=4\" width=\"100px;\" alt=\"Donavon West\"/><br /><sub><b>Donavon West</b></sub>](http://donavon.com)<br />[🚇](#infra-donavon \"Infrastructure (Hosting, Build-Tools, etc)\") [⚠️](https://github.com/donavon/use-dark-mode/commits?author=donavon \"Tests\") [💡](#example-donavon \"Examples\") [🤔](#ideas-donavon \"Ideas, Planning, & Feedback\") [🚧](#maintenance-donavon \"Maintenance\") [👀](#review-donavon \"Reviewed Pull Requests\") [🔧](#tool-donavon \"Tools\") [💻](https://github.com/donavon/use-dark-mode/commits?author=donavon \"Code\") | [<img src=\"https://avatars2.githubusercontent.com/u/29359616?v=4\" width=\"100px;\" alt=\"Revel Carlberg West\"/><br /><sub><b>Revel Carlberg West</b></sub>](https://github.com/revelcw)<br />[🤔](#ideas-revelcw \"Ideas, Planning, & Feedback\") | [<img src=\"https://avatars2.githubusercontent.com/u/9800850?v=4\" width=\"100px;\" alt=\"Mateusz Burzyński\"/><br /><sub><b>Mateusz Burzyński</b></sub>](https://github.com/Andarist)<br />[💻](https://github.com/donavon/use-dark-mode/commits?author=Andarist \"Code\") | [<img src=\"https://avatars1.githubusercontent.com/u/1288694?v=4\" width=\"100px;\" alt=\"Justin Hall\"/><br /><sub><b>Justin Hall</b></sub>](https://github.com/wKovacs64)<br />[💻](https://github.com/donavon/use-dark-mode/commits?author=wKovacs64 \"Code\") | [<img src=\"https://avatars1.githubusercontent.com/u/24556921?v=4\" width=\"100px;\" alt=\"Jeremy\"/><br /><sub><b>Jeremy</b></sub>](https://github.com/fxbabys)<br />[📓](#userTesting-fxbabys \"User Testing\") [🐛](https://github.com/donavon/use-dark-mode/issues?q=author%3Afxbabys \"Bug reports\") |\n| :---: | :---: | :---: | :---: | :---: |\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"cb9abe0af0a8b932837520a1e7f2783e121ffcb1","bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"},"homepage":"https://github.com/donavon/use-dark-mode#readme","_id":"use-dark-mode@2.3.0-alpha.2","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-aMSZvbXLVP9j3R6V2J2SzRtynypL84QAxXXeZM4+q1KdMankmJrbJn2QehKKCDtd6nIH06kkJGPP59jsj7POcg==","shasum":"d2cc8e8f3b3686560680f8ef4e2d2b70c7e9ffab","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-2.3.0-alpha.2.tgz","fileCount":8,"unpackedSize":17224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcYloCCRA9TVsSAnZWagAACMwP/jH1yrBzGyJq5hiIZDgH\nL85kvC8mYmqbgjFoRSmdSpBstPkrR87AFOJUCQ0wn7Ol21xEkMzOMSCb9QMu\n4wBdfJp4RCra4MIEyE0AWQplAo7mzyGnkW9hv5uKQ5G+iF0Gm3lh4OQWjWcj\nR3Ut4T+q/tKhnmnwjD5Bj9fHmz0ta/fxQtPXWiLoPH1SRfAOoXU+9f38+7Av\nnJCtZNS6yu4cSjg1pCOzt6CSdC32kdkFhgQyAY/H/BaHJAwWbrmgn5BKm8YD\nKc5lvfSREVowdNlN6ahSdXxVBNw25TcYrsfc0k3G3cc7h+aYg8CfHRzjej3e\n6vl8MafhunINmNDDBtVYLF7Chy89MywJr3zDsKRgzCV299nqoa5Av+IkPvu/\nDxLX8ipnfC6SbSpO0/UqpXmx9K4dmNt87VcMnmJgWX7BrNU2pZiEle6/a0F5\nWuxaMUPbLasp8ar/GpaWiMQmc/2SujAy2SqdwJaAHwJgWxf0rYRnMNwmvtGE\n8kg5T7kv2C61RTpamx2Ykw4UDfYFMmb5dez4jXQJU5mRFL/1AsBZwc7jje24\n6+xwg6wqq4kbg10yg5PMGPqUbmlK4ja4ch6/2IZYu14t5zb4v9RJfDhStZSg\nS5OBX38aBI7gEGfeBAJbkaJ52jKFkXoUUrj5VeNFZbqoKpnkdSfRBdFiSBsC\nxkPK\r\n=DyT7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxGdyxwONUYnuL/z2pXyt68n7jXdiQACR6PN6z47VOXgIgFZ2Cztb7TCTxHTaPK/AhSh+Dqcl4MJvHvfkmXMwRBYY="}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"_npmUser":{"name":"donavon","email":"github@donavon.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_2.3.0-alpha.2_1549949441748_0.4195095543185534"},"_hasShrinkwrap":false},"2.3.0-alpha.3":{"name":"use-dark-mode","publishConfig":{"tag":"next"},"version":"2.3.0-alpha.3","description":"A custom React Hook to help you implement a \"dark mode\" component.","main":"dist/use-dark-mode.js","umd:main":"dist/use-dark-mode.umd.js","module":"dist/use-dark-mode.m.js","source":"src/index.js","types":"types/index.d.ts","license":"MIT","repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"author":{"name":"donavon"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"^16.8.0","react-dom":"^16.8.0","react-testing-library":"^5.5.0","rimraf":"^2.6.2"},"peerDependencies":{"react":"^16.8.0"},"jest":{"coverageThreshold":{"global":{"branches":0,"functions":0,"lines":0,"statements":0}}},"dependencies":{"use-persisted-state":"^0.3.0"},"readme":"# use-dark-mode\n\nA custom [React Hook](https://reactjs.org/docs/hooks-overview.html) to help you implement a \"dark mode\" component for your application.\n\n[![npm version](https://badge.fury.io/js/use-dark-mode.svg)](https://badge.fury.io/js/use-dark-mode) [![Build Status](https://travis-ci.com/donavon/use-dark-mode.svg?branch=develop)](https://travis-ci.com/donavon/use-dark-mode) [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors)\n\n![usedarkmode-small](https://user-images.githubusercontent.com/887639/51113468-079ee100-17d0-11e9-8a35-e29b12b74740.gif)\n\n`useDarkMode` works in one of two ways:\n\n1.  By toggling a CSS class on whatever element you specify (defaults to `document.body`).\n    You then setup your CSS to display different views based on the presence of the selector. For example, the following CSS is used in the demo app to ease the background color in/out of dark mode.\n\n    ```css\n    body.light-mode {\n      background-color: #fff;\n      color: #333;\n      transition: background-color 0.3s ease;\n    }\n    body.dark-mode {\n      background-color: #1a1919;\n      color: #999;\n    }\n    ```\n\n2.  If you don't use global classes, you can specify an `onChange` handler and take care of the implementation of switching to dark mode yourself.\n\n## New in Version 2.x\n\n* `useDarkMode` now persists between sessions. It stores the user setting in\n`localStorage`.\n\n* It shares dark mode state with all other `useDarkMode` components on the page.\n\n* It shares dark mode state with all other tabs/browser windows.\n\n* The initial dark mode is queried from the system. Note: this requires a browser that supports the `prefers-color-scheme: dark` media query\n(currently only [Safari Technology Preview](https://developer.apple.com/safari/technology-preview/release-notes/))\nand a system that supports dark mode, such as macOS Mojave.\n\n* Changing the system dark mode state will also change the state of `useDarkMode`\n(i.e, change to light mode in the system will change to light mode in your app).\n\n* Support for Server Side Rendering (SSR) in version 2.2 and above.\n\n## Requirement\n\nTo use `use-dark-mode`, you must use `react@16.8.0` or greater which includes Hooks.\n\n## Installation\n\n```sh\n$ npm i use-dark-mode\n```\n\n## Usage\n\n```js\nconst darkMode = useDarkMode(initialState, optionalConfigObject);\n```\n\n### Config\n\nYou pass `useDarkMode` an `initialState` (a boolean specifying whether it should be in dark mode\nby default) and an optional configuration object. The configuration object contains the following.\n\n| Key         | Description                                                                                                                                                                                                                                                                                        |\n| :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `classNameDark` | The class to apply. Default = `dark-mode`.                                                                                                                                                                                                                                                         |\n| `classNameLight` | The class to apply. Default = `light-mode`.                                                                                                                                                                                                                                                         |\n| `element`   | The element to apply the class name. Default = `document.body`.                                                                                                                                                                                                                                    |\n| `onChange`  | A function that will be called when the dark mode value changes and it is safe to access the DOM (i.e. it is called from within a `useEffect`). If you specify `onChange` then `classNameDark`, `classNameLight`, and `element` are ignored (i.e. no classes are automatically placed on the DOM). You have full control! |\n\n### Return object\n\nA `darkMode` object is returned with the following properties.\n\n| Key         | Description                                             |\n| :---------- | :------------------------------------------------------ |\n| `value`     | A boolean containing the current state of dark mode.    |\n| `enable()`  | A function that allows you to set dark mode to `true`.  |\n| `disable()` | A function that allows you to set dark mode to `false`. |\n| `toggle()`  | A function that allows you to toggle dark mode.         |\n\n## Example\n\nHere is a simple component that uses `useDarkMode` to provide a dark mode toggle control.\nIf dark mode is selected, the CSS class `dark-mode` is applied to `document.body` and is removed\nwhen de-selected.\n\n```jsx\nimport React from 'react';\nimport useDarkMode from 'use-dark-mode';\n\nimport Toggle from './Toggle';\n\nconst DarkModeToggle = () => {\n  const darkMode = useDarkMode(false);\n\n  return (\n    <div>\n      <button type=\"button\" onClick={darkMode.disable}>\n        ☀\n      </button>\n      <Toggle checked={darkMode.value} onChange={darkMode.toggle} />\n      <button type=\"button\" onClick={darkMode.enable}>\n        ☾\n      </button>\n    </div>\n  );\n};\n\nexport default DarkModeToggle;\n```\n\n## That flash!\n\nIf your CSS is setup to default to light mode, but the user selects dark mode,\nthe next time they visit your app, they will be in dark mode.\nHowever, the user will see a flash of light mode before the app is spun up\nand `useDarkMode` is called.\n\nTo prevent this, I've included some vanilla JavaScript that you can insert in your\n`index.html` just after the `<body>` tag. It is in a file named [noflash.js.txt](https://github.com/donavon/use-dark-mode/blob/develop/noflash.js.txt).\nYou can either insert the contents of this file in a `<script>` tag or automate the\nstep in your build process.\n\n## Live demo\n\nYou can view/edit a dark mode demo app on CodeSandbox.\n\n[![Edit demo app on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mzj64x80ny)\n\n## License\n\n**[MIT](LICENSE)** Licensed\n\n---\n\nA special thanks to [@revelcw](https://twitter.com/revelcw) for his help and inspiration on this package.\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore -->\n| [<img src=\"https://avatars3.githubusercontent.com/u/887639?v=4\" width=\"100px;\" alt=\"Donavon West\"/><br /><sub><b>Donavon West</b></sub>](http://donavon.com)<br />[🚇](#infra-donavon \"Infrastructure (Hosting, Build-Tools, etc)\") [⚠️](https://github.com/donavon/use-dark-mode/commits?author=donavon \"Tests\") [💡](#example-donavon \"Examples\") [🤔](#ideas-donavon \"Ideas, Planning, & Feedback\") [🚧](#maintenance-donavon \"Maintenance\") [👀](#review-donavon \"Reviewed Pull Requests\") [🔧](#tool-donavon \"Tools\") [💻](https://github.com/donavon/use-dark-mode/commits?author=donavon \"Code\") | [<img src=\"https://avatars2.githubusercontent.com/u/29359616?v=4\" width=\"100px;\" alt=\"Revel Carlberg West\"/><br /><sub><b>Revel Carlberg West</b></sub>](https://github.com/revelcw)<br />[🤔](#ideas-revelcw \"Ideas, Planning, & Feedback\") | [<img src=\"https://avatars2.githubusercontent.com/u/9800850?v=4\" width=\"100px;\" alt=\"Mateusz Burzyński\"/><br /><sub><b>Mateusz Burzyński</b></sub>](https://github.com/Andarist)<br />[💻](https://github.com/donavon/use-dark-mode/commits?author=Andarist \"Code\") | [<img src=\"https://avatars1.githubusercontent.com/u/1288694?v=4\" width=\"100px;\" alt=\"Justin Hall\"/><br /><sub><b>Justin Hall</b></sub>](https://github.com/wKovacs64)<br />[💻](https://github.com/donavon/use-dark-mode/commits?author=wKovacs64 \"Code\") | [<img src=\"https://avatars1.githubusercontent.com/u/24556921?v=4\" width=\"100px;\" alt=\"Jeremy\"/><br /><sub><b>Jeremy</b></sub>](https://github.com/fxbabys)<br />[📓](#userTesting-fxbabys \"User Testing\") [🐛](https://github.com/donavon/use-dark-mode/issues?q=author%3Afxbabys \"Bug reports\") |\n| :---: | :---: | :---: | :---: | :---: |\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"cb9abe0af0a8b932837520a1e7f2783e121ffcb1","bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"},"homepage":"https://github.com/donavon/use-dark-mode#readme","_id":"use-dark-mode@2.3.0-alpha.3","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-41aek5Z/h+waC1sfM4ilfgTnkpyPzozPzGZNcQJouNzPzzAm+dDj7taVULOW2OjJKvnvFM3yvAAWkyGSb9QdQw==","shasum":"457fd05c8b0f0776bc240c1d00f8c857f3d832ca","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-2.3.0-alpha.3.tgz","fileCount":8,"unpackedSize":17065,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcYls6CRA9TVsSAnZWagAAAkcP/18WgSba7IY42qJi2DkE\nVfzyiSrq75dgUs9YZsUkbLV6M2S8O6ocSQRjNKaaX5sveluC72lts8aXJK12\n/AM1m/uEnL2QqQR5L24/3+8NnPasxYELV5yFCIcGFcaVz38cDEH8SMWJFPnD\nDBc7mbBLej8UTXAY4Nl8wUGDpmbOi/P956jWPZ8RpqDKIp1dipxh7d2I8+ql\nqNzE6oA1SX9icMvLAis2vz1OroeopAf506dVCh8fZ6/QjA6XWZbDWa+H7Yra\njbVwf2rbP68YuoZHC8nJQtll4hkltao757Jf7NbnRVkU30u6Beldu3NgbxyT\nz/MWCwbnECyZzwGBTKMaUuEQ+j4NGGeq3fNoRetcIq8uc80K9S0fpn/am/T2\nTtdJwRfcWP7yRnqW6QrckR04tUfHjRxuZFbeY6CiUPctSjwpvIz0vV2l+ORt\nDM0I17wskjTkACzlQrMnCqXrMP17SFmfOMjImYsY4kYoEDumTcuoAP1tN5Hu\nOaxaHefp4ooCnIKw8q+Bnbep3sz4dH6y7BYEucSH4vo6ou657fcSXV/Wef7u\n3RaxxF9ebWhp3inqvu66710hWfh6blEwAU4pfiwOkPLqUkb3jhxEY4pl6KXe\nMjqmgmGmGbw06/70iIf7hkQbKWZsi7Obris44W9NxfJ0F1IXav8TjHhViEJg\nMDql\r\n=Q659\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDGOMP/aGR6P9ZQpAWbczIRpD8YdF8OrcOoOVENsB4PeAiEA9X/4gg1MUfi44cWr164mk1TxNIIZMfKjk9pdoXT2Kbg="}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"_npmUser":{"name":"donavon","email":"github@donavon.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_2.3.0-alpha.3_1549949753649_0.7222587961106637"},"_hasShrinkwrap":false},"2.3.0-alpha.4":{"name":"use-dark-mode","publishConfig":{"tag":"next"},"version":"2.3.0-alpha.4","description":"A custom React Hook to help you implement a \"dark mode\" component.","main":"dist/use-dark-mode.js","umd:main":"dist/use-dark-mode.umd.js","module":"dist/use-dark-mode.m.js","source":"src/index.js","types":"types/index.d.ts","license":"MIT","repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"author":{"name":"donavon"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"^16.8.0","react-dom":"^16.8.0","react-testing-library":"^5.5.0","rimraf":"^2.6.2"},"peerDependencies":{"react":"^16.8.0"},"jest":{"coverageThreshold":{"global":{"branches":0,"functions":0,"lines":0,"statements":0}}},"dependencies":{"@use-it/event-listener":"^0.1.2","use-persisted-state":"^0.3.0"},"readme":"# use-dark-mode\n\nA custom [React Hook](https://reactjs.org/docs/hooks-overview.html) to help you implement a \"dark mode\" component for your application.\n\n[![npm version](https://badge.fury.io/js/use-dark-mode.svg)](https://badge.fury.io/js/use-dark-mode) [![Build Status](https://travis-ci.com/donavon/use-dark-mode.svg?branch=develop)](https://travis-ci.com/donavon/use-dark-mode) [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors)\n\n![usedarkmode-small](https://user-images.githubusercontent.com/887639/51113468-079ee100-17d0-11e9-8a35-e29b12b74740.gif)\n\n`useDarkMode` works in one of two ways:\n\n1.  By toggling a CSS class on whatever element you specify (defaults to `document.body`).\n    You then setup your CSS to display different views based on the presence of the selector. For example, the following CSS is used in the demo app to ease the background color in/out of dark mode.\n\n    ```css\n    body.light-mode {\n      background-color: #fff;\n      color: #333;\n      transition: background-color 0.3s ease;\n    }\n    body.dark-mode {\n      background-color: #1a1919;\n      color: #999;\n    }\n    ```\n\n2.  If you don't use global classes, you can specify an `onChange` handler and take care of the implementation of switching to dark mode yourself.\n\n## New in Version 2.x\n\n* `useDarkMode` now persists between sessions. It stores the user setting in\n`localStorage`.\n\n* It shares dark mode state with all other `useDarkMode` components on the page.\n\n* It shares dark mode state with all other tabs/browser windows.\n\n* The initial dark mode is queried from the system. Note: this requires a browser that supports the `prefers-color-scheme: dark` media query\n(currently only [Safari Technology Preview](https://developer.apple.com/safari/technology-preview/release-notes/))\nand a system that supports dark mode, such as macOS Mojave.\n\n* Changing the system dark mode state will also change the state of `useDarkMode`\n(i.e, change to light mode in the system will change to light mode in your app).\n\n* Support for Server Side Rendering (SSR) in version 2.2 and above.\n\n## Requirement\n\nTo use `use-dark-mode`, you must use `react@16.8.0` or greater which includes Hooks.\n\n## Installation\n\n```sh\n$ npm i use-dark-mode\n```\n\n## Usage\n\n```js\nconst darkMode = useDarkMode(initialState, optionalConfigObject);\n```\n\n### Config\n\nYou pass `useDarkMode` an `initialState` (a boolean specifying whether it should be in dark mode\nby default) and an optional configuration object. The configuration object contains the following.\n\n| Key         | Description                                                                                                                                                                                                                                                                                        |\n| :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `classNameDark` | The class to apply. Default = `dark-mode`.                                                                                                                                                                                                                                                         |\n| `classNameLight` | The class to apply. Default = `light-mode`.                                                                                                                                                                                                                                                         |\n| `element`   | The element to apply the class name. Default = `document.body`.                                                                                                                                                                                                                                    |\n| `onChange`  | A function that will be called when the dark mode value changes and it is safe to access the DOM (i.e. it is called from within a `useEffect`). If you specify `onChange` then `classNameDark`, `classNameLight`, and `element` are ignored (i.e. no classes are automatically placed on the DOM). You have full control! |\n\n### Return object\n\nA `darkMode` object is returned with the following properties.\n\n| Key         | Description                                             |\n| :---------- | :------------------------------------------------------ |\n| `value`     | A boolean containing the current state of dark mode.    |\n| `enable()`  | A function that allows you to set dark mode to `true`.  |\n| `disable()` | A function that allows you to set dark mode to `false`. |\n| `toggle()`  | A function that allows you to toggle dark mode.         |\n\n## Example\n\nHere is a simple component that uses `useDarkMode` to provide a dark mode toggle control.\nIf dark mode is selected, the CSS class `dark-mode` is applied to `document.body` and is removed\nwhen de-selected.\n\n```jsx\nimport React from 'react';\nimport useDarkMode from 'use-dark-mode';\n\nimport Toggle from './Toggle';\n\nconst DarkModeToggle = () => {\n  const darkMode = useDarkMode(false);\n\n  return (\n    <div>\n      <button type=\"button\" onClick={darkMode.disable}>\n        ☀\n      </button>\n      <Toggle checked={darkMode.value} onChange={darkMode.toggle} />\n      <button type=\"button\" onClick={darkMode.enable}>\n        ☾\n      </button>\n    </div>\n  );\n};\n\nexport default DarkModeToggle;\n```\n\n## That flash!\n\nIf your CSS is setup to default to light mode, but the user selects dark mode,\nthe next time they visit your app, they will be in dark mode.\nHowever, the user will see a flash of light mode before the app is spun up\nand `useDarkMode` is called.\n\nTo prevent this, I've included some vanilla JavaScript that you can insert in your\n`index.html` just after the `<body>` tag. It is in a file named [noflash.js.txt](https://github.com/donavon/use-dark-mode/blob/develop/noflash.js.txt).\nYou can either insert the contents of this file in a `<script>` tag or automate the\nstep in your build process.\n\n## Live demo\n\nYou can view/edit a dark mode demo app on CodeSandbox.\n\n[![Edit demo app on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mzj64x80ny)\n\n## License\n\n**[MIT](LICENSE)** Licensed\n\n---\n\nA special thanks to [@revelcw](https://twitter.com/revelcw) for his help and inspiration on this package.\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore -->\n| [<img src=\"https://avatars3.githubusercontent.com/u/887639?v=4\" width=\"100px;\" alt=\"Donavon West\"/><br /><sub><b>Donavon West</b></sub>](http://donavon.com)<br />[🚇](#infra-donavon \"Infrastructure (Hosting, Build-Tools, etc)\") [⚠️](https://github.com/donavon/use-dark-mode/commits?author=donavon \"Tests\") [💡](#example-donavon \"Examples\") [🤔](#ideas-donavon \"Ideas, Planning, & Feedback\") [🚧](#maintenance-donavon \"Maintenance\") [👀](#review-donavon \"Reviewed Pull Requests\") [🔧](#tool-donavon \"Tools\") [💻](https://github.com/donavon/use-dark-mode/commits?author=donavon \"Code\") | [<img src=\"https://avatars2.githubusercontent.com/u/29359616?v=4\" width=\"100px;\" alt=\"Revel Carlberg West\"/><br /><sub><b>Revel Carlberg West</b></sub>](https://github.com/revelcw)<br />[🤔](#ideas-revelcw \"Ideas, Planning, & Feedback\") | [<img src=\"https://avatars2.githubusercontent.com/u/9800850?v=4\" width=\"100px;\" alt=\"Mateusz Burzyński\"/><br /><sub><b>Mateusz Burzyński</b></sub>](https://github.com/Andarist)<br />[💻](https://github.com/donavon/use-dark-mode/commits?author=Andarist \"Code\") | [<img src=\"https://avatars1.githubusercontent.com/u/1288694?v=4\" width=\"100px;\" alt=\"Justin Hall\"/><br /><sub><b>Justin Hall</b></sub>](https://github.com/wKovacs64)<br />[💻](https://github.com/donavon/use-dark-mode/commits?author=wKovacs64 \"Code\") | [<img src=\"https://avatars1.githubusercontent.com/u/24556921?v=4\" width=\"100px;\" alt=\"Jeremy\"/><br /><sub><b>Jeremy</b></sub>](https://github.com/fxbabys)<br />[📓](#userTesting-fxbabys \"User Testing\") [🐛](https://github.com/donavon/use-dark-mode/issues?q=author%3Afxbabys \"Bug reports\") |\n| :---: | :---: | :---: | :---: | :---: |\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"f54b4a205a61f6820dc73ec8914be98e46ac70e8","bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"},"homepage":"https://github.com/donavon/use-dark-mode#readme","_id":"use-dark-mode@2.3.0-alpha.4","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-FNuB+ET4Y2aetVdop8jPcZUQn+fNQdglJa0mYpXqQrr0VUBFrCp4DATtpkEI3uqsATJ1dyFns9VMoj4PiO9UpQ==","shasum":"6adc88ccaf19e60a98da5fea1e7cff241c2adccb","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-2.3.0-alpha.4.tgz","fileCount":8,"unpackedSize":17915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcYv8OCRA9TVsSAnZWagAAkhcQAIXlwvj7oPaSQA+dSiL+\nkMI9gq/XueCpQChAlplDSrNDZ/Y9PCzJP4lJM/Knldu+LPokwDd6O4tt23L5\nscDP8nvH9MAcHd3jTYsSquOkMkAK9Lhryen0xAediq1yhslmVzfnuKTVXOoy\nRgYA36z4y89OO/GyBplwfOWQhyx+kVx9fthvh1mrmFX7Mt6CBAHcDOBDC9R9\n+xOBwaUkLUbOFKs2BfVcRRWIm/EjYl6LvRZCUiIi1SzdKh0KFY3w56g9C7A+\nd7NmgHc6x6RSYnVD7bK/FkneNjaEh2gU6/RdhNAeAdJ4Bu1mkS/CzWlD/dB6\nZzNhvk9PLodaRA5rI+YPi6XChMOddbmUJWRDRmDtT6nQeV+V7+tPguI+Y/RN\nH0VkW+6x+/A4lgZI7Aies7kgpi7pKrEr6v1m/QYgdQ0IWL40rY9EWS77ZkD4\nN1a5gKCslBFphBJ9CdE6+dCuvg9ihjB/368iTBNL5pZfLJLmAWSSZfPZe4zV\n0MesoZk8zUrcAxSgzKVQga/40XFkmUuTMF0vwHsoHg42WZq5buFo4HAcq5sJ\nYYrkMQs0Z887M+0iJvD7DXKWSdFg9JRfrLvWENA30cCNBZ9hfcQR4y7KH42W\nvBVw9TtY2+RSfJyGv3C4W2zbvzj/qIgSNrxhNYnSJIULl+zbwN3Gvh1+gtRF\npDWR\r\n=DAz7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1+gCU0nwkWhyZKxXmJTNKFxoHXePmUmdhafckFv7WKwIhAN6df7H+xwGOvIkKkoLTKMc/698lAcHnNFIRIQSaTYau"}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"_npmUser":{"name":"donavon","email":"github@donavon.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_2.3.0-alpha.4_1549991693914_0.01372905770630295"},"_hasShrinkwrap":false},"2.3.0-alpha.5":{"name":"use-dark-mode","publishConfig":{"tag":"next"},"version":"2.3.0-alpha.5","description":"A custom React Hook to help you implement a \"dark mode\" component.","main":"dist/use-dark-mode.js","umd:main":"dist/use-dark-mode.umd.js","module":"dist/use-dark-mode.m.js","source":"src/index.js","types":"types/index.d.ts","license":"MIT","repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"author":{"name":"donavon"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"^16.8.0","react-dom":"^16.8.0","react-testing-library":"^5.5.0","rimraf":"^2.6.2"},"peerDependencies":{"react":"^16.8.0"},"jest":{"coverageThreshold":{"global":{"branches":0,"functions":0,"lines":0,"statements":0}}},"dependencies":{"@use-it/event-listener":"^0.1.2","use-persisted-state":"^0.3.0"},"readme":"# use-dark-mode\n\nA custom [React Hook](https://reactjs.org/docs/hooks-overview.html) to help you implement a \"dark mode\" component for your application.\n\n[![npm version](https://badge.fury.io/js/use-dark-mode.svg)](https://badge.fury.io/js/use-dark-mode) [![Build Status](https://travis-ci.com/donavon/use-dark-mode.svg?branch=develop)](https://travis-ci.com/donavon/use-dark-mode) [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors)\n\n![usedarkmode-small](https://user-images.githubusercontent.com/887639/51113468-079ee100-17d0-11e9-8a35-e29b12b74740.gif)\n\n`useDarkMode` works in one of two ways:\n\n1.  By toggling a CSS class on whatever element you specify (defaults to `document.body`).\n    You then setup your CSS to display different views based on the presence of the selector. For example, the following CSS is used in the demo app to ease the background color in/out of dark mode.\n\n    ```css\n    body.light-mode {\n      background-color: #fff;\n      color: #333;\n      transition: background-color 0.3s ease;\n    }\n    body.dark-mode {\n      background-color: #1a1919;\n      color: #999;\n    }\n    ```\n\n2.  If you don't use global classes, you can specify an `onChange` handler and take care of the implementation of switching to dark mode yourself.\n\n## New in Version 2.x\n\n* `useDarkMode` now persists between sessions. It stores the user setting in\n`localStorage`.\n\n* It shares dark mode state with all other `useDarkMode` components on the page.\n\n* It shares dark mode state with all other tabs/browser windows.\n\n* The initial dark mode is queried from the system. Note: this requires a browser that supports the `prefers-color-scheme: dark` media query\n(currently only [Safari Technology Preview](https://developer.apple.com/safari/technology-preview/release-notes/))\nand a system that supports dark mode, such as macOS Mojave.\n\n* Changing the system dark mode state will also change the state of `useDarkMode`\n(i.e, change to light mode in the system will change to light mode in your app).\n\n* Support for Server Side Rendering (SSR) in version 2.2 and above.\n\n## Requirement\n\nTo use `use-dark-mode`, you must use `react@16.8.0` or greater which includes Hooks.\n\n## Installation\n\n```sh\n$ npm i use-dark-mode\n```\n\n## Usage\n\n```js\nconst darkMode = useDarkMode(initialState, optionalConfigObject);\n```\n\n### Config\n\nYou pass `useDarkMode` an `initialState` (a boolean specifying whether it should be in dark mode\nby default) and an optional configuration object. The configuration object contains the following.\n\n| Key         | Description                                                                                                                                                                                                                                                                                        |\n| :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `classNameDark` | The class to apply. Default = `dark-mode`.                                                                                                                                                                                                                                                         |\n| `classNameLight` | The class to apply. Default = `light-mode`.                                                                                                                                                                                                                                                         |\n| `element`   | The element to apply the class name. Default = `document.body`.                                                                                                                                                                                                                                    |\n| `onChange`  | A function that will be called when the dark mode value changes and it is safe to access the DOM (i.e. it is called from within a `useEffect`). If you specify `onChange` then `classNameDark`, `classNameLight`, and `element` are ignored (i.e. no classes are automatically placed on the DOM). You have full control! |\n\n### Return object\n\nA `darkMode` object is returned with the following properties.\n\n| Key         | Description                                             |\n| :---------- | :------------------------------------------------------ |\n| `value`     | A boolean containing the current state of dark mode.    |\n| `enable()`  | A function that allows you to set dark mode to `true`.  |\n| `disable()` | A function that allows you to set dark mode to `false`. |\n| `toggle()`  | A function that allows you to toggle dark mode.         |\n\n## Example\n\nHere is a simple component that uses `useDarkMode` to provide a dark mode toggle control.\nIf dark mode is selected, the CSS class `dark-mode` is applied to `document.body` and is removed\nwhen de-selected.\n\n```jsx\nimport React from 'react';\nimport useDarkMode from 'use-dark-mode';\n\nimport Toggle from './Toggle';\n\nconst DarkModeToggle = () => {\n  const darkMode = useDarkMode(false);\n\n  return (\n    <div>\n      <button type=\"button\" onClick={darkMode.disable}>\n        ☀\n      </button>\n      <Toggle checked={darkMode.value} onChange={darkMode.toggle} />\n      <button type=\"button\" onClick={darkMode.enable}>\n        ☾\n      </button>\n    </div>\n  );\n};\n\nexport default DarkModeToggle;\n```\n\n## That flash!\n\nIf your CSS is setup to default to light mode, but the user selects dark mode,\nthe next time they visit your app, they will be in dark mode.\nHowever, the user will see a flash of light mode before the app is spun up\nand `useDarkMode` is called.\n\nTo prevent this, I've included some vanilla JavaScript that you can insert in your\n`index.html` just after the `<body>` tag. It is in a file named [noflash.js.txt](https://github.com/donavon/use-dark-mode/blob/develop/noflash.js.txt).\nYou can either insert the contents of this file in a `<script>` tag or automate the\nstep in your build process.\n\n## Live demo\n\nYou can view/edit a dark mode demo app on CodeSandbox.\n\n[![Edit demo app on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mzj64x80ny)\n\n## License\n\n**[MIT](LICENSE)** Licensed\n\n---\n\nA special thanks to [@revelcw](https://twitter.com/revelcw) for his help and inspiration on this package.\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore -->\n| [<img src=\"https://avatars3.githubusercontent.com/u/887639?v=4\" width=\"100px;\" alt=\"Donavon West\"/><br /><sub><b>Donavon West</b></sub>](http://donavon.com)<br />[🚇](#infra-donavon \"Infrastructure (Hosting, Build-Tools, etc)\") [⚠️](https://github.com/donavon/use-dark-mode/commits?author=donavon \"Tests\") [💡](#example-donavon \"Examples\") [🤔](#ideas-donavon \"Ideas, Planning, & Feedback\") [🚧](#maintenance-donavon \"Maintenance\") [👀](#review-donavon \"Reviewed Pull Requests\") [🔧](#tool-donavon \"Tools\") [💻](https://github.com/donavon/use-dark-mode/commits?author=donavon \"Code\") | [<img src=\"https://avatars2.githubusercontent.com/u/29359616?v=4\" width=\"100px;\" alt=\"Revel Carlberg West\"/><br /><sub><b>Revel Carlberg West</b></sub>](https://github.com/revelcw)<br />[🤔](#ideas-revelcw \"Ideas, Planning, & Feedback\") | [<img src=\"https://avatars2.githubusercontent.com/u/9800850?v=4\" width=\"100px;\" alt=\"Mateusz Burzyński\"/><br /><sub><b>Mateusz Burzyński</b></sub>](https://github.com/Andarist)<br />[💻](https://github.com/donavon/use-dark-mode/commits?author=Andarist \"Code\") | [<img src=\"https://avatars1.githubusercontent.com/u/1288694?v=4\" width=\"100px;\" alt=\"Justin Hall\"/><br /><sub><b>Justin Hall</b></sub>](https://github.com/wKovacs64)<br />[💻](https://github.com/donavon/use-dark-mode/commits?author=wKovacs64 \"Code\") | [<img src=\"https://avatars1.githubusercontent.com/u/24556921?v=4\" width=\"100px;\" alt=\"Jeremy\"/><br /><sub><b>Jeremy</b></sub>](https://github.com/fxbabys)<br />[📓](#userTesting-fxbabys \"User Testing\") [🐛](https://github.com/donavon/use-dark-mode/issues?q=author%3Afxbabys \"Bug reports\") |\n| :---: | :---: | :---: | :---: | :---: |\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"f54b4a205a61f6820dc73ec8914be98e46ac70e8","bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"},"homepage":"https://github.com/donavon/use-dark-mode#readme","_id":"use-dark-mode@2.3.0-alpha.5","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-TLhP0rZL7DyXhg2VBknVBC0kD5uGVs04ZxRW4PUyqE24EZPV5wkk3fsStGjsp8LB55P9YdI9qzAecWAvdzC5Fw==","shasum":"2a675f6a3f5ccfc38461539f246af3986ed5b376","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-2.3.0-alpha.5.tgz","fileCount":8,"unpackedSize":18003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcYwZrCRA9TVsSAnZWagAAcXIQAIs0PuJ/KaQOhWZL5vrC\nFgoPG6a1I6NX3zQCpXoqXh+0R9Pyyg+r8Ag8XDe9wOYt29kIT9A48722Wmfo\nOixD3vlziC/p7Zfradl+l4zHMGylP8Qxg7nMtqlYJVGrjbgh2n5mg5wqi/zw\np18NjPxMlRJEaAcBJDXG7P+r0vhCxJAw1rFxgDb7Z+q8k1MinWFPKjw4lprc\n15v56VIPGmD28GGJSq67xHxHF+BW+D7urpr2+G2wTOG5JpSHGrbR7eNAWuer\njBixWBt7zWcjxdujFxBsVjAbBriySB79iMszjlv7Jw4ePvwhGu+LQQTPsox3\ne8TeVNHRaGNacFX6r8mieufizxZSzadg1ACj6aoAjZYoaFYF2aadErUP1JI1\nzrEKdpK56oNmMvITc1B1lkRiH4EntS/j+SUF96k04QDlpfneIN8doYok2C9r\n4zejcvIPpuCl0zVT9Z8M1u8z7+OzQMLRRlM++XsHTYm/tqQHkLXd+QzKrH2i\nAo3Qlpzvb9fQG+IVgsilT3PlsPCvLbBqPFuiPaQJ6I9Xsb43mvhvcb2K+Qc0\nFRCD+vSEOvP475y1MsQPgC3Ah2tWQTeZR5vO1dyapVt5mEqZvNGltAvpRonw\nbL7XuqaNJff834Q88ExOPIs490UThWLp49Xy2fdTgksCIAT8sxWCAv0LJp7H\nNEl4\r\n=sV+Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB5Qoj/4ULULjp/AFdTglGhw2B66nTYO4OSNmgibSwdsAiAS8HHofF8eQ/sxUR6FPSA3vUCBd0EvnEhR9dIvlmB5AQ=="}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"_npmUser":{"name":"donavon","email":"github@donavon.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_2.3.0-alpha.5_1549993578975_0.5605585969419464"},"_hasShrinkwrap":false},"2.3.0-alpha.6":{"name":"use-dark-mode","publishConfig":{"tag":"next"},"version":"2.3.0-alpha.6","description":"A custom React Hook to help you implement a \"dark mode\" component.","main":"dist/use-dark-mode.js","umd:main":"dist/use-dark-mode.umd.js","module":"dist/use-dark-mode.m.js","source":"src/index.js","types":"types/index.d.ts","license":"MIT","repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"author":{"name":"donavon"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"^16.8.0","react-dom":"^16.8.0","react-testing-library":"^5.5.0","rimraf":"^2.6.2"},"peerDependencies":{"react":"^16.8.0"},"jest":{"coverageThreshold":{"global":{"branches":0,"functions":0,"lines":0,"statements":0}}},"dependencies":{"@use-it/event-listener":"^0.1.2","use-persisted-state":"^0.3.0"},"readme":"# use-dark-mode\n\nA custom [React Hook](https://reactjs.org/docs/hooks-overview.html) to help you implement a \"dark mode\" component for your application.\n\n[![npm version](https://badge.fury.io/js/use-dark-mode.svg)](https://badge.fury.io/js/use-dark-mode) [![Build Status](https://travis-ci.com/donavon/use-dark-mode.svg?branch=develop)](https://travis-ci.com/donavon/use-dark-mode) [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors)\n\n![usedarkmode-small](https://user-images.githubusercontent.com/887639/51113468-079ee100-17d0-11e9-8a35-e29b12b74740.gif)\n\n`useDarkMode` works in one of two ways:\n\n1.  By toggling a CSS class on whatever element you specify (defaults to `document.body`).\n    You then setup your CSS to display different views based on the presence of the selector. For example, the following CSS is used in the demo app to ease the background color in/out of dark mode.\n\n    ```css\n    body.light-mode {\n      background-color: #fff;\n      color: #333;\n      transition: background-color 0.3s ease;\n    }\n    body.dark-mode {\n      background-color: #1a1919;\n      color: #999;\n    }\n    ```\n\n2.  If you don't use global classes, you can specify an `onChange` handler and take care of the implementation of switching to dark mode yourself.\n\n## New in Version 2.x\n\n* `useDarkMode` now persists between sessions. It stores the user setting in\n`localStorage`.\n\n* It shares dark mode state with all other `useDarkMode` components on the page.\n\n* It shares dark mode state with all other tabs/browser windows.\n\n* The initial dark mode is queried from the system. Note: this requires a browser that supports the `prefers-color-scheme: dark` media query\n(currently only [Safari Technology Preview](https://developer.apple.com/safari/technology-preview/release-notes/))\nand a system that supports dark mode, such as macOS Mojave.\n\n* Changing the system dark mode state will also change the state of `useDarkMode`\n(i.e, change to light mode in the system will change to light mode in your app).\n\n* Support for Server Side Rendering (SSR) in version 2.2 and above.\n\n## Requirement\n\nTo use `use-dark-mode`, you must use `react@16.8.0` or greater which includes Hooks.\n\n## Installation\n\n```sh\n$ npm i use-dark-mode\n```\n\n## Usage\n\n```js\nconst darkMode = useDarkMode(initialState, optionalConfigObject);\n```\n\n### Config\n\nYou pass `useDarkMode` an `initialState` (a boolean specifying whether it should be in dark mode\nby default) and an optional configuration object. The configuration object contains the following.\n\n| Key         | Description                                                                                                                                                                                                                                                                                        |\n| :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `classNameDark` | The class to apply. Default = `dark-mode`.                                                                                                                                                                                                                                                         |\n| `classNameLight` | The class to apply. Default = `light-mode`.                                                                                                                                                                                                                                                         |\n| `element`   | The element to apply the class name. Default = `document.body`.                                                                                                                                                                                                                                    |\n| `onChange`  | A function that will be called when the dark mode value changes and it is safe to access the DOM (i.e. it is called from within a `useEffect`). If you specify `onChange` then `classNameDark`, `classNameLight`, and `element` are ignored (i.e. no classes are automatically placed on the DOM). You have full control! |\n\n### Return object\n\nA `darkMode` object is returned with the following properties.\n\n| Key         | Description                                             |\n| :---------- | :------------------------------------------------------ |\n| `value`     | A boolean containing the current state of dark mode.    |\n| `enable()`  | A function that allows you to set dark mode to `true`.  |\n| `disable()` | A function that allows you to set dark mode to `false`. |\n| `toggle()`  | A function that allows you to toggle dark mode.         |\n\n## Example\n\nHere is a simple component that uses `useDarkMode` to provide a dark mode toggle control.\nIf dark mode is selected, the CSS class `dark-mode` is applied to `document.body` and is removed\nwhen de-selected.\n\n```jsx\nimport React from 'react';\nimport useDarkMode from 'use-dark-mode';\n\nimport Toggle from './Toggle';\n\nconst DarkModeToggle = () => {\n  const darkMode = useDarkMode(false);\n\n  return (\n    <div>\n      <button type=\"button\" onClick={darkMode.disable}>\n        ☀\n      </button>\n      <Toggle checked={darkMode.value} onChange={darkMode.toggle} />\n      <button type=\"button\" onClick={darkMode.enable}>\n        ☾\n      </button>\n    </div>\n  );\n};\n\nexport default DarkModeToggle;\n```\n\n## That flash!\n\nIf your CSS is setup to default to light mode, but the user selects dark mode,\nthe next time they visit your app, they will be in dark mode.\nHowever, the user will see a flash of light mode before the app is spun up\nand `useDarkMode` is called.\n\nTo prevent this, I've included some vanilla JavaScript that you can insert in your\n`index.html` just after the `<body>` tag. It is in a file named [noflash.js.txt](https://github.com/donavon/use-dark-mode/blob/develop/noflash.js.txt).\nYou can either insert the contents of this file in a `<script>` tag or automate the\nstep in your build process.\n\n## Live demo\n\nYou can view/edit a dark mode demo app on CodeSandbox.\n\n[![Edit demo app on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mzj64x80ny)\n\n## License\n\n**[MIT](LICENSE)** Licensed\n\n---\n\nA special thanks to [@revelcw](https://twitter.com/revelcw) for his help and inspiration on this package.\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore -->\n| [<img src=\"https://avatars3.githubusercontent.com/u/887639?v=4\" width=\"100px;\" alt=\"Donavon West\"/><br /><sub><b>Donavon West</b></sub>](http://donavon.com)<br />[🚇](#infra-donavon \"Infrastructure (Hosting, Build-Tools, etc)\") [⚠️](https://github.com/donavon/use-dark-mode/commits?author=donavon \"Tests\") [💡](#example-donavon \"Examples\") [🤔](#ideas-donavon \"Ideas, Planning, & Feedback\") [🚧](#maintenance-donavon \"Maintenance\") [👀](#review-donavon \"Reviewed Pull Requests\") [🔧](#tool-donavon \"Tools\") [💻](https://github.com/donavon/use-dark-mode/commits?author=donavon \"Code\") | [<img src=\"https://avatars2.githubusercontent.com/u/29359616?v=4\" width=\"100px;\" alt=\"Revel Carlberg West\"/><br /><sub><b>Revel Carlberg West</b></sub>](https://github.com/revelcw)<br />[🤔](#ideas-revelcw \"Ideas, Planning, & Feedback\") | [<img src=\"https://avatars2.githubusercontent.com/u/9800850?v=4\" width=\"100px;\" alt=\"Mateusz Burzyński\"/><br /><sub><b>Mateusz Burzyński</b></sub>](https://github.com/Andarist)<br />[💻](https://github.com/donavon/use-dark-mode/commits?author=Andarist \"Code\") | [<img src=\"https://avatars1.githubusercontent.com/u/1288694?v=4\" width=\"100px;\" alt=\"Justin Hall\"/><br /><sub><b>Justin Hall</b></sub>](https://github.com/wKovacs64)<br />[💻](https://github.com/donavon/use-dark-mode/commits?author=wKovacs64 \"Code\") | [<img src=\"https://avatars1.githubusercontent.com/u/24556921?v=4\" width=\"100px;\" alt=\"Jeremy\"/><br /><sub><b>Jeremy</b></sub>](https://github.com/fxbabys)<br />[📓](#userTesting-fxbabys \"User Testing\") [🐛](https://github.com/donavon/use-dark-mode/issues?q=author%3Afxbabys \"Bug reports\") |\n| :---: | :---: | :---: | :---: | :---: |\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"f54b4a205a61f6820dc73ec8914be98e46ac70e8","bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"},"homepage":"https://github.com/donavon/use-dark-mode#readme","_id":"use-dark-mode@2.3.0-alpha.6","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-H9Z+O0lQbyPhKTufBKt9H/zuOec896NLXrpoUGgD2ppH8H3E5HFtW48DpDSA+pmr0IFXazOSxyH2UijAHwFgCQ==","shasum":"b23d5b587acd01f86ac99a0ff0fe7f6b8a9a4080","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-2.3.0-alpha.6.tgz","fileCount":8,"unpackedSize":19256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcY1AbCRA9TVsSAnZWagAAcdQP/03Gb3ZQ3g/uzBBw58Cl\nTycGg4ncl/EwL5/i00SyG6TLluTKnmp9ikJmzualmF048M5k2fDVisdlIyl8\nuwjlSFPdRFNtE4AAc/fvoZqOkb/FaqHaL0e8GhlWoUIW4CRAQI+l8kGLgxlc\n70i0MtCtH7aySjbSjnUDv/fYh+diY53XfW6npTKfXv08tUTHCfPNqRjrRrXI\n/rnf0GY/dzM6mCBEs0ehPk2YVInMFJdlUwAcXHa0Yma9hA46/wiMdQpy7M6g\nfj96PnZ5Pf2Jc3yP1JlR6rcHTG+Gmk6yWZDJGogZ3FB1fSxHop+Xf1c2pt8P\nrc8+gKWdkTx+Vj/DxncF3zkwR6ON6UwzFwPe0nUFGMwxNmixvhGHR67CGjb8\nReJsw2BTTQwBNrYYWMBiWRK9rmP/0G24Gj6JIVtDOjmUoDbK/sZ1fSY4serT\n8K4FJ+QtORNR14s6xGT+TRdZY9p1gjN02jUWqrinp8UYqo5jrJ0SP0QPSICL\nbA5diY4exBFFLUCug0tjV/eG1NpheeCwzwFc81531fX6lkKFcJcZbJB+OqBr\nzj2w0l7xOQSUIAYdhkEaJYT+dBhGkwwJJOJLQgt7yOuvSFXRppxUxA+Dym/I\nVuFFK5FDJsIfSsz71uPv9FB1WsojsFyGTt1nrBkfhk0Gc3TaGAh+8cf2XNn5\nQmcI\r\n=jInV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGNcQrU8hOh6m3lmEnD25upqedmjmL/9uzl68ixzCkqaAiA04mgB54FjvdtjPZEvv+7ORrbn94QgMkRC6+p1lJCbcg=="}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"_npmUser":{"name":"donavon","email":"github@donavon.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_2.3.0-alpha.6_1550012442939_0.05326455388299345"},"_hasShrinkwrap":false},"2.3.0-alpha.7":{"name":"use-dark-mode","publishConfig":{"tag":"next"},"version":"2.3.0-alpha.7","description":"A custom React Hook to help you implement a \"dark mode\" component.","main":"dist/use-dark-mode.js","umd:main":"dist/use-dark-mode.umd.js","module":"dist/use-dark-mode.m.js","source":"src/index.js","types":"types/index.d.ts","license":"MIT","repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"author":{"name":"donavon"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"^16.8.0","react-dom":"^16.8.0","react-testing-library":"^5.5.0","rimraf":"^2.6.2"},"peerDependencies":{"react":"^16.8.0"},"jest":{"coverageThreshold":{"global":{"branches":0,"functions":0,"lines":0,"statements":0}}},"dependencies":{"@use-it/event-listener":"^0.1.2","use-persisted-state":"^0.3.0"},"readme":"# use-dark-mode\n\nA custom [React Hook](https://reactjs.org/docs/hooks-overview.html) to help you implement a \"dark mode\" component for your application.\n\n[![npm version](https://badge.fury.io/js/use-dark-mode.svg)](https://badge.fury.io/js/use-dark-mode) [![Build Status](https://travis-ci.com/donavon/use-dark-mode.svg?branch=develop)](https://travis-ci.com/donavon/use-dark-mode) [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors)\n\n![usedarkmode-small](https://user-images.githubusercontent.com/887639/51113468-079ee100-17d0-11e9-8a35-e29b12b74740.gif)\n\n`useDarkMode` works in one of two ways:\n\n1.  By toggling a CSS class on whatever element you specify (defaults to `document.body`).\n    You then setup your CSS to display different views based on the presence of the selector. For example, the following CSS is used in the demo app to ease the background color in/out of dark mode.\n\n    ```css\n    body.light-mode {\n      background-color: #fff;\n      color: #333;\n      transition: background-color 0.3s ease;\n    }\n    body.dark-mode {\n      background-color: #1a1919;\n      color: #999;\n    }\n    ```\n\n2.  If you don't use global classes, you can specify an `onChange` handler and take care of the implementation of switching to dark mode yourself.\n\n## New in Version 2.x\n\n* `useDarkMode` now persists between sessions. It stores the user setting in\n`localStorage`.\n\n* It shares dark mode state with all other `useDarkMode` components on the page.\n\n* It shares dark mode state with all other tabs/browser windows.\n\n* The initial dark mode is queried from the system. Note: this requires a browser that supports the `prefers-color-scheme: dark` media query\n(currently only [Safari Technology Preview](https://developer.apple.com/safari/technology-preview/release-notes/))\nand a system that supports dark mode, such as macOS Mojave.\n\n* Changing the system dark mode state will also change the state of `useDarkMode`\n(i.e, change to light mode in the system will change to light mode in your app).\n\n* Support for Server Side Rendering (SSR) in version 2.2 and above.\n\n## Requirement\n\nTo use `use-dark-mode`, you must use `react@16.8.0` or greater which includes Hooks.\n\n## Installation\n\n```sh\n$ npm i use-dark-mode\n```\n\n## Usage\n\n```js\nconst darkMode = useDarkMode(initialState, optionalConfigObject);\n```\n\n### Config\n\nYou pass `useDarkMode` an `initialState` (a boolean specifying whether it should be in dark mode\nby default) and an optional configuration object. The configuration object contains the following.\n\n| Key         | Description                                                                                                                                                                                                                                                                                        |\n| :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `classNameDark` | The class to apply. Default = `dark-mode`.                                                                                                                                                                                                                                                         |\n| `classNameLight` | The class to apply. Default = `light-mode`.                                                                                                                                                                                                                                                         |\n| `element`   | The element to apply the class name. Default = `document.body`.                                                                                                                                                                                                                                    |\n| `onChange`  | A function that will be called when the dark mode value changes and it is safe to access the DOM (i.e. it is called from within a `useEffect`). If you specify `onChange` then `classNameDark`, `classNameLight`, and `element` are ignored (i.e. no classes are automatically placed on the DOM). You have full control! |\n\n### Return object\n\nA `darkMode` object is returned with the following properties.\n\n| Key         | Description                                             |\n| :---------- | :------------------------------------------------------ |\n| `value`     | A boolean containing the current state of dark mode.    |\n| `enable()`  | A function that allows you to set dark mode to `true`.  |\n| `disable()` | A function that allows you to set dark mode to `false`. |\n| `toggle()`  | A function that allows you to toggle dark mode.         |\n\n## Example\n\nHere is a simple component that uses `useDarkMode` to provide a dark mode toggle control.\nIf dark mode is selected, the CSS class `dark-mode` is applied to `document.body` and is removed\nwhen de-selected.\n\n```jsx\nimport React from 'react';\nimport useDarkMode from 'use-dark-mode';\n\nimport Toggle from './Toggle';\n\nconst DarkModeToggle = () => {\n  const darkMode = useDarkMode(false);\n\n  return (\n    <div>\n      <button type=\"button\" onClick={darkMode.disable}>\n        ☀\n      </button>\n      <Toggle checked={darkMode.value} onChange={darkMode.toggle} />\n      <button type=\"button\" onClick={darkMode.enable}>\n        ☾\n      </button>\n    </div>\n  );\n};\n\nexport default DarkModeToggle;\n```\n\n## That flash!\n\nIf your CSS is setup to default to light mode, but the user selects dark mode,\nthe next time they visit your app, they will be in dark mode.\nHowever, the user will see a flash of light mode before the app is spun up\nand `useDarkMode` is called.\n\nTo prevent this, I've included some vanilla JavaScript that you can insert in your\n`index.html` just after the `<body>` tag. It is in a file named [noflash.js.txt](https://github.com/donavon/use-dark-mode/blob/develop/noflash.js.txt).\nYou can either insert the contents of this file in a `<script>` tag or automate the\nstep in your build process.\n\n## Live demo\n\nYou can view/edit a dark mode demo app on CodeSandbox.\n\n[![Edit demo app on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mzj64x80ny)\n\n## License\n\n**[MIT](LICENSE)** Licensed\n\n---\n\nA special thanks to [@revelcw](https://twitter.com/revelcw) for his help and inspiration on this package.\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore -->\n| [<img src=\"https://avatars3.githubusercontent.com/u/887639?v=4\" width=\"100px;\" alt=\"Donavon West\"/><br /><sub><b>Donavon West</b></sub>](http://donavon.com)<br />[🚇](#infra-donavon \"Infrastructure (Hosting, Build-Tools, etc)\") [⚠️](https://github.com/donavon/use-dark-mode/commits?author=donavon \"Tests\") [💡](#example-donavon \"Examples\") [🤔](#ideas-donavon \"Ideas, Planning, & Feedback\") [🚧](#maintenance-donavon \"Maintenance\") [👀](#review-donavon \"Reviewed Pull Requests\") [🔧](#tool-donavon \"Tools\") [💻](https://github.com/donavon/use-dark-mode/commits?author=donavon \"Code\") | [<img src=\"https://avatars2.githubusercontent.com/u/29359616?v=4\" width=\"100px;\" alt=\"Revel Carlberg West\"/><br /><sub><b>Revel Carlberg West</b></sub>](https://github.com/revelcw)<br />[🤔](#ideas-revelcw \"Ideas, Planning, & Feedback\") | [<img src=\"https://avatars2.githubusercontent.com/u/9800850?v=4\" width=\"100px;\" alt=\"Mateusz Burzyński\"/><br /><sub><b>Mateusz Burzyński</b></sub>](https://github.com/Andarist)<br />[💻](https://github.com/donavon/use-dark-mode/commits?author=Andarist \"Code\") | [<img src=\"https://avatars1.githubusercontent.com/u/1288694?v=4\" width=\"100px;\" alt=\"Justin Hall\"/><br /><sub><b>Justin Hall</b></sub>](https://github.com/wKovacs64)<br />[💻](https://github.com/donavon/use-dark-mode/commits?author=wKovacs64 \"Code\") | [<img src=\"https://avatars1.githubusercontent.com/u/24556921?v=4\" width=\"100px;\" alt=\"Jeremy\"/><br /><sub><b>Jeremy</b></sub>](https://github.com/fxbabys)<br />[📓](#userTesting-fxbabys \"User Testing\") [🐛](https://github.com/donavon/use-dark-mode/issues?q=author%3Afxbabys \"Bug reports\") |\n| :---: | :---: | :---: | :---: | :---: |\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"f54b4a205a61f6820dc73ec8914be98e46ac70e8","bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"},"homepage":"https://github.com/donavon/use-dark-mode#readme","_id":"use-dark-mode@2.3.0-alpha.7","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-uNrnJxDb/YUgkfPgd0mK/2urahli5sto7nqMhqBETCdmkyYARNSoU2skT1eTusyO61pA4ur1QpDSTwwDCZf9gg==","shasum":"488c1c48b0a88b2de5a58403ca0c07157559a81d","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-2.3.0-alpha.7.tgz","fileCount":8,"unpackedSize":19271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcY1O3CRA9TVsSAnZWagAA8p0P/0qr//tq9hdZTQW8Z44u\nzCLKM7rTKLQCPN2GZFwD2Id0J+oTbngGceXL8U40YdOgI3BSHqW8K6g49M0/\n/JYfsqiU/XZYlAHEd/nr7Z8WFGicLaqFoArXJjGZjJSs/qTsIqEsL5nzC42J\nRi12OGuOQxBqzD/nQHolrFrWVXm/9193oZnqJTz4kyLAJCHnYXMdBf2LUq6s\nFGEtj3bTVZ+pTHg07Ek+3Rx2t3pFjACYEWbFkOw2ZwUmVXkMOFiRH1wrVVYJ\nzFS/y7JeeJTg7L/LetXXJ1LH9GaP4asfHyjdK4AJvrGr8LMfeXr5l8rtMXa2\nketLsilZO7TCHt6Vz6O8f4pIvSv/EBxn5HKfFWX+PqkvJ/qcuApmOtIPY4FQ\nxW1Nq/yUEbKHRw/ZyXpRP4IZTcUS3BfoYR4KiJ2u6xqN2EqCiJeXHwcDXPMq\ntiV0UB548TBTLyCm0S8rcGJ0jx8gY/D2ObvnorZz1Hr25enaX4RbmcZkITI8\nP+DCIgOOHGpKNmj3saSk7G2SuXmnArOTlk/Nola5MdUSdOaiwjXTR2jGft80\nKGvfmk++94cUbzj2iqe/6Bu4RJR4V0wtHDJkAbEIjWxdVl3e7u1e10/+11DI\n2kL0AvEbnmLX32UWPsWr4G2rQwYN5u7HkSeCZFkmmCoAcXOpkAHUNvv5tSGE\ndlIa\r\n=L/jK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYeSLj0XHoOcrrKM5YEgCVy+wPsh8w7LnBShckYpNWZQIhAMeVEuxc78lhkDhoU+uf0bCYEWdG97KSSmRDE6FVqOk2"}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"_npmUser":{"name":"donavon","email":"github@donavon.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_2.3.0-alpha.7_1550013367238_0.45387652755652286"},"_hasShrinkwrap":false},"2.3.0":{"name":"use-dark-mode","publishConfig":{"tag":"latest"},"version":"2.3.0","description":"A custom React Hook to help you implement a \"dark mode\" component.","main":"dist/use-dark-mode.js","umd:main":"dist/use-dark-mode.umd.js","module":"dist/use-dark-mode.m.js","source":"src/index.js","types":"types/index.d.ts","license":"MIT","repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"author":{"name":"donavon"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"^16.8.0","react-dom":"^16.8.0","react-testing-library":"^5.5.0","rimraf":"^2.6.2"},"peerDependencies":{"react":"^16.8.0"},"jest":{"coverageThreshold":{"global":{"branches":100,"functions":100,"lines":100,"statements":100}}},"dependencies":{"@use-it/event-listener":"^0.1.2","use-persisted-state":"^0.3.0"},"gitHead":"416b8f88fc63aab90b2bced46c880ddf0c4aa36d","bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"},"homepage":"https://github.com/donavon/use-dark-mode#readme","_id":"use-dark-mode@2.3.0","_npmVersion":"6.5.0","_nodeVersion":"11.9.0","_npmUser":{"name":"donavon","email":"github@donavon.com"},"dist":{"integrity":"sha512-n+sNF8X8w4L+LvLok2hWYrhqMfFoC0dcHIFtnLtjb86a/uXKfBZyrDv63lhOn/+ClzaHoyvHglXjrei6JaH69w==","shasum":"82076d769b032bdb68854ee4c53cb7c7eccd2106","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-2.3.0.tgz","fileCount":8,"unpackedSize":20601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcY24fCRA9TVsSAnZWagAA4vkP/3/SshaIOgj2jmrMaxhe\n3bmXSbdP9dt+R4MEXu1EXeQCYq9gXlLtuRS08Okp/VME43YTQfFqHiVcXw2e\nvjTzxemp2PZWz9WAZJJxZxr1RuQUB3RKq3Ojyijjz5YirOTtC8hv3/vWjxoS\nLxLDJCZo0XWHp48i3nSgtceYaVTGPDZpucDyG7iMPcdKHce7ZvsWF7R9OJo6\nwGs0YS2CZv/1Nh7bHT0i906Bdm6yL1LgpaOWdDE4qu0yypbCPSbn3NEzBWgb\ntTg1gssTSI4vwUn7wiEFNRiQu1Us3+aL3AlEJpflTY92zE2uAQVY/sRuWDy2\n/10ba98jDKA+U9zGbrfb6jf9c84z8NNzowvp0tHCKlOrT4G5b8fsaWk4i2Cy\nVuz1qHqitRMmbht51SeM6PDyJ2HKVXGBqotOxqd4QCMdAqQNoKxtbhUhQ96O\nvT/Cqi433V1PBUlihBAdjxqSa9UGj4Zv4ujymGIQKlQ1N9ahD4pQVfdicwDQ\nldvzrk8G5IxNeGgWaAaRRfCY9ZAyQl4v9CzKiUg7f0ylUVpxnL7m/Ze+M2Ci\nd/v0s4ksBdkp6d9SiL6WKVKSMhN/F4JVJSCVY4DDpuppfcuSMs49g7faqfoG\nkFtWmx3CHoxrpwr7Rx/jymQgtK01DdLukBWpFG0iWKmpReuhn4wORLBTwLh1\nMKo1\r\n=dD/S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJFB4LpcH8bJamF7PgFK3QuHC/EuAXJwU+tVvV5VrAbQIgIT5wZI+Lc3s6fU3OnlX7Mq/TOaIN21KQFLm0+ywzaXA="}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_2.3.0_1550020126994_0.3027465646599239"},"_hasShrinkwrap":false},"2.3.1":{"name":"use-dark-mode","publishConfig":{"tag":"latest"},"version":"2.3.1","description":"A custom React Hook to help you implement a \"dark mode\" component.","main":"dist/use-dark-mode.js","umd:main":"dist/use-dark-mode.umd.js","module":"dist/use-dark-mode.m.js","source":"src/index.js","types":"types/index.d.ts","license":"MIT","repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"scripts":{"prepublishOnly":"npm run build","lint":"eslint src","test":"jest --verbose --coverage --silent","test:watch":"jest --watch --runInBand --silent","prebuild":"npm run lint && npm t && rimraf dist","build":"microbundle -o dist/ --sourcemap false --target web","dev":"microbundle watch -o dist/ --sourcemap false --compress false"},"keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"author":{"name":"donavon"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","eslint":"^5.10.0","eslint-config-amex":"^9.0.0","eslint-plugin-react-hooks":"^1.2.0","jest":"^23.6.0","jest-dom":"^3.0.0","microbundle":"^0.9.0","react":"^16.8.0","react-dom":"^16.8.0","react-testing-library":"^5.5.0","rimraf":"^2.6.2"},"peerDependencies":{"react":"^16.8.0"},"jest":{"coverageThreshold":{"global":{"branches":100,"functions":100,"lines":100,"statements":100}}},"dependencies":{"@use-it/event-listener":"^0.1.2","use-persisted-state":"^0.3.0"},"gitHead":"cf65a8aef76842c7dbffc8b554ba1222c896df0f","bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"},"homepage":"https://github.com/donavon/use-dark-mode#readme","_id":"use-dark-mode@2.3.1","_nodeVersion":"11.10.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-hmcdJR96tTustRQdaQwe6jMrZHnmPqXBxgy4jaQ4gsfhwajsCpjECuq9prgDe9XxMx/f9r96o2/md6O4Lwhwjg==","shasum":"d506349c7b7e09e9977cb8a6ab4470896aa3779a","tarball":"https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-2.3.1.tgz","fileCount":8,"unpackedSize":21319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbw7hCRA9TVsSAnZWagAAUGYP/RwPSHgNvRQiAMwC0MAk\nHJ/RvEHWmmSBHENnK7uomDJkn4ZTxZXmRqVTORZaXv8H/OzbvAS80GRHl1+m\nsChXIIKaNCpJNup+HL6Ciq7cFcpnqrpKvbBks/nO4ZDw1CnSbl7NXBBlCvF5\neX7BIDuapf6x0/d9gZQamZOWU6FMiE4sH06Khx1G7VCSJm2EIJztBaPNXH2J\nBZmpAY1nXziso26T/hW8Bip18NEl4vHFWLp50hsDADyZzH8CdSmNPpffVT7S\nCYK42G90bJ0H4BLuT9gWRPBgcRGl9aSgaTNLjhyqARuVpmhsVKCtGSzkhDTP\nliJOiZRPiutHZ/UN3H4y/N3Op5jpspCISF+a0Y6hGTe1IRsEMlwzdhwRBTmQ\ndMsSye/fYKQqk/HS+ZnKpYQFcdQeN/PcbNqRsHuKNv2Djb8cZ1anJlqlQ7PA\nWYoBWsA8sOPKM7MwWv2WaX5/QCpvIlU4pnF8rq1CRiSBcyD7JJTAiXaNq6B0\n0nRplWf8MnUdofm4GMHpmN5nEZ+2mb64Lf+x/WeVTzYLg1iUzBZ7xi+sVfnM\nw+/qKiAPyWqDiAqsJovoVEnn+ukLYLsgS6gH9kohqyFYqjiTlWMAGUG38gvO\nJ9ydymNap+Xif3xIyKLsA3TzcM9ymncX7mBDE2wiC0Izq1PYjJnkE1Qpcskb\n4jLc\r\n=1f1b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF0AytGU7FE8t/Vap80tgLbcN49K8SQN5GcdgzNq8X5sAiEAgGQCRTFFSt6fPeLYIW6CPhwExLRG0LxqVojJnop3pE0="}]},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"_npmUser":{"name":"donavon","email":"github@donavon.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-dark-mode_2.3.1_1550782177289_0.1411068159830824"},"_hasShrinkwrap":false}},"time":{"created":"2019-01-13T18:12:27.634Z","0.0.0":"2019-01-13T18:12:27.727Z","modified":"2022-05-22T22:00:38.419Z","0.0.1":"2019-01-13T21:04:06.710Z","0.0.2":"2019-01-14T15:46:15.570Z","0.1.0":"2019-01-15T04:41:00.646Z","1.0.0":"2019-02-06T17:45:24.024Z","2.0.0":"2019-02-08T00:16:45.063Z","2.1.0":"2019-02-08T17:11:36.374Z","2.1.1":"2019-02-08T20:29:05.503Z","2.1.2":"2019-02-09T16:12:45.751Z","2.2.0-alpha.0":"2019-02-10T00:30:03.794Z","2.2.0-alpha.1":"2019-02-10T06:15:16.670Z","2.2.0":"2019-02-10T13:10:03.647Z","2.2.1":"2019-02-10T14:13:49.965Z","2.2.2":"2019-02-10T19:09:20.935Z","2.3.0-alpha.0":"2019-02-11T23:06:43.769Z","2.3.0-alpha.1":"2019-02-12T00:48:18.507Z","2.3.0-alpha.2":"2019-02-12T05:30:41.871Z","2.3.0-alpha.3":"2019-02-12T05:35:53.820Z","2.3.0-alpha.4":"2019-02-12T17:14:54.016Z","2.3.0-alpha.5":"2019-02-12T17:46:19.372Z","2.3.0-alpha.6":"2019-02-12T23:00:43.050Z","2.3.0-alpha.7":"2019-02-12T23:16:07.408Z","2.3.0":"2019-02-13T01:08:47.091Z","2.3.1":"2019-02-21T20:49:37.419Z"},"maintainers":[{"name":"donavon","email":"github@donavon.com"}],"license":"MIT","readme":"# use-dark-mode\n\nA custom [React Hook](https://reactjs.org/docs/hooks-overview.html) to help you implement a \"dark mode\" component for your application.\nThe user setting persists to `localStorage`.\n\n❤️ it? ⭐️ it on [GitHub](https://github.com/donavon/use-dark-mode/stargazers)\nor [Tweet](https://twitter.com/intent/tweet?text=Check%20out%20the%20useDarkMode%20custom%20React%20Hook%20that%20simplifies%20adding%20a%20persistent%20dark%20mode%20setting%20to%20your%20app.&url=https%3A%2F%2Fgithub.com%2Fdonavon%2Fuse-dark-mode&via=donavon&hashtags=reactjs,hooks,darkmode)\nabout it.\n\n[![npm version](https://badge.fury.io/js/use-dark-mode.svg)](https://badge.fury.io/js/use-dark-mode) [![Build Status](https://travis-ci.com/donavon/use-dark-mode.svg?branch=master)](https://travis-ci.com/donavon/use-dark-mode) [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors)\n[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Check%20out%20the%20useDarkMode%20custom%20React%20Hook%20that%20simplifies%20adding%20a%20persistent%20dark%20mode%20setting%20to%20your%20app.&url=https%3A%2F%2Fgithub.com%2Fdonavon%2Fuse-dark-mode&via=donavon&hashtags=reactjs,hooks,darkmode)\n\n![usedarkmode-small](https://user-images.githubusercontent.com/887639/51113468-079ee100-17d0-11e9-8a35-e29b12b74740.gif)\n\n`useDarkMode` works in one of two ways:\n\n1.  By toggling a CSS class on whatever element you specify (defaults to `document.body`).\n    You then setup your CSS to display different views based on the presence of the selector. For example, the following CSS is used in the demo app to ease the background color in/out of dark mode.\n\n    ```css\n    body.light-mode {\n      background-color: #fff;\n      color: #333;\n      transition: background-color 0.3s ease;\n    }\n    body.dark-mode {\n      background-color: #1a1919;\n      color: #999;\n    }\n    ```\n\n2.  If you don't use global classes, you can specify an `onChange` handler and take care of the implementation of switching to dark mode yourself.\n\n## New in Version 2.x\n\n- `useDarkMode` now persists between sessions. It stores the user setting in\n  `localStorage`.\n\n- It shares dark mode state with all other `useDarkMode` components on the page.\n\n- It shares dark mode state with all other tabs/browser windows.\n\n- The initial dark mode is queried from the system. Note: this requires a browser that supports the `prefers-color-scheme: dark` media query\n  (currently only [Safari Technology Preview](https://developer.apple.com/safari/technology-preview/release-notes/))\n  and a system that supports dark mode, such as macOS Mojave.\n\n- Changing the system dark mode state will also change the state of `useDarkMode`\n  (i.e, change to light mode in the system will change to light mode in your app).\n\n- Support for Server Side Rendering (SSR) in version 2.2 and above.\n\n## Requirement\n\nTo use `use-dark-mode`, you must use `react@16.8.0` or greater which includes Hooks.\n\n## Installation\n\n```sh\n$ npm i use-dark-mode\n```\n\n## Usage\n\n```js\nconst darkMode = useDarkMode(initialState, darkModeConfig);\n```\n\n### Parameters\n\nYou pass `useDarkMode` an `initialState` (a boolean specifying whether it should be in dark mode\nby default) and an optional `darkModeConfig` object. The configuration object may contain the following keys.\n\n| Key               | Description                                                                                                                                                                                                                                                                                                               |\n| :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `classNameDark`   | The class to apply. Default = `dark-mode`.                                                                                                                                                                                                                                                                                |\n| `classNameLight`  | The class to apply. Default = `light-mode`.                                                                                                                                                                                                                                                                               |\n| `element`         | The element to apply the class name. Default = `document.body`.                                                                                                                                                                                                                                                           |\n| `onChange`        | A function that will be called when the dark mode value changes and it is safe to access the DOM (i.e. it is called from within a `useEffect`). If you specify `onChange` then `classNameDark`, `classNameLight`, and `element` are ignored (i.e. no classes are automatically placed on the DOM). You have full control! |\n| `storageKey`      | A string that will be used by the `storageProvider` to persist the dark mode value. If you specify a value of `null`, nothing will not be persisted. Default = `darkMode`.                                                                                                                                                                                                                   |\n| `storageProvider` | A storage provider. Default = `localStorage`. You will generally never need to change this value.                                                                                                                                                                                                                       |\n\n### Return object\n\nA `darkMode` object is returned with the following properties.\n\n| Key         | Description                                             |\n| :---------- | :------------------------------------------------------ |\n| `value`     | A boolean containing the current state of dark mode.    |\n| `enable()`  | A function that allows you to set dark mode to `true`.  |\n| `disable()` | A function that allows you to set dark mode to `false`. |\n| `toggle()`  | A function that allows you to toggle dark mode.         |\n\nNote that because the methods don't require any parameters, you can call them\ndirecly from an `onClick` handler from a button, for example\n(i.e., no lambda function is required).\n\n## Example\n\nHere is a simple component that uses `useDarkMode` to provide a dark mode toggle control.\nIf dark mode is selected, the CSS class `dark-mode` is applied to `document.body` and is removed\nwhen de-selected.\n\n```jsx\nimport React from 'react';\nimport useDarkMode from 'use-dark-mode';\n\nimport Toggle from './Toggle';\n\nconst DarkModeToggle = () => {\n  const darkMode = useDarkMode(false);\n\n  return (\n    <div>\n      <button type=\"button\" onClick={darkMode.disable}>\n        ☀\n      </button>\n      <Toggle checked={darkMode.value} onChange={darkMode.toggle} />\n      <button type=\"button\" onClick={darkMode.enable}>\n        ☾\n      </button>\n    </div>\n  );\n};\n\nexport default DarkModeToggle;\n```\n\n## That flash!\n\nIf your CSS is setup to default to light mode, but the user selects dark mode,\nthe next time they visit your app, they will be in dark mode.\nHowever, the user will see a flash of light mode before the app is spun up\nand `useDarkMode` is called.\n\nTo prevent this, I've included some vanilla JavaScript that you can insert in your\n`index.html` just after the `<body>` tag. It is in a file named [noflash.js.txt](https://github.com/donavon/use-dark-mode/blob/develop/noflash.js.txt).\nYou can either insert the contents of this file in a `<script>` tag or automate the\nstep in your build process.\n\nNote that if you change any of the default—such as `storageKey` or `classNameDark` for example—the `noflash.js` file will need to be modified with the same values.\n\n## Sample Apps\n\nHere is a list of apps build with `use-dark-mode`.\nIf you have an app you would like to include on this list, open a PR.\n\n* [Demo App on CodeSandbox](https://codesandbox.io/s/mzj64x80ny) - by [@donavon](https://twitter.com/donavon)\n\n## License\n\n**[MIT](LICENSE)** Licensed\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore -->\n| [<img src=\"https://avatars3.githubusercontent.com/u/887639?v=4\" width=\"100px;\" alt=\"Donavon West\"/><br /><sub><b>Donavon West</b></sub>](http://donavon.com)<br />[🚇](#infra-donavon \"Infrastructure (Hosting, Build-Tools, etc)\") [⚠️](https://github.com/donavon/use-dark-mode/commits?author=donavon \"Tests\") [💡](#example-donavon \"Examples\") [🤔](#ideas-donavon \"Ideas, Planning, & Feedback\") [🚧](#maintenance-donavon \"Maintenance\") [👀](#review-donavon \"Reviewed Pull Requests\") [🔧](#tool-donavon \"Tools\") [💻](https://github.com/donavon/use-dark-mode/commits?author=donavon \"Code\") | [<img src=\"https://avatars2.githubusercontent.com/u/29359616?v=4\" width=\"100px;\" alt=\"Revel Carlberg West\"/><br /><sub><b>Revel Carlberg West</b></sub>](https://github.com/revelcw)<br />[🤔](#ideas-revelcw \"Ideas, Planning, & Feedback\") | [<img src=\"https://avatars2.githubusercontent.com/u/9800850?v=4\" width=\"100px;\" alt=\"Mateusz Burzyński\"/><br /><sub><b>Mateusz Burzyński</b></sub>](https://github.com/Andarist)<br />[💻](https://github.com/donavon/use-dark-mode/commits?author=Andarist \"Code\") | [<img src=\"https://avatars1.githubusercontent.com/u/1288694?v=4\" width=\"100px;\" alt=\"Justin Hall\"/><br /><sub><b>Justin Hall</b></sub>](https://github.com/wKovacs64)<br />[💻](https://github.com/donavon/use-dark-mode/commits?author=wKovacs64 \"Code\") | [<img src=\"https://avatars1.githubusercontent.com/u/24556921?v=4\" width=\"100px;\" alt=\"Jeremy\"/><br /><sub><b>Jeremy</b></sub>](https://github.com/fxbabys)<br />[📓](#userTesting-fxbabys \"User Testing\") [🐛](https://github.com/donavon/use-dark-mode/issues?q=author%3Afxbabys \"Bug reports\") |\n| :---: | :---: | :---: | :---: | :---: |\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"A custom React Hook to help you implement a \"dark mode\" component.","homepage":"https://github.com/donavon/use-dark-mode#readme","keywords":["react-hooks","hooks","react","utils","lib","dark-mode"],"repository":{"type":"git","url":"git+https://github.com/donavon/use-dark-mode.git"},"author":{"name":"donavon"},"bugs":{"url":"https://github.com/donavon/use-dark-mode/issues"}}