{"_id":"contrast-js","_rev":"3-8d56cbd19aed819e80c7ab8e0469697d","name":"contrast-js","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"contrast-js","version":"0.0.1","description":"Contrast.js is a tiny (4.26kb) library with no dependencies that adds responsiveness to the color or background attributes of DOM elements based on the section of background image behind the target element. The library analyzes the background behind the b","main":"contrast.js","directories":{},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/MishaPetrov/Contrast.js.git"},"keywords":["contrast","responsive","color","contrast.js"],"author":{"name":"Misha Petrov"},"license":"MIT","bugs":{"url":"https://github.com/MishaPetrov/Contrast.js/issues"},"homepage":"https://github.com/MishaPetrov/Contrast.js#readme","gitHead":"17068e287da5d17c29bcd9740212370d85e2bbe3","_id":"contrast-js@0.0.1","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-nYcDFkSKttiEfyKa+X+B1xWkp51CG+C3EYYxu7NZiB/61KLzIwdtMtBhuBpDmr7F8fdvjNgZVCb3cPthSSi2gg==","shasum":"ec50f4b1234a97214d0ea0af89b8e7aac0462210","tarball":"https://registry.npmjs.org/contrast-js/-/contrast-js-0.0.1.tgz","fileCount":20,"unpackedSize":12619013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGTkmCRA9TVsSAnZWagAA2YUP+wcyQOQlRrPnKcE0IQax\nMqmFI6PRwotTs+dml8dElV1YaFGlb0MNJe3L7i7iOdiByO2qP1hitDVGULu1\nzZLkAJzwnMuySlXxzNIe8dfmnEwxj9Q91QQK3aCT3NZXbCM5PoCFVAouLP+F\nDJTr8lJ0te6zZ4glpbtwb7xu8BeRFs5jghVrUhDKLC1x5VvpW25zls6/TCbD\nPes7OgWxgWzDoCA3JpU9/W415Py9ugYcwSFtYeSC5nk/RRxeXnaOBHP7AXB+\nh8A50m9LiNBY581JdOMOFqmSAl6Y+AkTCn/4BjOLHYlWsCUQ0GydL+IEioa4\nW1UCFv33gpxp1XjY3ReSPQjm9DcQ5yiP6dvUNyYjiuH+rrXM44PUTiEl9qv8\nh1lD6dMyMBpNFTdIL9yA7jQZssGQ48hdQdx2maHWntV/lLittQh2FJ3uOpi9\n20At7tXkdjV3Hl7s4A7UbRzTMIZD+YIJQT/NhKMYUy7tR/oFOpg9G1+9soHy\n1Z/7BABxnTxZi+pt+ASKW/0durXUAMb41zfoEx0JFxFRff1XXTz83d5lqLKk\ncfBemOrjlit5fdo6Xb3buxeBxD2LTsXTowO92PpbZGMmgezwNLX6UypCyOIG\nOEW5N6wrJX/A8gFDzuJBlY8FrsaOHV6RWk2ap/f+2P7eGJ8rNbxmJ1Eg7dxH\nTyNS\r\n=K9ZO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC1UFFKIz++r093Tob+zL3QlDLv8r8KuRgEzwBMpTBrUAiEAyS+HXQczPQvLW/krlc7BzN6mBajfea698W7kktW3lBw="}]},"maintainers":[{"name":"uxmishka","email":"uxmishka@gmail.com"}],"_npmUser":{"name":"uxmishka","email":"uxmishka@gmail.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/contrast-js_0.0.1_1595488549625_0.7164293998848403"},"_hasShrinkwrap":false},"0.0.2":{"name":"contrast-js","version":"0.0.2","description":"Contrast.js is a tiny (4.26kb) library with no dependencies that adds responsiveness to the color or background attributes of DOM elements based on the section of background image behind the target element. The library analyzes the background behind the b","main":"contrast.js","directories":{},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/MishaPetrov/Contrast.js.git"},"keywords":["contrast","responsive","color","contrast.js"],"author":{"name":"Misha Petrov"},"license":"MIT","bugs":{"url":"https://github.com/MishaPetrov/Contrast.js/issues"},"homepage":"https://github.com/MishaPetrov/Contrast.js#readme","gitHead":"98297fdbc40d67b606d555feb70c18d4a9f77987","_id":"contrast-js@0.0.2","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-9OqC5/m0AEGu9f/07MwYEY7s2lP+HlnfYxuGWIUNgPjrLq2mbQ5CTsSJwgyVe2d0l8bNt1B26f3MnyqZy/HNQw==","shasum":"d6e2f392827da286ea9e5b7e99198a50610f0e61","tarball":"https://registry.npmjs.org/contrast-js/-/contrast-js-0.0.2.tgz","fileCount":5,"unpackedSize":27215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGTnACRA9TVsSAnZWagAAUCcP/A5b1b4BAhk7wjZkxlzO\n3KBE2qqWh7+xOMDw2s8mFG+YmRmkPh2LJDVzCIpZsZoNBz6W9PlifXOeaTuJ\nr/puQWVU3prmznAU869qaQwIMrqt/czFwQOUJmVO5eZiIY61Zl9h1of2zoKF\nA7t597zqfCnHuDO4Z/YEtBYpCmTIvWkdjvE2+P3HPVcgW4xA8plMMsAJfg7a\n2Ub5n8drf8y1DYt/j+SZ1pu3ZYVzNXOa4rqbEK62hJM02uqw57Bt4ACO2f9T\nZxapb1v/fS9oIaStlYj/bHG9tF4cmoQJXFEPQeeY8KPEwPRUwjDsZ1doegXa\nFJsw1ZcZBfj7gX2ta/aVvzFtiF7+dEiN0bYHdDV/hW8VrLrTdYqi0OLQTi4j\nx+DJ7fjNroFQ5p/egi/amLwQeYagK0wfbJVAExWkI656fU1f3T5iSN1xStkZ\nvrctguULthmTVNvJC6QWRrkBdp4ZPZsHw1UxvmVujooj5QEMoJHZ51OILyPw\nHcpgYBZc4r6tw8hGopyIO+D0Hj2geYbFjK8cUtUcTEEEWAsxOxLCzRwgK+eJ\nVTt+S+DWU/d+7TsnPrDxbfZbjCCo33pQaW2nW6sNRc1UiRZ4Kdzby4QuFAYe\n0NSKDT7UvXW4SHO9/59WWslqB6JAOdjKd+fJD59xHikejFuWz5Rv6KZO7clW\nu7hU\r\n=kA2k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyb2/LwL3FMDCZz9rKfTXcUD6uyFyQO9otVPl2UHgfJAIhAOVnquR76ueIsMQdIQwscrhwUOqrdBR1FPIBGWc/Qa1M"}]},"maintainers":[{"name":"uxmishka","email":"uxmishka@gmail.com"}],"_npmUser":{"name":"uxmishka","email":"uxmishka@gmail.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/contrast-js_0.0.2_1595488703921_0.9091398270273512"},"_hasShrinkwrap":false},"0.0.3":{"name":"contrast-js","version":"0.0.3","description":"Contrast.js is a tiny (4.26kb) library with no dependencies that adds responsiveness to the color or background attributes of DOM elements based on the section of background image behind the target element. The library analyzes the background behind the b","main":"contrast.js","directories":{},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/MishaPetrov/Contrast.js.git"},"keywords":["contrast","responsive","color","contrast.js"],"author":{"name":"Misha Petrov"},"license":"MIT","bugs":{"url":"https://github.com/MishaPetrov/Contrast.js/issues"},"homepage":"https://github.com/MishaPetrov/Contrast.js#readme","gitHead":"3038bf0cb93781db8cff929d5536f1e53b419909","_id":"contrast-js@0.0.3","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-2zTwpiRdKUTRnrwp4+B/S0NyoIexJuKGByyxHufk5aVNflOkWF9ONYZ9cqvN1MB4HcOJVuBb1RP1l4DRpzFbOg==","shasum":"4cf03b63288cba9e4c036ac268d3c068b0246d52","tarball":"https://registry.npmjs.org/contrast-js/-/contrast-js-0.0.3.tgz","fileCount":7,"unpackedSize":29728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGUoHCRA9TVsSAnZWagAALooP/AuNs4Em4alVwbtFK9B2\nQLF0Ro7NW/2HL5b5Wf+QrP+fA0P/2bshzSBxjCGMutbnvptSCsOyBvQZvEbK\nUXawUC+NSLcoXmEA5a0v7TsK2TfAe2X5mhwSdQWaS6lpi7CAdWV1p8DVz+vB\n3HRf7dNPoNB8WCVKmSz60DR8dgSRuT/vJLQ1w09qWfFXZlxL8yPq+hZH/tpw\neShYqOd9Vw/ZSPDvj+ZVBHQnBL2ySlK/J+OUQ7W6wZMYX12XmxgDnWdlmK1I\nkev4CaQt3+3gfOlowbS7HIC0aCFch9FnF5X99Rqk2yyOj2zkrCCsjYSUB1qN\nPeUlFmI/DhKPrGeO3hlraeY4anzn6HIGpDzezUanTbzURIiKvs6Q6164Ke9i\n56smr0TkBGOeYvS+JY7ztAPb3QtKSiMKGvFP+GN/o8Z2Z2g7Nmh46H2v+7Hj\nUTmuUuFva9Z3z/OdBwX0Ao7V0gU+QF8NjIOGDk5eChT6rZpJSlc/qVeOQg2E\nbYQzDI8iqHY92anBWWn99QTd0r/xgpxBjGc1HC2XPigjrHbF88j5J2zQD1Z3\nHOUSIbUHKLQOBMiOL9G7cGummW5c5v/0wSHDJum4RxCQqgojnJlfbv8Xo3g7\n2hGB1GmD/nJjmGPET+Bxtub487WjwY06/gEj/rAnFVAmj3uObrUm224sd+c4\nUTRO\r\n=Jeby\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIECzBdQP7Vmgbq11pPf1B53L0S0kEVyLuObz3+q07qNeAiEA3g/vKgVBYsay4B+RnWHcMA2A5CVUuzx54uN1l0KmTEs="}]},"maintainers":[{"name":"uxmishka","email":"uxmishka@gmail.com"}],"_npmUser":{"name":"uxmishka","email":"uxmishka@gmail.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/contrast-js_0.0.3_1595492871387_0.510859183219148"},"_hasShrinkwrap":false}},"time":{"created":"2020-07-23T07:15:49.624Z","0.0.1":"2020-07-23T07:15:50.213Z","modified":"2022-04-27T16:20:23.477Z","0.0.2":"2020-07-23T07:18:24.027Z","0.0.3":"2020-07-23T08:27:51.614Z"},"maintainers":[{"name":"uxmishka","email":"uxmishka@gmail.com"}],"description":"Contrast.js is a tiny (4.26kb) library with no dependencies that adds responsiveness to the color or background attributes of DOM elements based on the section of background image behind the target element. The library analyzes the background behind the b","homepage":"https://github.com/MishaPetrov/Contrast.js#readme","keywords":["contrast","responsive","color","contrast.js"],"repository":{"type":"git","url":"git+https://github.com/MishaPetrov/Contrast.js.git"},"author":{"name":"Misha Petrov"},"bugs":{"url":"https://github.com/MishaPetrov/Contrast.js/issues"},"license":"MIT","readme":"![Contrast.js logo](img/logo.png)\n============\n![npm](https://img.shields.io/npm/v/contrast-js?color=green&style=flat-square) [![GitHub Size](https://img.shields.io/github/size/MishaPetrov/Contrast.js/contrast.min.js?color=%23ff5757&style=flat-square)](https://github.com/mishapetrov/Contrast.js/contrast.min.js) ![GitHub issues](https://img.shields.io/github/issues/mishapetrov/Contrast.js?style=flat-square) [![GitHub stars](https://img.shields.io/github/stars/mishapetrov/Contrast.js?style=flat-square)](https://github.com/mishapetrov/Contrast.js) [![Live Demo](https://img.shields.io/badge/demo-online-blueviolet?style=flat-square)](https://mishapetrov.github.io/Contrast.js/example/)\n\nContrast.js is a tiny (4.26kb) library with no dependencies that adds responsiveness to the color or background attributes of DOM elements based on the section of background image behind the target element.\nThe library analyzes the background behind the bounding box of the target element by getting the average RGB values of pixels in the sub-rectangle behind the element and finding the best contrasting color.\n\nIn simple words, never worry about your color matching the background image again! No more countless media queries.\n\n![GIF demo](img/demo-2.gif)\n\n---\n\n## Buy me a coffee\n\nWhether you use this project, have learned something from it, or just like it, please consider supporting it by buying me a coffee, so I can dedicate more time on open-source projects like this :)\n\n<a href=\"https://www.buymeacoffee.com/mishka\" target=\"_blank\"><img src=\"https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-1.svg\" alt=\"Buy Me A Coffee\" style=\"height: auto !important;width: auto !important;\" ></a>\n\n---\n\n## Features\n- Vanilla JS - no jQuery or any other dependencies\n- Very simple setup/activation\n- Support for responsive font color\n- Support for responsive div background color\n- Support for background-size: cover;\n- Support for background-size: 100%;\n- Option to add custom colors to switch between (Light/Dark)\n- Option to change activation class names\n- Option to turn on/off activation on window resize event\n\n---\n\n## Install\nTo start working with Contrast.js right away, just add this line before your closing <body> tag:\n```html\n<script type=\"text/javascript\" src=\"https//cdn.jsdelivr.net/npm/contrast-js@0.0.3/contrast.min.js\">\n```\n\nAlternatively, Contrast.js can be installed with [`npm`](https://www.npmjs.com/package/contrast-js)\n```sh\n$ npm install contrast-js\n```\n\n…or include the file from this repo…\n```html\n<script src=\"contrast.min.js\"></script>\n```\n\n---\n\n## Run\nAdd `contrast-bg` and `contrast-el` classes to the element that has the background image and the target element, respectively like this:\n```html\n<div class=\"contrast-bg\">\n  <h1 class=\"contrast-el\">Resize and watch my color change</h1>\n</div>\n```\n\nTo run Contrast.js, create new instance of Contrast class and invoke launch() method on it.\n```javascript\nconst Contrast = require('contrast-js');\n\nlet contrast = new Contrast;\ncontrast.launch();\n```\n\nContrast class also accepts options object like below:\n```javascript\nconst Contrast = require('contrast-js');\n\nlet contrast = new Contrast({\n  isCustomColors: false,        // Set to true if you want to prebuild light/dark colors\n  customLight: \"#bddfe0\",       // dark color HEX if isCustomColors is set to true\n  customDark: \"#334054\",        // light color HEX if isCustomColors is set to true\n  backgroundSize: \"cover\",      // \"cover\" or \"100%\" based on the background-size property in css\n  bgClass: \"contrast-bg\",       // Option to rename the class for the element containing bg image\n  elementClass: \"contrast-el\",  // Option to rename the class for the target element\n  isDiv: false,                 // Set to true if the element is a div (to change it's background)\n  isResponsive: true            // Turn this so the module runs on window resize\n});\n\ncontrast.launch();\n```\n\n---\n\n## What's not there yet\n- Currently the library supports changing color for only ONE element.\n- background-position isn't supported yet\n\n---\n\n## Proud to mention\n<img alt=\"FictionTribe Logo\" src=\"https://mishapetrov.github.io/Contrast.js/img/ft-logo.png\" width=\"100\">  \nCreated at <a style=\"color:#52337c;\" href=\"https://fictiontribe.com\">Fiction Tribe ®</a> in Portland, OR\n\n---\n\n## License\n>You can check out the full license [here](https://github.com/mishapetrov/Contrast.js/LICENSE)\n\nThis project is licensed under the terms of the **MIT** license.\n","readmeFilename":"README.markdown"}