Skip to main content
Version: 2.0.1

Dark Mode

minstyle.io 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 minstyle.io. 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 minstlyle.io 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. -->
</html>
</html>

Installation

To install the dark mode switcher, you have 4 options.

Manually

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>

CDN

It is also possible to add the link tag, importing sources from a CDN.

<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dark.min.js"
></script>

NPM

The dark-mode-switcher is also available under npm.

npm i dark-mode-switcher

Yarn

The dark-mode-switcher is also available under yarn.

yarn add dark-mode-switcher