[#]: subject: "A beginner's guide to making a dark theme for a website"
[#]: via: "https://opensource.com/article/22/9/dark-theme-website"
[#]: author: "Sachin Samal https://opensource.com/users/sacsam005"
[#]: collector: "lkxed"
[#]: translator: " "
[#]: reviewer: " "
[#]: publisher: " "
[#]: url: " "
A beginner's guide to making a dark theme for a website
======
Learn how to program dark website themes using HTML, CSS variables, classes, and JavaScript methods.
![Digital creative of a browser on the internet][1]
Having a dark theme for your website is a common feature these days. There are various ways to add a dark theme to your website, and in this article, I demonstrate a beginner-friendly way of programming a dark theme for the web. Feel free to explore, make mistakes, and, more importantly, learn by manipulating the code in your own way.
![Display of both light and dark theme web pages][2]
Image by: (Sachin Samal, CC BY-SA 4.0)
### Icons
I like to provide a visual way for my users to discover the dark mode feature. You can include an easy set of icons by inserting the Font Awesome link in the `` element of your HTML.
```
Toggle - Dark Theme
```
Inside your `` tag, create a Font Awesome moon icon class, which you will switch to the Font Awesome sun icon class later using JavaScript. This icon allows users to switch from the default light theme to the dark theme and back again. In this case, you're changing from `fa-moon` while in the light theme to `fa-sun` while in the dark theme. In other words, the icon is always the opposite of the current mode.
```
```
Next, create a CSS class in your stylesheet. You'll append this using the JavaScript `add()` method to toggle between themes. The `toggle()` function adds or removes a class name from an element with JavaScript. This CSS code creates a `changeTheme` class, setting the background color to dark gray and the foreground color (that's the text) to light gray.
```
.changeTheme {
background: #1D1E22;
color: #eee;
}
```
### Toggle between themes
To toggle the appearance of the theme button and to apply the `changeTheme` class, use the `onclick()`, `toggle()`, `contains()`, `add()`, and `remove()` JavaScript methods inside your `
```
The complete code:
```
Toggle - Dark Theme
```
### Complete themes
The code so far may not fully switch the theme of a complex website. For instance, your site might have a header, a main, and a footer, each with multiple divs and other elements. In that case, you could create a standard dark theme CSS class and append it to the desired web parts.
### Get familiar with your browser's console
To inspect your browser's console, on the webpage where you run this code, press `Ctrl+Shift+I` or right-click and select the `Inspect` option.
When you select `Elements` in the console and toggle your theme button, the browser gives you an indication of whether or not your JavaScript is working. In the console, you can see that the CSS class you appended using JavaScript is added and removed as you toggle.
![Use browser tools to test light and dark themes][3]
Image by: (Sachin Samal, CC BY-SA 4.0)
Add a navigation and card section to see how adding the CSS class name on an HTML element with JavaScript works.
### Example code for a dark theme
Here's some example code. You can alternately view it with a live preview [here][4].
```
Toggle - Dark Theme
Beginner Friendly Dark Theme
What is Lorem Ipsum?
Sed sit amet felis tellus.
Sed sit amet felis tellus.
What is Lorem Ipsum?
Sed sit amet felis tellus.
Sed sit amet felis tellus.
What is Lorem Ipsum?
Sed sit amet felis tellus.
Sed sit amet felis tellus.
```
The `for...of` loop of JavaScript applies ".dark-theme" class styling properties to each `card` on the page, regardless of its position. It applies the theme to all web parts selected with `querySelectorAll()` in the `