Multiple themes with JS and JSON

First let's create themes container in html

<div class="themes">
    <div class="theme" onclick="changeTheme('light')"></div>
    <div class="theme" onclick="changeTheme('dark')"></div>
    <div class="theme" onclick="changeTheme('blue')"></div>
</div>

and content container to see changes after choosing theme

<div class="container">
  <h2>Container</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 
</div>

Now we are going to add some basic styling

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}
body {

}
.themes {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 8px;
    padding: 20px;
    width: 200px;
    margin-left: 1rem;
    margin-top: 20px;
    .theme {
        width: 30px;
        border-radius: 8px;
        height: 30px;
        cursor: pointer;
        &:nth-child(1) {
            background-color: #ddd;
        }
        &:nth-child(2) {
            background-color: #333;
        }
        &:nth-child(3) {
            background-color: rgb(5, 2, 57);
        }
    }
}
.container {
    width: min(calc(100% - 2rem), 1200px);
    margin-top: 80px;
    margin-inline: auto;
    padding: 20px;
}

And our default theme

:root {
    --bg-color: #eee;
    --secondary: #ccc;
    --text: #333;
}
body {
    background-color: var(--bg-color);
    color: var(--text);
}
.themes {
       background-color: var(--secondary);
}
.container {
    background-color: var(--secondary);
}

We have our project which looks something like this

Ok, so now we can create themes in json

[
    {
        "id": "light",
        "colors": {
            "bgColor": "#eee",
            "secondary": "#ccc",
            "text": "#333"
        }
    },
    {
        "id": "dark",
        "colors": {
            "bgColor": "#333",
            "secondary": "#222",
            "text": "#ddd"
        }
    },
    {
        "id": "blue",
        "colors": {
            "bgColor": "rgb(5, 2, 57)",
            "secondary": "rgb(47, 23, 102)",
            "text": "rgb(235, 235, 235)"
        }
    }
]

We have almost everything except javascript. First, we need the function we are calling in html

const changeTheme = (theme) => {

}

Our function is created, now we need to load themes from json file

const changeTheme = (theme) => {
    fetch('./themes.json')
        .then((response) => response.json())
        .then((data) => {

    })
}

We have successfully loaded our themes, the last thing to do is to use them. Let's filter through all of our themes and choose one matching the users's choice

data.filter((data) => {
    const { id, colors: { bgColor, secondary, text }} = data
    if (id === theme) {

    }
})

Finally, we will set the colors of the CSS properties to the colors of the selected theme

document.documentElement.style.setProperty('--bg-color', bgColor)
document.documentElement.style.setProperty('--secondary', secondary)
document.documentElement.style.setProperty('--text', text)

As a bonus we can use localStorage to save our themes

localStorage.setItem('bgColor', bgColor)
localStorage.setItem('secondary', secondary)
localStorage.setItem('text', text)

and load them from localStorage

document.documentElement.style.setProperty('--bg-color', localStorage.getItem('bgColor'))
document.documentElement.style.setProperty('--secondary', localStorage.getItem('secondary'))
document.documentElement.style.setProperty('--text', localStorage.getItem('text'))

Our simple page now looks like this

For all project files visit my Github Respository

If you want to see more of my work visit my Github or Codepen profile

Blog

Multiple themes with JS and JSON

Paweł Czarnecki

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

Related