A Pure HTML/CSS Library for Dark Mode on Your Website

Dark mode is a pure html and css library for the dark mode of your website. It has a seamless setup and also changes via system settings. Small but useful.

day and night mode javascript, dark mode toggle button css, dark mode switch, dark mode javascript

How to make use of it:

1. Include the primary JavaScript dark-mode.js on the web page.

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

2. Create a darkish mode swap button on the web page.

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

3. Customize the background & text colors for dark & mild 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;  
  }
}

Minimal Dark Mode Switch Button, KK-Designs Plugin/Github, dark theme toggle button js, dark mode switch min js, dark mode button design


See Demo And Download

Official Website(KK-Designs): Click Here

This superior jQuery/javascript plugin is developed by KK-Designs. For extra Advanced Usage, please go to the official website.

Share