This is a plugin of determining and switching the color theme of the site. Adds a class to stylizing a dark or bright site of the site to the HTML element.
npm i site-color-schemesconst colorSchemes = require("site-color-schemes");or
import colorSchemes from 'site-color-schemes'Type: object
Type: string
Default: [data-color-scheme]
The selector defining button for the color change
Type: string
Default: light
Class added with active light color theme
Type: string
Default: dark
Class added with a dark color topic
const colorSchemes = require("site-color-schemes");
colorSchemes.auto(); // You can also for example: colorSchemes.auto({lightClass: "myLighyClass", darkClass: "myDarkClass});or
const colorSchemes = require("site-color-schemes");
colorSchemes.click(); // You can also for example: colorSchemes.click({selector: ".class", lightClass: "myLighyClass"});- «auto» — The class class is added activated on the user device (light or dark)
- «click» — Until the user has used the topic change button, the topic class is added activated on the user device (light or dark).After clicking on the change button of the topic, the choice of the invoice is remembered and at the next opening the site the class selected by the topic selected by the user (light or dark) is added
When using a plugin without options, the color switch button for the HTML should have an attribute data-color-scheme
<button data-color-scheme>
<img src="/path-to-the-icon">
Perhaps the text of the button
</button><!DOCTYPE html>
<html class="light"> <!-- The result of the work of the plugin -->
...
</html>