{"_id":"theme.js","_rev":"2-7d46d98aea350b31068b24fc05e04018","name":"theme.js","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"theme.js","version":"1.0.0","description":"simple light and dark themes for any website","browser":"dist/theme.js","scripts":{"build":"npm i && gulp","test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Craig Buckler"},"homepage":"https://github.com/craigbuckler/theme.js#readme","repository":{"type":"git","url":"git+https://github.com/craigbuckler/theme.js.git"},"bugs":{"url":"https://github.com/craigbuckler/theme.js/issues"},"keywords":["JavaScript","CSS","theme"],"license":"MIT","browserslist":["> 1%","ie 11"],"devDependencies":{"autoprefixer":"^9.6.0","cssnano":"^4.1.10","gulp":"^4.0.2","gulp-concat":"^2.6.1","gulp-postcss":"^8.0.0","gulp-terser":"^1.2.0","toggled.js":"^1.1.0"},"gitHead":"9ef9f202771b0073a0dfb1f52783e8452f1dbc90","_id":"theme.js@1.0.0","_nodeVersion":"10.14.0","_npmVersion":"6.9.2","dist":{"integrity":"sha512-AmP2hDiJQcxdrK2CCeQOUed3n17jcNoap/YzTzcJrITOZRq0DPo4p5emyk+U8/mPPhgzMRyhse6GzU6Z2B/iDw==","shasum":"9c05fa497cda1fee047bc2ca90351995b3269151","tarball":"https://registry.npmjs.org/theme.js/-/theme.js-1.0.0.tgz","fileCount":5,"unpackedSize":6117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdGi2ACRA9TVsSAnZWagAA1gMP/jrJe9yOQv70n3+/Jzi4\nng7nuwWOCQMezIKP2/8hmWCrdEJJCyfrtKKeMgbfLkyd/rd5WFlcz2YD++V1\nGZMxK1uWbbBxf0gkCQ9TPcNMwiDgfrxDlLffaTjqIxKNGJKY70zu2S9dGgRj\nngfzKjO0DyEddCYrxBHMAkWXbuFNxaqIKkAZOOiG62f0dlT0h/hD/3Wqov/8\nk+5uK1KK/+4XjRcvoHsDqazvnm5D01lE+cOsx/4vRfOy9ojSpzWwUyJiXJeH\nLNxLCgME4iamQXOJD7JvjqRnVslZYBPxnvfjxneRMB/oxcjzZqn/gelM06N1\nvTnIZUbAZpU81s1tIyAWvR8olsJs9HfnWAQUuevGTrJN64VwtpNxBJ/bDDsL\nYnxnlvqgPZJfVhs6elECxE1fDkTDp6KSE6uL5ydeWHJz1K7+pufGbSmITQvg\nWMvwk90hN2tF87MBbm86+CVWBo0wFjuymZJI2z8TdgtyH2WoJu3Dm5RIMHFS\nzb12ZvOY79ixHePRw2nUsCQFx7w4ZkHcMKdMFu9lRKt2rbLrZl6SjDk1ih22\nfGPNQBLiFd3sWizoPEZMQ14a+MQuETgunYrKMLjAy/c8+F8YP1XM+RjVA1pM\nZ0ydWsifzrkcMrqxKcLg78M6B7xWCDJcUx5arC8EdJZyFE6tyq1S13rQTvN4\nE54E\r\n=X3S5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQB4PqaHFQc5/aCtJ5KarAYjhEOfQBWI/s10aCSfv7jQIhAMpsL18i96Er+VSsL+w7V9jXE9r4vry8Yura5LUAj9Vi"}]},"maintainers":[{"name":"craigbuckler","email":"craigbuckler@gmail.com"}],"_npmUser":{"name":"craigbuckler","email":"craigbuckler@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/theme.js_1.0.0_1561996671384_0.05226906891550254"},"_hasShrinkwrap":false},"1.0.1":{"name":"theme.js","version":"1.0.1","description":"simple light and dark themes for any website","browser":"dist/theme.js","scripts":{"build":"npm i && gulp","test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Craig Buckler"},"homepage":"https://github.com/craigbuckler/theme.js#readme","repository":{"type":"git","url":"git+https://github.com/craigbuckler/theme.js.git"},"bugs":{"url":"https://github.com/craigbuckler/theme.js/issues"},"keywords":["JavaScript","CSS","theme"],"license":"MIT","browserslist":["> 1%","ie 11"],"devDependencies":{"autoprefixer":"^9.6.0","cssnano":"^4.1.10","gulp":"^4.0.2","gulp-concat":"^2.6.1","gulp-postcss":"^8.0.0","gulp-terser":"^1.2.0","toggled.js":"^1.1.1"},"gitHead":"30c6d2cd8184329a7011df564859c07a7aca18a0","_id":"theme.js@1.0.1","_nodeVersion":"10.14.0","_npmVersion":"6.9.2","dist":{"integrity":"sha512-wIKaGaqpVI3dIRiWT26J+krwzj4+rED5cou7cWSjfWF6ad+a3tI6JcsSF1L5dLjEtKOxm8ztFcnUo4fwYAqbSw==","shasum":"f025c1850921959899d8b3af4d770640530dd1bc","tarball":"https://registry.npmjs.org/theme.js/-/theme.js-1.0.1.tgz","fileCount":5,"unpackedSize":6167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdG3AaCRA9TVsSAnZWagAAS9cP/0LsuWucvYAB5uJ1mO/E\nP0BgXMYs7JF3Qhkftn7mdMS24eYDzpPZACds1d529aRnx+gJHv94Y/Gqkkql\nQLr9oZ/q2LSTPfR7tnUksLSb5d54kWeAMBz3eJd6VVF6PImiJLn2qjLVCKcN\nR1IPcv7voyaz/4RyaWZr5azHMJTPChY2K02AOoMjMFNjUdZWpWQ+CB6lcbbe\nAidsFB9T2sjmJhhxBgNSeI14eor75OTnU1OZTOxOKyPWFJH7HnDx4nOWWeY5\nieGWYTyPj4K6Pch0gjQlqNn6m8QJBmP9loz//4h85Gx8tcM+/osPs8hMNCo5\nzu8M6uzqzeOjOgTAulQN+/g0beINCcC3r+OceezPy/RP4w9JRJ++K1BlcEbj\nOR2H6W0frtbKLH/0zWy0pKZMJRSxHfyTIgPz2l3o8qZvbLTq2c9wSVGTXkOv\nQ0rbraLZKaaXh8U3hwEq94evLGEOkn/zn1TQXeoj1/muRcPu+jx3xossNgyT\nb3TNXHwr43wzgm1M54zOXVVfJgeCoG6ajt5KNwdfh6n23IHxnhLxjxQEutiI\naLBDteKLdLqWV/k0fagXVAg8guN7jFID9tRNQntMhaYwPDM8tKELDZNB7xsm\nHg1s7dmuFsclpv5+c0+romlU47Pfkj+rOSZ6DwaUsbslwYH5ejv8b1skDQI0\ntEfm\r\n=Udf3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGQUJAioGGiy6dHYgpXDGYDcF7GaLfAtTjh7GKju3bw1AiEAmWiA0NqSGr9+QDW5tf8l7h5ApQHyAFMuXcFWGHX45AI="}]},"maintainers":[{"name":"craigbuckler","email":"craigbuckler@gmail.com"}],"_npmUser":{"name":"craigbuckler","email":"craigbuckler@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/theme.js_1.0.1_1562079257351_0.22339555280231926"},"_hasShrinkwrap":false}},"time":{"created":"2019-07-01T15:57:51.383Z","1.0.0":"2019-07-01T15:57:51.575Z","modified":"2022-05-21T17:57:37.011Z","1.0.1":"2019-07-02T14:54:17.528Z"},"maintainers":[{"name":"craigbuckler","email":"craigbuckler@gmail.com"}],"description":"simple light and dark themes for any website","homepage":"https://github.com/craigbuckler/theme.js#readme","keywords":["JavaScript","CSS","theme"],"repository":{"type":"git","url":"git+https://github.com/craigbuckler/theme.js.git"},"author":{"name":"Craig Buckler"},"bugs":{"url":"https://github.com/craigbuckler/theme.js/issues"},"license":"MIT","readme":"# theme.js\n\n[**demonstration**](https://codepen.io/craigbuckler/full/ewMNvV) | [**GitHub**](https://github.com/craigbuckler/theme.js) | [**npm**](https://www.npmjs.com/package/theme.js) | [**donate**](https://gum.co/themejs) | [@craigbuckler](https://twitter.com/craigbuckler) | [craigbuckler.com](https://craigbuckler.com/)\n\nSimple animated light and dark theme for any website inspired by [Night Mode with Mix Blend Mode: Difference](https://dev.to/wgao19/night-mode-with-mix-blend-mode-difference-23lm) by [@wgao19](https://twitter.com/wgao19).\n\nPlease use the code as you wish. [Tweet me @craigbuckler](https://twitter.com/craigbuckler) if you find it useful and [donate toward development](https://gum.co/themejs) if you use it commercially.\n\n* retains theme state between page loads\n* no external dependencies - works with any framework\n* fast and lightweight: 1,000 bytes of JavaScript, 330 bytes of CSS\n* easy to configure in HTML and CSS\n* works in all modern browsers\n* fails gracefully in browsers without support\n* includes [toggled.js](https://github.com/craigbuckler/toggled.js) for simple UI toggle switching\n\n*(Note that some websites may have incompatible CSS or require changes to theme.css.)*\n\n\n## Usage\n\nThe page must load the CSS and JavaScript. It can be placed anywhere but, typically, the CSS is loaded in the `<head>` and the JS is loaded just before the closing `</body>` tag:\n\n```html\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/theme.js/dist/theme.css\">\n<script src=\"https://cdn.jsdelivr.net/npm/theme.js/dist/theme.js\"></script>\n```\n\nCDN URLs are shown above but you can also `npm i theme.js` to install via npm and use a bundler.\n\nNow create a theme toggle switch on your page by adding a `data-toggled=\"themejs\"` attribute to any element, e.g.\n\n```html\n<p data-toggled=\"themejs\">theme</p>\n```\n\nThis can be styled however you prefer but it should be hidden by default and only shown then theme.js is active and a themejs-active class has applied to the body tag, e.g.\n\n```css\n[data-toggled=\"themejs\"] {\n  cursor: pointer;\n  display: none;\n}\n\n.themejs-active [data-toggled=\"themejs\"] {\n  display: block;\n}\n```\n\nThe element can now be clicked to toggle themes.\n\n\n## Advanced use\n\nThe following elements are added to the page so they can be altered as necessary:\n\n* `body.themejs-active` - applied when theme.js is supported\n* `body.themejs` - the alternative theme has been applied\n* `div.themejs-back` - background element, normally white\n* `div.themejs-overlay` - background overlay, normally white but can be changed\n\nAny elements that should not be reversed - *such as images* - should have the CSS `isolation: isolate;` property applied, e.g.\n\n```css\nimg, svg { isolation: isolate; }\n```\n\n## Version history\n\n### v1.0.1, 2 July 2019\n\n* toggled.js update\n\n### v1.0.0, 1 July 2019\n\n* initial release\n","readmeFilename":"README.md"}