ASCII text, with very long lines (917)
1
title: Create a Theme Switch
2
date: 2021 Dec 08
3
updated: 2024 Feb 03
4
This is a simple tutorial on how to make a simple theme switcher.
6
First step is to create the themes you'll want on your site. You may just want a light and dark mode, however, you may also want other themes. As an example: a clown theme that makes the page absurdly colorful, like a GeoCities site in the early 2000s. For these themes, you can use CSS variables set on the `html` parent tag(all other elements are considered children of `html`). Variables can be set in CSS using double hyphens followed by a sequence of text that can use numbers(but not at the start), letters(capital or lowercase), underscores, and hyphens; these variables can then be accessed within your text using the `var()` function with the name of the variable(including the starting hyphens). You can change out the CSS variables using different selectors on the `html` tag within the CSS, for me: I'm using the `[data-theme]` attribute; however, you can use classes if you want. Here is the CSS I wrote:
8
```css
10
html[data-theme=light] {
11
background: #fff;
12
color: #000;
13
--buttonBackground: #fefefe;
14
--buttonBorder: #ccc;
15
--buttonColor: #001;
16
}
17
html[data-theme=dark] {
18
background: #000;
19
color: #fff;
20
--buttonBackground: #101010;
21
--buttonBorder: #333;
22
--buttonColor: #fff;
23
}
24
html[data-theme=clown] {
25
background: #f00;
26
color: #00f;
27
--buttonBackground: #050;
28
--buttonBorder: #0a0;
29
--buttonColor: #0f0;
30
}
31
button {
32
background: var(--buttonBackground);
33
border: var(--buttonBorder) solid 3px;
34
color: var(--buttonColor);
35
}
36
```
37
Now we need to create a button that we will use to change the `[data-theme]` attribute. You (probably) already know what buttons are, so I won't go in depth about then. However: you will need to add an `[id]` to the button, this will come in play shortly.
39
```html
41
<button id="theme-switch">Switch Theme</button>
42
```
43
Now, it is time to write the JavaScript. First, you'll want to make a constant with the themes you filled into your CSS, for me, that was `dark`, `light`, and `clown`. I'll name this `themes`.
45
```javascript
47
const themes = ["light", "dark", "clown"];
48
```
49
We now need to query the <abbr title="Document Object Model">DOM</abbr> for our theme switch button. This can be done in 2 ways: `document.querySelector` or `document.getElementById`; personally, I prefer `querySelector`, as it allows you to write a CSS selector to get an element from the DOM, allowing for shorter, more digestible, code.
51
We have to add a click event to the button. This can be done in 2 ways within JavaScript: `addEventListener("click", ...)` and `onclick`. I personally like `addEventListener` more, so I'll use that. Within the `addEventListener` function, you need to put a function. This function will control the logic of our theme switch. I'll call this function `SwitchTheme`, to reflect it's functionality.
53
```javascript
55
const ThemeSwitchButton = document.querySelector("#theme-switch");
56
ThemeSwitchButton.addEventListener("click", SwitchTheme());
57
function SwitchTheme() {}
58
```
59
Explaining each part of this function as it's written out would take awhile, so instead, I'll add comments to the ends of each line giving a short explanation. Also, for the sake of shortness, I've placed `document.documentElement` inside the constant `HTML`, giving us access to the root element in the DOM(`html`).
61
```javascript
63
let CurrentTheme = themes.indexOf(HTML.dataset.theme); // Gets how far in the current theme is into the "themes" constant.
64
if (CurrentTheme + 1 >= themes.length) { // Checks if it's at the end of the array,
65
HTML.dataset.theme = themes[0]; // If so, reset at the start.
66
return; // Ends the function here, preventing next bit of code from running.
67
}
68
HTML.dataset.theme = themes[CurrentTheme + 1]; // Goes to the next theme.
69
```
70
Now we have a finished product. Here's the expected output:
72
<iframe id="finalProduct" src="/blog-files/theme-change-final.html" style="border:none"></iframe>
74
[See Code](/blog-files/theme-change-final.txt)
75