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.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Multiple Themes Toggle</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="theme-buttons">
      <button id="default-mode-toggle">Default Mode</button>
      <button id="dark-mode-toggle">Dark Mode</button>
      <button id="halloween-mode-toggle">Halloween Mode</button>
    </div>

    <h1>Welcome to the Themed Website</h1>
    <p>
      This is an example of how to implement multiple themes using CSS and
      JavaScript.
    </p>

    <script src="script.js"></script>
  </body>
</html>

CSS Theme controlJS Theme controlTS Theme control