Browser Color Scheme
🌙 Toggle Browser Color Scheme☀️
Installation
jsDelivr CDN
https://cdn.jsdelivr.net/npm/browser-color-scheme/index.jsunpkg CDN
https://unpkg.com/browser-color-scheme/index.jsNPM
$ npm i browser-color-schemeYarn
$ yarn add browser-color-schemeJavaScript
import 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_LIST[0]
Browser color scheme name.
window.BROWSER_COLOR_SCHEME_VARIANT ⇒ String: undefined
Value of the variant to add to the browser color scheme.
BROWSER_COLOR_SCHEME(VALUE) ⇒ Boolean
Method to toggle browser color scheme.
| Param | Type | Description |
|---|---|---|
| VALUE | string |
A 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>