Java Light/Dark Theme • 7 min read

Implementation & Code

We put this code in the ./_includes/header.html. This file stores the HTML code for the clickable links that lead to each page(Blogs, Time Box Page, Home, etc.). This made sure that the button would always show up on the left for ease of access.

%%javascript

var preferDark = window.localStorage.getItem('preferDark'); 
// Initialize the preferDark variable if it doesn't exist
if (preferDark !== 'true' && preferDark !== 'false') {
  window.localStorage.setItem('preferDark', 'false');
  preferDark = window.localStorage.getItem('preferDark');
}
// toggleMode function invoked by CSS button
function toggleMode() {
    if (preferDark === 'true') {
      lightMode();
      preferDark = 'false';
    } else {
      darkMode();
      preferDark = 'true';
    }
    window.localStorage.setItem('preferDark', preferDark);
  }
function darkMode() {
  var headers = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
  headers.forEach(function(header) {
    header.classList.add("header-dark");
  });
  var images = document.querySelectorAll("img");
  images.forEach(function(image) {
    image.classList.add("image-dark");
  });
  var element = document.body;
  element.classList.add("dark-mode");
  var elem = document.querySelectorAll("#border");
  elem.forEach(function(border) {
    border.classList.add("border-dark");
    });
  var bars = document.querySelectorAll("#bar");
  bars.forEach(function(bar) {
    bar.classList.add("bar-dark");
    });
  var cellz = document.querySelectorAll("#cells");
  cellz.forEach(function(cells) {
    cells.classList.add("cell");
    cells.classList.add("cells-dark");
    });
  var tables = document.querySelectorAll("#table");
  tables.forEach(function(table) {
    // table.classList.add("myTable")
    table.classList.add("table-dark");
    });
    document.body.classList.add('dark-mode');
}
function lightMode() {
  var headers = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
  headers.forEach(function(header) {
    header.classList.remove("header-dark");
  });
  var images = document.querySelectorAll("img");
  images.forEach(function(image) {
    image.classList.remove("image-dark");
  });
  var element = document.body;
  element.classList.remove("dark-mode");
  var elem = document.querySelectorAll("#border");
  elem.forEach(function(border) {
    border.classList.remove("border-dark");
    });
  var bars = document.querySelectorAll("#bar");
  bars.forEach(function(bar) {
    bar.classList.remove("bar-dark");
    });
  var cellz = document.querySelectorAll("#cells");
  cellz.forEach(function(cells) {
    cells.classList.remove("cell");
    cells.classList.remove("cells-dark");
    });
  var tables = document.querySelectorAll("#table");
  tables.forEach(function(table) {
    // table.classList.remove("myTable")
    table.classList.remove("table-dark");
    });
    document.body.classList.remove('dark-mode');
}
document.addEventListener("DOMContentLoaded", function() {
  if (preferDark == 'true') {
  darkMode();
} else {
  lightMode();
}
});

ChatGPT Review

The code you provided appears to be a JavaScript implementation for toggling between light and dark themes on a web page. Overall, it accomplishes its intended functionality, but there are some improvements and suggestions that can be made to enhance the code’s readability and maintainability:

Variable Names and Comments: Meaningful variable and function names are crucial for code readability. Consider using more descriptive names to make the code self-explanatory. Also, add comments to explain the purpose of functions and sections of the code.

Separation of Concerns: It’s a good practice to separate the JavaScript code from the HTML and CSS. You can achieve this by defining your themes in CSS classes and using JavaScript only for toggling these classes.

DRY (Don’t Repeat Yourself) Principle: The darkMode and lightMode functions have a lot of repetitive code. You can make this code more concise by using a loop to add or remove classes dynamically based on the elements you want to style.

QuerySelectors: Consider using more specific selectors to target elements. Currently, you are using generic selectors like “h1, h2, h3, h4, h5, h6” and “img,” which can affect unintended elements on your page.

Event Listeners: Use event delegation to handle theme toggling efficiently, rather than attaching click events to individual buttons or elements.