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.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.
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;
}
[data-theme="light"] {
--bg-color: #E5E5E5;
--color: #1A1A1A;
}
html {
background-color: var(--bg-color);
color: var(--color);
}
</style>
</head>
<body>
<h1>TESTA!</h1>
<script src="./index.js">