{"_id":"@alotropico/dark-mode-attribute","_rev":"3-59007bc54b8c32b23a63f3d42b5d1679","name":"@alotropico/dark-mode-attribute","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@alotropico/dark-mode-attribute","version":"1.0.0","description":"Very simple and lightweight utility to manage dark and light schemes from vanilla JavaScript. Call it with your button as a parameter and you're all set.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/alotropico/dark-mode-attribute.git"},"keywords":["dark","mode","light","mode","dark","theme","color","scheme","local","storage"],"author":{"name":"alotropico","email":"alotropico@gmail.com","url":"http://alotropico.com"},"license":"ISC","bugs":{"url":"https://github.com/alotropico/dark-mode-attribute/issues"},"homepage":"https://github.com/alotropico/dark-mode-attribute#readme","gitHead":"d2f82e7f4421371d0e7f2726e0669866edf3a999","_id":"@alotropico/dark-mode-attribute@1.0.0","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-3SWzAVjIyX4fBHMVeT57gHqCe7PD/PF0O182RgChNc/+JMs5nGkM1rGWGHMmO8lVnWLR0UyV0KzyVFZBHilmTA==","shasum":"79f6e141bd251548d961a55a2f312eb6f6fe76f7","tarball":"https://registry.npmjs.org/@alotropico/dark-mode-attribute/-/dark-mode-attribute-1.0.0.tgz","fileCount":5,"unpackedSize":6475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwxW/CRA9TVsSAnZWagAANPMP/2fEGpVJCMUOGsD3VdEN\nXW5VjUGPN/kLV1SpPgEfTTSDEj6Kfe7xXmMDqR8h+7JJJW8TS7rSaWGXvk1y\n2EucMhbZtV34dF07VjnVfI/toDKaJccTNxPXFl7zIwaZcHmMqqLXqXp403Mj\nQdG4q18NW4zcf9xRB1HymlIExhbXarzKFDiATAva45Ab7ZIUMwz3dPF35VVv\nnidpiZfpUEOSG1aF2DavdziqTwsQTNscSlDcY57sHjBEHimU915b9u5QsalM\nOudVQ87JHO7M9MeQAq0k7scEBgQrOTQsoxXfHeYf1KkDn2HXG97Nu3s5uicW\nuEF0AZ2Y+4p9BAkPeG/BAK1xjV8Zyenb9EIxwhqBh+BKgZqMo82KzE5o+FaH\nIYQmJa21JAgIC6lB0dCw4la+2/l5/47WkuTN4VLV2sesbXYHiynJhY1fYaUA\nKU+TYjSaZ4E6OmfovJ2RMhhMRUSN2MYlMs/274sBYAH4KPbACOf2z+VQMWgM\nJdmyL1EkGZMseGN7AyGlTihpSdTQqV0n1pUxbJIli9iKWIZGaN5qtz6ZV2QX\nn/k4GaXtxzqkigWEKmKt+QctZLQSos0NX9mJ+xjT4pRcnQL64vERtJ6fS4g+\n/VpOubb+Red6/aNaDobpD7ZiSEKovj2ZD2AN4GHJUonp/H/zhKHt/2hA26sJ\ndp0w\r\n=HjLE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGh+Sc9CTrIDfjfZcUsU74t66o0z+hbQ1hIQErhaxrB9AiAT3NEwgy7kXMzwPCQy6pBnXep0QyAJLE7P5QrtL9RyGw=="}]},"_npmUser":{"name":"alotropico","email":"alotropico@gmail.com"},"directories":{},"maintainers":[{"name":"alotropico","email":"alotropico@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dark-mode-attribute_1.0.0_1623397823208_0.6342490059913808"},"_hasShrinkwrap":false},"1.0.1":{"name":"@alotropico/dark-mode-attribute","version":"1.0.1","description":"Very simple and lightweight utility to manage dark and light schemes from vanilla JavaScript. Call it with your button as a parameter and you're all set.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/alotropico/dark-mode-attribute.git"},"keywords":["dark","mode","light","mode","dark","theme","color","scheme","local","storage"],"author":{"name":"alotropico","email":"alotropico@gmail.com","url":"http://alotropico.com"},"license":"ISC","bugs":{"url":"https://github.com/alotropico/dark-mode-attribute/issues"},"homepage":"https://github.com/alotropico/dark-mode-attribute#readme","dependencies":{},"gitHead":"d2f82e7f4421371d0e7f2726e0669866edf3a999","_id":"@alotropico/dark-mode-attribute@1.0.1","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-3Ca3EbYVUrT7jG5btpfpcLTh8N9oldL+EstpAsdOcf2QojhIBk8d7509CyQEL/6OLWte3Jg9blAk8P5dV37Cjg==","shasum":"2fc01feb57e42a60dee07f8bf560dd0b58a2a45d","tarball":"https://registry.npmjs.org/@alotropico/dark-mode-attribute/-/dark-mode-attribute-1.0.1.tgz","fileCount":4,"unpackedSize":4645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwxpKCRA9TVsSAnZWagAA4UIP/1hIXLOHDXLI2u6zIvjl\nDg4yNEjwAozjW8yJitTlWy7xMOThMX4e67lZhWEqVYsT3o/gQ2aUZnw//VRa\nHHO1y+ugXc6aQdT5OuQQFl10R+Kzj7On2BN7JHmXySrWNnFyCbDWlK2rmox7\n688FM5DFMlCf2XlpEuuDFxWpMVYwOvHgS6xuQjGsNVZzG5RxQbTQQlOzLa/y\niRALEQUu/IOyy8dqDD3FE27JA5dDS3h0xH4/b/8QCQNkPIoV4IvcsQD4GQ9s\nJqXknalQCTnYmkGNRBhskUQeKTDdaPaVFBeKMRBMj9YN6g9J/cTgb7o0OZ3b\n1RlXO6Qiv0yYCrm4XwfIriZEt0YMCUY1u8ruNj40qlgfwUWafUG6MyOZveGR\nNew1ZtsmSeMTRaOq8jNxFwq2hqMf+7sc4lufSDWYTq8QIEuTzLKgS2yEl1gy\nFfAir7+z98x1Tu104TKuzAvVzwewUXdcwAyHHUpWGCwjcUwFP9n+6igdwLP1\nAJLj4WoVaAyyZlNlT5IwKE2yqlKofmACFZVO+rONhBC53ilyLe0OyutjiLUx\njtOIhCex2IRwH+K9S4U1trKQS+vSI3v/bGR6ROJlRRPkdi6xR8DUnp4NqEjS\n6HZtPRxxY6LlF7E7kEIb/dJ61HIiNtXhR6EYiKKCeOzyiCJLXfaRekrMbQrE\n+yVN\r\n=YcfN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDitvRdMvTczI6N4oVcJGLwbN84QXT6yH9sqmk6gptB1gIgQ2ko9oOZq5c34jJDNTa1TwCtbz62mDdaQQxutD1LyQs="}]},"_npmUser":{"name":"alotropico","email":"alotropico@gmail.com"},"directories":{},"maintainers":[{"name":"alotropico","email":"alotropico@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dark-mode-attribute_1.0.1_1623398985914_0.9537332781079813"},"_hasShrinkwrap":false},"1.0.2":{"name":"@alotropico/dark-mode-attribute","version":"1.0.2","description":"Very simple and lightweight utility to manage dark and light schemes from vanilla JavaScript. Call it with your button as a parameter and you're all set.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/alotropico/dark-mode-attribute.git"},"keywords":["dark","mode","light","mode","dark","theme","color","scheme","local","storage"],"author":{"name":"alotropico","email":"alotropico@gmail.com","url":"http://alotropico.com"},"license":"ISC","bugs":{"url":"https://github.com/alotropico/dark-mode-attribute/issues"},"homepage":"https://github.com/alotropico/dark-mode-attribute#readme","dependencies":{},"gitHead":"f50b20650d82957a1ba3c9cbee3b58599294960b","_id":"@alotropico/dark-mode-attribute@1.0.2","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-9F6ea7b0o+FNR6VJU2+qjSSQLY05fCLfx65Ivt+s8XaT2fYLKGDPctCR3yz4fCxJcDt0joqdXxznvZ6zqDO6kg==","shasum":"8bd99ccea5289d7ffbf077d7b522a9b2e319649d","tarball":"https://registry.npmjs.org/@alotropico/dark-mode-attribute/-/dark-mode-attribute-1.0.2.tgz","fileCount":4,"unpackedSize":4659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwx35CRA9TVsSAnZWagAApCcP+gOwo5YyO4xUCgk/MaFP\ntXlYT/NUGnVFnpQu4qJpdI9Rv3b6DY5oe+dyTsQNChWD8HtcFAL5aAbRVZCd\nrWiwWAWSucUrbG/5dnemaoeDjXnncBu53UMhDitsuj0SkYds4PvFmueBEl6m\nOifElprEexueBMj1dJijxoXwamcdGLlK0hDJJSImb5oAYFgdh+AZf1UU7SKS\nShQV6LyEaKxSL630osWho9HGenOKjiFoGbQMNSzr4OEO4qLyjsKMTy1eTtvz\ni76qwIk706p1QIvJrqkTg4wKRrOpQeEsMAkSjU/Jhil1bA08LHys+c3Dr2e3\ncVT6OS5sJiUUbdmiHcQEg5TTjKU076cujTN1DrPDZB34gWYoBqivOssmakM1\nWv07055zc26XJ4wr7JFO8iPxbN8QYKTbxehtkAk2BokTJgkvCmzxmK4fY1j9\nQ+tTwBs/PjY+VZEYA3ED5Zu/HNayXuam6CnqsAI3FgGqQHSapnCY2VmWDMIE\nRinshhTEtGSPjkoj02E1kBCd0IyERVoB/+L+sjwgrlt6c8JfGBYR91O72ZOT\nPEp0czaYrAp5qWgRrFmXNfcLR6jSLotBtuy/qpOQRCOjgv5t6D0NEaeKGXvz\n1TH5HjiwVMaUS1VZX6dWI2A1otjXOwtByRMcZnCAMEPf47pqFHagpUfm5lMp\nSkq1\r\n=E3wv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHBmVDv8dV4dsAlszp5C+aRSAU0Y26IBVq6PR/Cx2dbbAiB4MEXOd9AqZAI1OKuUvSKpL5+guciQjcMpZPQEXUa41Q=="}]},"_npmUser":{"name":"alotropico","email":"alotropico@gmail.com"},"directories":{},"maintainers":[{"name":"alotropico","email":"alotropico@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dark-mode-attribute_1.0.2_1623399929512_0.9264578538070485"},"_hasShrinkwrap":false}},"time":{"created":"2021-06-11T07:50:23.158Z","1.0.0":"2021-06-11T07:50:23.368Z","modified":"2022-04-04T13:37:34.824Z","1.0.1":"2021-06-11T08:09:46.055Z","1.0.2":"2021-06-11T08:25:29.704Z"},"maintainers":[{"name":"alotropico","email":"alotropico@gmail.com"}],"description":"Very simple and lightweight utility to manage dark and light schemes from vanilla JavaScript. Call it with your button as a parameter and you're all set.","homepage":"https://github.com/alotropico/dark-mode-attribute#readme","keywords":["dark","mode","light","mode","dark","theme","color","scheme","local","storage"],"repository":{"type":"git","url":"git+https://github.com/alotropico/dark-mode-attribute.git"},"author":{"name":"alotropico","email":"alotropico@gmail.com","url":"http://alotropico.com"},"bugs":{"url":"https://github.com/alotropico/dark-mode-attribute/issues"},"license":"ISC","readme":"## Dark Mode Attribute\r\n\r\nVery simple and lightweight utility to manage **dark and light schemes from vanilla JavaScript**.\r\n\r\nCall it with your button as a parameter and you're all set: `dark-mode-attribute(toggleButton)`\r\n\r\nWhen no default value is provided, the module checks if the user saved a preference from a previous session.\r\n\r\nIf they haven't, it looks for the user's system preference.\r\n\r\n### Installation\r\n\r\n```shell\r\nnpm i --save-dev @alotropico/dark-mode-attribute\r\n```\r\n\r\n### Usage\r\n\r\nIn your **JavaScript**, call dark-mode-attribute with your toggle-dark-mode element as a parameter:\r\n\r\n```javascript\r\nimport * as dma from '@alotropico/dark-mode-attribute'\r\n\r\nconst toggleButton = document.querySelector('.my-button')\r\n\r\ndma(toggleButton)\r\n```\r\n\r\nYour **CSS**:\r\n```css\r\nbody {\r\n    background-color: white;\r\n    color: black;\r\n}\r\nbody.dark {\r\n    background-color: black;\r\n    color: white;\r\n}\r\n.my-button:after {\r\n    content: '🌞'\r\n}\r\nbody.dark .my-button:after {\r\n    content: '🌚'\r\n}\r\n```\r\n\r\n### Options\r\n\r\nBy default, it adds the *dark* class to the body element, but you can customize it.\r\n\r\n\r\nUse a **custom class**:\r\n\r\n```javascript\r\ndma(toggleButton, 'dark-mode')\r\n```\r\n\r\n\r\nInstead of a class, let it be a **custom attribute**:\r\n\r\n```javascript\r\ndma(toggleButton, 'dark-mode', 'data-scheme')\r\n```\r\n```css\r\nbody[data-scheme=\"dark-mode\"] {\r\n    background-color: black;\r\n}\r\n```\r\n\r\n\r\nInstead of the body, apply the class/attribute to a **custom element**:\r\n\r\n```javascript\r\nconst container = document.body.querySelector('.container')\r\n\r\ndma(toggleButton, 'dark-mode', 'data-scheme', container)\r\n```\r\n\r\n\r\nPass a **default value**, which overrides the built-in detection and storage methods:\r\n```javascript\r\ndma(toggleButton, 'dark', 'class', container, true)\r\n```","readmeFilename":"README.md"}