Overview

The js-toggle-dark-mode is a smart JavaScript application that automatically inherits the user’s prefers-color-scheme and allows them to override it and store their preference in their browser storage. This enables site-wide preference for the user across multiple visits.

Features

• Automatic inheritance of the user’s prefers-color-scheme
• Ability for the user to override the color scheme preference
• Storage of the user’s preference in their browser storage
• Site-wide preference across multiple visits

Installation

To install the js-toggle-dark-mode on your own site, follow these steps:

1. Copy the three <link rel="stylesheet"> declarations from the top of the index.html file. The first two declarations for Bootstrap and Font Awesome are optional and only needed for styling the toggle button.
2. Copy the <div id="theme-toggler"> line from the file, which displays the toggle button if the user’s browser supports the functionality.
3. Copy the <script src> declaration from the bottom of the index.html file.
4. Copy the js and css folders.
5. Edit the css/light-theme.css file with your preferred light theme styles.
6. Edit the css/dark-theme.css file with your preferred dark theme styles.

Summary

The js-toggle-dark-mode is a JavaScript application that allows users to control the color scheme of a website based on their preference. It automatically inherits the user’s preferred color scheme, but also allows them to override it and store their preference in their browser storage. This enables site-wide preference and ensures that the user’s chosen color scheme persists across multiple visits.