dark-mode-switcher
Pure JS allow you to switch your web interface in dark mode.
Informations
This script has been developed in parallel with the minstyle.io project, in order to facilitate the integration of the button to change display mode.
Version
dark-mode-switcher V0.0.1
Get Started
To install the script, three options are available :
The first possibility is to download dist/dark.js file, to integrate it into a web page :
You can also upload the script with NPM or Yarn :
npm :
$ npm install dark-mode-switcheryarn :
$ yarn add dark-mode-switcherHow it works
First, the script will inject on your web page an HTML structure, allowing to display a fixed button. It will allow the user to change the Dark/Light display mode.
By default, the theme displayed will be the one set on the operating system. Nevertheless, if the user wishes to change the display mode, a cookie will be created in order to keep this choice.
Changing the display mode changes the data-theme attribute of the <html> tag like that :
<!-- For light mode. same as : <html lang="en" data-theme="light"> --> <!-- For dark mode. -->What about the CSS?
In order to develop a web page with a dark theme, the use of CSS variables is necessary, such as the following :
A detailed example is available here.
You can also use the CSS framework minstyle.io, integrating the management of the dark mode.