Website Theme Switcher Jun 26th 2020 Words: 805
This post is created a year ago, the content may be outdated.

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);
    });
}