Minimal Dark Mode Switch Button In JavaScript

Category: Javascript | October 23, 2021
Author:KK-Designs
Views Total:134 views
Official Page:Go to website
Last Update:October 23, 2021
License:MIT

Preview:

Minimal Dark Mode Switch Button In JavaScript

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

You Might Be Interested In:


Leave a Reply