Multiple themes with JS and JSON
Tags: javascript, css, webdev, beginners
Published: 2022-05-24 14:52:19

First let's create themes container in html

```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

```html
<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

```scss
* {
	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

```scss
: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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phin80qs51ay282b2xwu.png)

Ok, so now we can create themes in json

```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

```javascript
const changeTheme = (theme) => {

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

```javascript
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

```javascript
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

```javascript
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

```javascript
localStorage.setItem('bgColor', bgColor)
localStorage.setItem('secondary', secondary)
localStorage.setItem('text', text)
```
and load them from localStorage

```javascript
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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jq1r37bkxds8ppv62na2.PNG)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eepnejciy30szqfy27ag.PNG)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yptlvdfytvv0wmztkwxj.PNG)

For all project files visit my [Github Respository](https://github.com/Bawelna0225/theme_swithers/tree/master/using_json_file) 

If you want to see more of my work visit my [Github](https://github.com/Bawelna0225) or [Codepen](https://codepen.io/bawelna0225) profile