{"_id":"@anay69420/dark-mode.js","_rev":"2-5bd75bf0f41d153f873cfef2ab276775","name":"@anay69420/dark-mode.js","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@anay69420/dark-mode.js","version":"1.0.0","description":"Beautiful Tailwind CSS Dark Mode","main":"src/index.js","keywords":["tailwindcss","dark mode"],"repository":{"url":"git+https://github.com/Anay-v2/dark-mode.js.git"},"bugs":{"url":"https://github.com/Anay-v2/dark-mode.js/issues"},"homepage":"https://github.com/Anay-v2/dark-mode.js/issues#readme","author":{"name":"Anay-v2","url":"Anay Sehgal"},"license":"MIT","_id":"@anay69420/dark-mode.js@1.0.0","_nodeVersion":"16.6.1","_npmVersion":"7.20.3","dist":{"integrity":"sha512-526lkGR0jgEGSUZE9f/glid7IvA82uGBywdnbb3qIEq4679xxVAHHYekxkujEz1+xY7bzkH/OPsdREQrypmlWA==","shasum":"275e11cf5034efe992fec1d9a7150f404b18b4ac","tarball":"https://registry.npmjs.org/@anay69420/dark-mode.js/-/dark-mode.js-1.0.0.tgz","fileCount":7,"unpackedSize":12255,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxYixCRA9TVsSAnZWagAABe0P/iYr5GracJ+hF/JPtsg1\nN9fvEd6UIIRSlPdcGeQY4NNxw0VFJ/GFK6/MqElEjNsjIcTOrEo/BCEjJKKM\nMl1ntXhldm9hkynpBChqUGdxHXe3E6fZXJrvMYcjg8HMjzB5vOdsCVwV/1fB\nvngdEkQRVMJtqAimGvACbE3C+4IMKEjGR9B4nXhQPM3+1e5Qwaad3wx8VGw4\n5iF2nsDbRMn79xLscVM8lqPx0fBZXX6jGRjWo9qvYMYEZiVCQ9kuObKxken/\nKkkPWnOueYiAzy0sJdgpqCFnUEE75jCCb17dx3AxYuSXla8aU9OYOOiQT3W6\n1+X8Ht2nc2RmuNBREOd+bjQQ449KG9jr4yeanbLiCBHcjHGXFfkzzfKONzg0\nHbVP7p5uGaTlUfHIniFPtBsQY4JyP+4c9oOArGGRauiB09NngISlzxyGnsGA\nZM/KygR2vvtHpn4y4R1eBoS6KaMUtvPd05qBsC9dcPguGnLyOBJ12NgvnAtp\nT2eJU6Jlin2VXqjoeIBXscSF+gciyyL2qhSe9AdUqV63fxbWu7N8maThmFSx\ncxy99Npmbhp9rOVAOT0Dssqvmo0gk5jjVxKFEZ/GOLs8e0oor2gEXpXTLNZP\n/9K2Kd5ftcHzFmz9PdwJJZmbmWkepg8kdQIdIrbrqjARyDKZn0Gs6fSNVgbX\ngnuc\r\n=0V/n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEYO9c2gKqD/W0111LMR9p6i5S5ZDCQL1vudUYyolDMuAiEA9Iz/dE6qmrgQUR9dDAqpXXP6wN5OEeJmH9rKNnGIxnQ="}]},"_npmUser":{"name":"anay69420","email":"anaysehgal1@gmail.com"},"directories":{},"maintainers":[{"name":"anay69420","email":"anaysehgal1@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dark-mode.js_1.0.0_1640335537104_0.20256051709945577"},"_hasShrinkwrap":false},"1.0.1":{"name":"@anay69420/dark-mode.js","version":"1.0.1","description":"Beautiful Tailwind CSS Dark Mode","main":"src/index.js","keywords":["tailwindcss","dark mode"],"repository":{"url":"git+https://github.com/Anay-v2/dark-mode.js.git"},"bugs":{"url":"https://github.com/Anay-v2/dark-mode.js/issues"},"homepage":"https://github.com/Anay-v2/dark-mode.js/issues#readme","author":{"name":"Anay-v2","url":"Anay Sehgal"},"license":"MIT","_id":"@anay69420/dark-mode.js@1.0.1","_nodeVersion":"16.6.1","_npmVersion":"7.20.3","dist":{"integrity":"sha512-VU3HhzBNG4QHpbbbxG9APaf8Vi59aID5jhppz5BJ0Umm/uhye0DB8h/ahjxVmnrOz+DHQKPEWXbHBpmzU0Bg/Q==","shasum":"a82627447514edcf7c59f192599b9e7f70deef73","tarball":"https://registry.npmjs.org/@anay69420/dark-mode.js/-/dark-mode.js-1.0.1.tgz","fileCount":7,"unpackedSize":14634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxY74CRA9TVsSAnZWagAADSkQAJU8gJcsxPOSSrZIUx43\nmo16XB1uI+biOv5GKaX+LRUx8wjfKItKsmhw0telCDpZc2aXqdTn432HNkiV\nngCdVLRb0zIUjKr/jIXzjfzpyEqSF4S3x7mdwp1Jd1fG+mrDJS/i4OQWlQ2J\nkBlw5uFFN9XgHObwn8+ibmQmtkKaL1DX5h7/NW0mBUOrL/61IoWsm+BKqlEy\neLwZ04lDXuVqi0Kz/BiNdbLRI1/bRtG+NJKkrLEbowPdQRPf6g7PAQXAGVkn\nJNXCBPxh2LcY0Z6GYsANsX7PUsg8EpUX7qUmPoz5gKyZGKKB8hdWkwkeTTel\nRztvYCg8nymiQtuJNkKds1BACE+8fF1pKUuma2KrG+OMQ2U1mtzEWi3vr9Sc\nXhw4PHX+SM2n1lbdjIX2I+LnspSbiTNvO8DSFgHEfB3T/VIeVyKV3dWxy6IB\nTyOoNHrwxWI1uPfTXGBjUSwSGKljfckmP5UkaljWb1WMrL02ewlmL3s/75Zd\nr/ozTOJq3B3aLVTyL7juCLw9C4RyvwkFgH7Jdy1K/OFM2teA5/N62/H1hxHh\nPFJnDfat8ejRIDStSTuDMyibjkHKbyPThSvgzmE0+uS16VBw5V+F2zjkQkSc\nfVZh7mu2IqB22MirczMJoi0Y3dLKhtn73ZAfDygmengdVHcBsxlUsNG6qZgo\nFDEj\r\n=GGwR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC2AnR1ogXikJgSp2faPX/7OK57qynvBCF51yMJ7U186AiEA5fBe8ifPcl7KhnQzzu4DjkQVoLb+VbrccOvqjeRJZ9s="}]},"_npmUser":{"name":"anay69420","email":"anaysehgal1@gmail.com"},"directories":{},"maintainers":[{"name":"anay69420","email":"anaysehgal1@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dark-mode.js_1.0.1_1640337144589_0.2141598219060672"},"_hasShrinkwrap":false}},"time":{"created":"2021-12-24T08:45:37.034Z","1.0.0":"2021-12-24T08:45:37.255Z","modified":"2022-04-04T13:55:40.225Z","1.0.1":"2021-12-24T09:12:24.781Z"},"maintainers":[{"name":"anay69420","email":"anaysehgal1@gmail.com"}],"description":"Beautiful Tailwind CSS Dark Mode","homepage":"https://github.com/Anay-v2/dark-mode.js/issues#readme","keywords":["tailwindcss","dark mode"],"repository":{"url":"git+https://github.com/Anay-v2/dark-mode.js.git"},"author":{"name":"Anay-v2","url":"Anay Sehgal"},"bugs":{"url":"https://github.com/Anay-v2/dark-mode.js/issues"},"license":"MIT","readme":"# dark-mode.js\r\n\r\nBeautiful [Tailwindcss](https://tailwindcss.com/) dark mode.\r\n\r\n## Getting started\r\n\r\n```sh\r\nnpm install @anay69420/dark-mode.js\r\n```\r\n\r\nor\r\n\r\n```html\r\n<script src=\"https://cdn.jsdelivr.net/npm/@anay69420/dark-mode.js@1.0.0/src/index.js\"></script>\r\n```\r\n\r\nNow run `darkMode.init()` to initialize the dark mode.\r\nNow you have 2 options:\r\n\r\n1. Use `darkMode.setDark(true/false)` to set dark mode.\r\n1. Use an element with the attribute `data-dark-toggle` to toggle dark mode. By default, dark mode will toggle when it is clicked, but you can change the event with the attribute `data-dark-event`.\r\n\r\nto see if dark mode is enabled, use `darkMode.isDark()`.\r\nif you want to display if dark mode is on in the html, use the attributes `data-dark-on` and `data-dark-off`. For example: if it is dark mode then anything with `data-dark-on` will display `'dark'` and anything with `data-dark-off` will display `'light'`. You can also change what it displays with `data-dark-d` and `data-dark-l` respectively.\r\n\r\nIf you want some code to be executed when the mode toggles, you can do the following:\r\n\r\n```javascript\r\ndarkMode.UpdateDarkHook = dark => {\r\n    // Code here\r\n    // dark will be `d` if it is dark mode and `l` if it is light mode\r\n}\r\n```\r\n\r\nIn the `tailwind.config.js`, you can also use the darkMode function called addThemePlugin. addThemePlugin takes 3 arguments: name, classname, and addVariant. Here's an example:\r\n\r\n```javascript\r\nconst plugin = require('tailwindcss/plugin')\r\nimport '@anay69420/dark-mode.js'\r\nmodule.exports = {\r\n    plugins: [\r\n        plugin({ addVariant }) {\r\n            darkMode.addThemePlugin('theme-neon', 'neon', addVariant)\r\n        }\r\n    ]\r\n}\r\n```\r\n\r\nSo let's break this down. Basically what this does is it adds another variant, `theme-neon`. Any class with the variant `theme-neon` will **only** be enabled when the element that has the class is a descendant of an element with the class `neon`. Here's an example:\r\n\r\n```html\r\n  <div class=\"neon\">\r\n    <p class=\"theme-neon:text-yellow-400\"></p> <!-- this p has text-yellow-400 -->\r\n  </div>\r\n  <p class=\"neon:text-yellow-400\"></p> <!-- this p does not have text-yellow-400 -->\r\n```\r\n\r\nWhen dark mode is turned on, any tailwind class with the variant dark: (like `dark:text-gray-100`) will be used.\r\n\r\n<hr>\r\n\r\n## License\r\n\r\nThis project has the ***MIT*** license. See more at `LICENSE`\r\n","readmeFilename":"README.md"}