minstyle.io integrates the management of the dark mode. Each HTML element is designed to be displayed in both light and dark mode.
The default mode will be the one set on the user's system. If the display mode is changed, a cookie is placed on the browser to store this information.
The dark-mode-switcher is optional, you can develop your own script modifying the
How 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 :
<html lang="en"> <!-- For light mode. same as : <html lang="en" data-theme="light"> --> <html lang="en" data-theme="dark"> <!-- For dark mode. -->
To install the dark mode switcher, you have 4 options.
The compiled sources are available for download. You just have to add the
<link> between your
It is also possible to add the
link tag, importing sources from a CDN.
The dark-mode-switcher is also available under npm.
npm i dark-mode-switcher
The dark-mode-switcher is also available under yarn.
yarn add dark-mode-switcher