Multiple Themes using JS and CSS

This time we are going to create multiple themes switch similar to this Multiple themes with JS and JSON but much easier. So let's get to work.
First we need our HTML structure

<div class="themes">
    <div class="theme" onclick="changeTheme('light')"></div>
    <div class="theme" onclick="changeTheme('dark')"></div>
    <div class="theme" onclick="changeTheme('red')"></div>
</div>
<div class="container">
        <div class="container">
            <h2>Themes Switcher Using CSS Classes</h2>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore magnam atque, minima doloribus reprehenderit libero necessitatibus dicta vel obcaecati? Provident totam adipisci veniam aperiam obcaecati reprehenderit, eaque eos laborum placeat quam laboriosam distinctio nostrum tenetur tempore dolore assumenda numquam esse id earum ipsa iure vitae, reiciendis, natus magnam? Aperiam mollitia harum hic sed maxime, eaque illum provident molestiae modi non enim exercitationem officia pariatur minima eum consequatur reprehenderit dicta quo magnam, dolorem quas. Architecto fuga amet quidem ratione, earum maxime neque repudiandae nostrum perspiciatis facere porro quod, sapiente iure et! In possimus, nam vitae, quod ipsam architecto at repellat perferendis, nemo earum autem? Exercitationem nam facilis doloremque eligendi suscipit. Delectus eveniet inventore adipisci. Cumque suscipit itaque animi voluptate illum veniam commodi molestiae nemo! Nihil, aut? Corporis provident vel voluptates labore ad fugiat, cum eum non, expedita modi assumenda alias nihil blanditiis natus ipsa hic nisi mollitia! Atque delectus veritatis, reprehenderit minus cupiditate aliquam quos eaque odit laudantium cum laboriosam? Ullam expedita ipsa adipisci, dolorem voluptates ipsam eaque aliquid exercitationem rerum consectetur suscipit reprehenderit et dolore, placeat assumenda beatae? Impedit iste, molestiae facere illo velit illum consequatur totam ex tenetur nisi, ratione similique saepe consequuntur recusandae in accusantium alias suscipit adipisci quisquam. Corporis dolorem fugiat reprehenderit, aspernatur nam est ullam repudiandae libero dolore ex quo sed, architecto, quidem earum inventore at. Sunt velit distinctio eaque commodi, asperiores recusandae delectus sed saepe. Nostrum temporibus sit, numquam reprehenderit dolores qui ea culpa quasi perspiciatis consectetur enim minima doloribus animi tenetur quo quis cumque molestias laudantium fugiat iure dicta dolor! Praesentium, quo nesciunt
        </div>

We have our HTML, now it's time for CSS

* {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
}
body {
  background-color: var(--bg-color);
  color: var(--text);
}
h1 {
  margin-top: 20px;
  margin-left: 1rem;
}
.themes {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 8px;
  padding: 20px;
  width: 200px;
  background-color: var(--secondary);
  margin-left: 1rem;
  margin-top: 20px;
}
.themes .theme {
  width: 30px;
  border-radius: 8px;
  height: 30px;
  cursor: pointer;
}
.themes .theme:nth-child(1) {
  background-color: #ddd;
}
.themes .theme:nth-child(2) {
  background-color: #333;
}
.themes .theme:nth-child(3) {
  background-color: rgb(57, 2, 2);
}

.container {
  width: min(100% - 2rem, 1200px);
  margin-top: 80px;
  margin-inline: auto;
  background-color: var(--secondary);
  padding: 20px;
}

Ok, we have CSS structure, we can add default, dark and red theme now

:root {
  --bg-color: #eee;
  --secondary: #ccc;
  --text: #333;
}
.dark {
  --bg-color: #333;
  --secondary: #222;
  --text: #ddd;
}
.red {
  --bg-color: rgb(57, 2, 2);
  --secondary: rgb(102, 23, 23);
  --text: rgb(235, 235, 235);
}

Our Page looks like this now

But we can't change our themes without JavaScript

const changeTheme = (theme) => {
    document.body.classList = ''
    document.body.classList.add(theme)
}

That's better.
Here is the result:
Light(default) theme:

Dark theme:

Red theme:

But we're not finished yet. As in my previous post, we will to add localStorage.
First we need to find matching theme and then set localStorage

switch (theme) {
    case 'light':
        localStorage.setItem('theme', 'light')
        break
    case 'dark':
        localStorage.setItem('theme', 'dark')
        break
    case 'blue':
        localStorage.setItem('theme', 'blue')
        break
}

And let's load localStorage

document.body.classList = localStorage.getItem('theme')

For all files visit my Github Respository.

For more of my projects, please visit my Github or Codepen Profile

Blog

Multiple Themes using JS and CSS

Paweł Czarnecki

Join Our Newsletter. No Spam, Only the good stuff.

Related