The Best Way To Dark Mode Your Website In My Opinion.
Tags: webdev, css, javascript, html
Published: 2020-07-04 03:54:33

**Dark mode** has been there for a while now. From apps to websites, its influence on the people has been really great. It's no wonder why everyone would love to have a switch to dark mode option in their Websites.

Now, you might have seen multiple ways of achieving the Dark mode for your website. Whether it be toggling a simple class to turn the background dark or using the **Prefers color scheme** to switch depending upon the user's system theme. Well, that's great. But people might not always have devices with support for a system wide dark mode. And also, toggling a class might not help a website with multiple colors. So what's the solution?

**Here it is:** It's actually pretty simple. The best way to achieve **Dark Mode** is by changing the entire **Style Sheet** when the user clicks the button for dark mode or toggles a switch.

This method not only gives you the freedom to style a complete dark version of your website but also helps if there are multiple elements which you want to color accordingly, which otherwise would be difficult to achieve by simply toggling a class. You can also have many other color themes for your website. So how do we do that? Enough of reading! Let's get into the code now.

**Example:**
Here's our **HTML** file:
``` HTML
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Dark Mode Demo</title>
  <link rel="stylesheet" href="styles/light-mode.css" id="theme" />
</head>

<body>
  <div class="wrapper">
    <h1>Dark Mode by changing the style sheet.</h1>
    <button onclick="changeTheme()">Switch Theme</button>
  </div>
  <script src="scripts/script.js"></script>
</body>

</html>
```
Here's our **light-mode.css** file:
```CSS
* {
  font-family: "Segoe UI";
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  transition: 1s;
}

h1 {
  text-align: center;
  font-weight: 300;
  color: #4d4d4d;
  padding: 20px;
}
.wrapper {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
button {
  padding: 13px 10px;
  background-color: rgb(43, 43, 43);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1em;
  outline: none;
  cursor: pointer;
}
button:hover {
  background: rgb(45, 50, 102);
  color: rgb(255, 255, 255);
}


```
Here's the **dark-mode.css** file: 
```CSS
* {
  font-family: "Segoe UI";
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  background: rgb(29, 29, 29);
  transition: 1s;
}
.wrapper {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
h1 {
  color: #fff;
  text-align: center;
  font-weight: 200;
  padding: 20px;
}

button {
  padding: 13px 10px;
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  border: none;
  border-radius: 4px;
  font-size: 1em;
  outline: none;
  font-weight: 400;
  cursor: pointer;
}
button:hover {
  background: rgb(45, 50, 102);
  color: rgb(255, 255, 255);
}


```
Finally, here's the **JavaScript** for it: 
```JavaScript
// Function that swaps the stylesheet.
function changeTheme() {
  let theme = document.getElementById("theme");
  let lightTheme = "styles/light-mode.css";
  let darkTheme = "styles/dark-mode.css";
  // Checking what stylesheet the link tag has.
  if (theme.getAttribute("href") == lightTheme) {
    theme.href = darkTheme;
  } else {
    theme.href = lightTheme;
  }
}

```
In the above example, when the button is clicked, the function **changeTheme()** checks for the **CSS** file using the **href** attribute by the `id` we gave to the `link` tag. If **light-mode.css** exists, it replaces it with the **dark-mode.css** file. Else it switches it back to the **light-mode.css** file. That's it! Now you have the Dark Mode for your website without reloading the page at all. Thanks for reading. Hope it helped you. Have a great day!

**Edit:** I've changed title from "The best way to Dark Mode your Website." to "The best way to Dark Mode your Website in my opinion."  Cause there might be other ways better than this, so in my opinion, this is the best.

**Here's the link to repo:** 
{% github Mohammed-Farmaan/Dark-Mode-For-Web %}

**Link to live demo:**
https://zxcodes.github.io/Dark-Mode-For-Web/