Website Theme Switcher Jun 26th 2020 Words: 805

Example page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>

<head>
<title>Your Title Here</title>
</head>

<body>
<hr>
<a href="http://somegreatsite.com">Link Name</a>
is a link to another nifty site
<h1>This is a Header</h1>
<h2>This is a Medium Header</h2>
Send me mail at <a href="mailto:[email protected]">
[email protected]</a>.
<p> This is a new paragraph! </p>
<b>This is a new paragraph!</b>
<br>
<b><i>This is a new sentence without a paragraph break, in bold italics.</i></b>
<hr>
</body>

</html>
1
2
3
4
5
6
7
8
9
body {
background-color: #eea;
color: #333;
}

a {
text-decoration: none;
color: orange;
}

Implementation

Several method can be used to implement a switchable theme on the webpage.

A: Replace old CSS with new

1
2
3
<head>
<link id="style-light" rel="stylesheet" href="./style-light.css">
</head>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
let toggle = false;

const toggleStyle = () => {
if (toggle) {
// remove old style
document.getElementById("style-dark").remove();
// append new style
const link = document.createElement('link');
link.id = "style-light";
link.rel = "stylesheet";
link.href = "./style-light.css";
document.head.appendChild(link);

toggle = false;
} else {
// remove old style
document.getElementById("style-light").remove();
// append new style
const link = document.createElement('link');
link.id = "style-dark";
link.rel = "stylesheet";
link.href = "./style-dark.css";
document.head.appendChild(link);

toggle = true;
}
}

Demo:

B: Media attributes

1
2
3
4
<head>
<link id="style-light" rel="stylesheet" href="./style-light.css" media="all">
<link id="style-dark" rel="stylesheet" href="./style-dark.css" media="none">
</head>
1
2
3
4
5
6
7
8
9
10
11
12
13
let toggle = false;

const toggleStyle = () => {
if (toggle) {
document.getElementById("style-light").setAttribute("media", "all");
document.getElementById("style-dark").setAttribute("media", "none");
toggle = false;
} else {
document.getElementById("style-light").setAttribute("media", "none");
document.getElementById("style-dark").setAttribute("media", "all");
toggle = true;
}
}

Demo:

C: Class attributes

1
2
3
<body class="style-light">
<!-- content-here -->
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.style-light {
background-color: #eea;
color: #333;
}

.style-light a {
text-decoration: none;
color: orange;
}

.style-dark {
background-color: #333;
color: #ddd;
}

.style-dark a {
text-decoration: none;
color: cyan;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let toggle = false;

const toggleTheme = () => {
if (toggle) {
Array.from(document.getElementsByClassName("style-dark")).forEach(e => {
e.classList.remove("style-dark");
e.classList.add("style-light");
});
toggle = false;
} else {
Array.from(document.getElementsByClassName("style-light")).forEach(e => {
e.classList.remove("style-light");
e.classList.add("style-dark");
});
toggle = true;
}
}

Demo:

D: Custom data attributes

1
2
3
<html data-style="theme-dark">
<!-- content-here -->
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
:root[data-style="light"] body {
background-color: #eea;
color: #333;
}

:root[data-style="light"] a {
text-decoration: none;
color: orange;
}

:root[data-style="dark"] body {
background-color: #333;
color: #ddd;
}

:root[data-style="dark"] a {
text-decoration: none;
color: cyan;
}
1
2
3
4
5
6
7
8
9
10
11
let toggle = false;

const toggleTheme = () => {
if (toggle) {
document.documentElement.setAttribute("data-style", "light");
toggle = false;
} else {
document.documentElement.setAttribute("data-style", "dark");
toggle = true;
}
}

Demo:

Adaptive style & save settings

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// Style toggle
const toggleStyle = (style) => {
switch (style) {
case "light":
// change to light theme
break;
case "dark":
// change to dark theme
break;
}
sessionStorage.setItem("style", style); // use localStorage to save settings across session
};

// Auto style
const savedTheme = sessionStorage.getItem("style");
if (savedTheme) {
toggleStyle(savedTheme);
} else {
const theme = (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
toggleStyle(theme);
// watch for changes
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => {
const newTheme = e.matches ? "dark" : "light";
toggleStyle(newTheme);
});
}