Package Exports

browser-color-scheme
browser-color-scheme/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (browser-color-scheme) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Browser Color Scheme

🌙Toggle Browser Color Scheme☀️

Installation

jsDelivr CDN

https://cdn.jsdelivr.net/npm/browser-color-scheme/index.js

unpkg CDN

https://unpkg.com/browser-color-scheme/index.js

NPM

$ npm i browser-color-scheme

Yarn

$ yarn add browser-color-scheme

JavaScript

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>

browser-color-scheme