How to add a Dark/Light Mode for your forums!

[Mati]

Dark mode is very important for any website. Users with different interests visit the forums. Some of them like dark mode, and some like light mode.

Below, we will create a simple webpage using HTML, CSS, and JavaScript. Also, we will learn to implement the light and dark modes using jQuery to toggle between CSS.

Step 1 - To toggle between the dark and light themes, we can add and remove particular classes from the element. For example, create a class for a dark theme and CSS for a dark theme. When we add dark class to the body, the dark theme should be applied to the body of the forum, and when we remove it, it should be normal.

Step 2 - Apply dark mode styles to your CSS Stylesheet as follows:

Code:

/* Add more dark mode styles below */
body.dark  {
  background: #1b1b1b;
}
.dark #wrap {
  background: #1b1b1b;
}
.dark-mode span {
  border: 1px solid #333;
  padding: .5rem;
  background: #333;
  border-radius: 5px;
  color: #eaeaea;
}


Step 3 - Create Dark/Light Mode toggle button. When a user clicks the button, it should toggle between the dark and light themes.
You can add the html code in your templates for example overall_header  

Code:


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
<div class="dark-mode">
<span class="dark-button"><i title="Dark mode" class="far fa-moon"></i></span>
<span class="light-button"><i class="fal fa-lightbulb-on" title="Light mode"></i></span>
</div>


Step 4 - The main JavaScript to setup the dark mode. (HTML & JAVASCRIPT -> Create a new javascript Title: Changetheme Dark/Light)

Code:

$(function(){

var darkMode;

if (localStorage.getItem('dark-mode')) {  
  // if dark mode is in storage, set variable with that value
  darkMode = localStorage.getItem('dark-mode');  
} else {  
  // if dark mode is not in storage, set variable to 'light'
  darkMode = 'light';  
}

// set new localStorage value
localStorage.setItem('dark-mode', darkMode);


if (localStorage.getItem('dark-mode') == 'dark') {
  // if the above is 'dark' then apply .dark to the body
  $('body').addClass('dark');  
  // hide the 'dark' button
  $('.dark-button').hide();
  // show the 'light' button
  $('.light-button').show();
}

$('.dark-button').on('click', function() {  
  $('.dark-button').hide();
  $('.light-button').show();
  $('body').addClass('dark');  
  // set stored value to 'dark'
  localStorage.setItem('dark-mode', 'dark');
});

$('.light-button').on('click', function() {  
  $('.light-button').hide();
  $('.dark-button').show();
  $('body').removeClass('dark');
  // set stored value to 'light'
  localStorage.setItem('dark-mode', 'light');  
});
});

This tutorial will show you how to change between dark and light modes using JavaScript and JQuery. We need to change the web page's CSS and apply CSS for the dark theme. We can apply CSS for dark mode by adding and the class from the webpage we wish to apply on the forums.

[System32]

Is this an old version of theme switcher or the one you are currently using? The old one has two buttons, your current one has only one that changes.
P.S. You could add an image so that people understand what is it about.

[Mati]

This is the new version we are currently using on Forum Services, the code is modified to toggle button, and add an onclick event in the button. When a user clicks the button, it should toggle between the moon and lightbulb.

[Sponsored content]