Minimal Dark Mode Switch Button In JavaScript

Preview:

Description:

A minimal dark mode switch button that can be used to enable dark mode on your website.

Based on JavaScript and CSS prefers-color-scheme media feature.

How to use it:

1. Include the main JavaScript dark-mode.js on the page.

<script src="dark-mode.js"></script>

2. Create a dark mode switch button on the page.

<button onclick='changeToDarkMode();'>Toggle dark mode</button>

3. Customize the background & text colors for dark & light themes.

@media screen and (prefers-color-scheme: light) {
  body {  
    background-color: white;
    color: black;  
  }
    
  .dark-mode {
    background-color: black;
    color: white;
  }
}
.smooth-transition {
  transition: background-color 300ms;
}
@media screen and (prefers-color-scheme: dark) {
  .dark-mode {
    background-color: white;
    color: black;
  }
  
  body {  
    background-color: black;
    color: white;  
  }
}

Changelog:

10/23/2021

• Code optimization