browser-color-scheme v1.1.0
Browser Color Scheme🌙Toggle Browser Color Scheme☀️ InstallationjsDelivr CDNhttps://cdn.jsdelivr.net/npm/browser-color-scheme/index.jsunpkg CDNhttps://unpkg.com/browser-color-scheme/index.jsNPM$ npm i browser-color-schemeYarn$ yarn add browser-color-schemeJavaScriptimport bcs from "browser-color-scheme"window.BROWSER_COLOR_SCHEME_LIST ⇒ Array: "dark", "light"Browser color scheme names list.window.BROWSER_COLOR_SCHEME_VALUE ⇒ String: window.BROWSER_COLOR_SCHEME_LIST(localStorage"theme" || ${prefers-color-scheme}.matches)0 || window.BROWSER_COLOR_SCHEME_LIST0Browser color scheme name.window.BROWSER_COLOR_SCHEME_VARIANT ⇒ String: undefinedValue of the variant to add to the browser color scheme.BROWSER_COLOR_SCHEME(VALUE) ⇒ BooleanMethod to toggle browser color scheme.ParamTypeDescriptionVALUEstringA color defined in window.BROWSER_COLOR_SCHEME_LIST.Example<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <style> :root { --bg-color: #1A1A1A; --color: #E5E5E5; --title: #E5E5E5; } data-theme="dark_green" { --bg-color: #1A1A1A; --color: #E5E5E5; --title: #61FA99; } data-theme="light" { --bg-color: #E5E5E5; --color: #1A1A1A; --title: #1A1A1A; } data-theme="light_green" { --bg-color: #E5E5E5; --color: #1A1A1A; --title: #00BF66; } html { background-color: var(--bg-color); color: var(--color); } h1 { color: var(--title); } </style> </head> <body> <h1>TESTA!</h1> <input id="input_variant" name="variant" type="checkbox" style="margin-left: 0;margin-bottom: 10px;margin-right: 7.5px;"> <label id="label_variant" for="variant" style="cursor: pointer;">Add the color green as a variant.</label> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function () { const input = document.getElementById("input_variant"); const label = document.getElementById("label_variant"); if (input && label) { function checkbox_variant(checked) { if (checked == true) { window.BROWSER_COLOR_SCHEME_VARIANT = "green"; BROWSER_COLOR_SCHEME(); label.innerText = "Remove variant."; } else { window.BROWSER_COLOR_SCHEME_VARIANT = undefined; BROWSER_COLOR_SCHEME(); label.innerText = "Add the color green as a variant."; }; }; input.addEventListener("change", function (element) { return checkbox_variant(element.target.checked); }); label.addEventListener("click", function () { return input.click(); }); }; }); </script> <script src="./index.js"></script> </body> </html>CL 2022 Browser Color Scheme</> with ❤ by Alex Animate Mp4 and contributors.