Skip to main content

Theme control

Themes​

How It Works:​

CSS Variables: Global variables for background and text color (--background-color and --text-color) are defined in the root selector :root.
Themes: For each theme (dark, Halloween), when a class is activated on the <body> element, the values of these variables change, which automatically updates the styles of all elements using these variables.
Theme Management: In JavaScript, clicking on buttons changes the class on the <body> element, activating the corresponding theme and applying the styles through CSS variables.
With this approach, you don't need to add separate states for each element in the CSS—just use variables. This simplifies maintaining and extending styles for new themes.

const defaultModeButton = document.getElementById("default-mode-toggle");
const darkModeButton = document.getElementById("dark-mode-toggle");
const halloweenModeButton = document.getElementById("halloween-mode-toggle");

function setTheme(theme) {
  document.body.classList.remove("dark-mode", "halloween-mode");

  if (theme !== "default") {
    document.body.classList.add(theme);
    defaultModeButton.style.display = "block";
    darkModeButton.style.display = "none";
    halloweenModeButton.style.display = "none";
  } else {
    defaultModeButton.style.display = "none";
    darkModeButton.style.display = "block";
    halloweenModeButton.style.display = "block";
  }
}

defaultModeButton.addEventListener("click", () => setTheme("default"));
darkModeButton.addEventListener("click", () => setTheme("dark-mode"));
halloweenModeButton.addEventListener("click", () => setTheme("halloween-mode"));
HTML Theme controlCSS Theme controlTS Theme control
Big O