ASCII text, with very long lines (302)
title: Creating a simple theme switcher date: 2021 Dec 08 updated: 2024 Feb 01 --- This is a simple tutorial on how to make a simple theme switcher.
Step 1: Creating the themes
The first step is to create the themes in your stylesheet, you can have as many as you want. Just make sure to remeber all their names within your CSS.
Step 2: Making an array
This is why you need to remeber all their names within the CSS. You need to add them all to an array in your JS. Below is an example of an array containing some themes.
const themes = ["light", "dark", "gamer"]
Step 3: Switching themes
This is the part you've been waiting for! The actual content switcher. It's surprisingly simple.
First, get the index of the current theme using
let currentTheme = themes.indexOf(document.documentElement.className).
Then, use an if statement to see if it's more than or equal to the length of the array containing your themes.
if (currentTheme + 1 >= themes.length) {
document.documentElement.className = themes[0];
} else {
document.documentElement.className = themes[currentTheme + 1]
}
Now just add a listener to the button(using event listener, getElement.onclick, or onclick)
Final Product
In the end, what you just made should look something like the iFrame below.
1
---
2
title: Creating a simple theme switcher
3
date: 2021 Dec 08
4
updated: 2024 Feb 01
5
---
6
This is a simple tutorial on how to make a simple theme switcher.
7
## Step 1: Creating the themes
9
The first step is to create the themes in your stylesheet, you can have as many as you want. Just make sure to remeber all their names within your CSS.
11
## Step 2: Making an array
13
This is why you need to remeber all their names within the CSS. You need to add them all to an array in your JS. Below is an example of an array containing some themes.
15
```js
17
const themes = ["light", "dark", "gamer"]
18
```
19
## Step 3: Switching themes
21
This is the part you've been waiting for! The actual content switcher. It's surprisingly simple.
23
First, get the index of the current theme using
25
```js
27
let currentTheme = themes.indexOf(document.documentElement.className).
28
```
29
Then, use an if statement to see if it's more than or equal to the length of the array containing your themes.
31
```js
33
if (currentTheme + 1 >= themes.length) {
34
document.documentElement.className = themes[0];
35
} else {
36
document.documentElement.className = themes[currentTheme + 1]
37
}
38
```
39
Now just add a listener to the button(using [event listener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener), [getElement.onclick](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick), or [onclick](https://www.w3schools.com/TAgs/att_onclick.asp))
41
## Final Product
43
In the end, what you just made should look something like the iFrame below.
45
<iframe id="finalProduct" src="/blog-files/theme-change-final.html" style="border:none"></iframe>
47
[See Code](/blog-files/theme-change-final.txt)