Minimal Dark Mode Switch Button In JavaScript

Category: Javascript | October 23, 2021
Author:KK-Designs
Views Total:576 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:


One thought on “Minimal Dark Mode Switch Button In JavaScript

  1. Dustin W. Stout

    I love how light-weight this solution is. Only problem is that you haven’t included anything that will save the user’s selection. So every time the page is loaded, it reverts back to system preference. How might you implement that?

    Reply

Leave a Reply