Skip to main content
Version: 2.0.2

Dark Mode integrates the management of the dark mode. Each HTML element is designed to be displayed in both light and dark mode.

In order to allow users to control the display mode, the dark-mode-switcher package has been developed to fully integrate with This package proposes a javascript injecting on the web page a fixed button, allowing to change mode, as it is the case on the whole website.

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 <html> tag.

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 head tags.

<script type="text/javascript" src="dark.min.js"></script>


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