Dark theme with CSS variable

Nowadays, more and more applications and OS are going to adapt to the new trend: dark theme and web applications are not exceptions. Dark theme is not the necessary feature for the web application but it's nice to have. Giving your users more choice base on their preference always help your application more attractive. Today I gonna show you some way to apply the dark theme in your application.

Solution 1: Use css nested

Let imagine that your current web application only supports the light theme, and now you want to add a new feature that allows users to change the application's theme in runtime. So the easiest way to we defined a new class for dark theme, apply that class to the root element (<html> or <body>). Because the application's theme must be consistent for the whole application so to make sure every element of our application follow the selected theme, we must set that class to root element.

After we have a class for the dark theme, we will jump to customize the look & feel for every child inside. 2 most important CSS properties we need bear in mind is colorand background-color. Beside that, we also need to take care of other CSS properties as well depend on your application's implementation.

Something like this

/* Default css for light theme */
body {
  background-color: white;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: all linear 1s;
}
.panel {
  background-color: lightblue;
}
label{
  color:#0d47a1;
}
/* Custom css for dark theme */
[data-theme=dark-theme] {
  background-color:gray ;
}
[data-theme=dark-theme] .panel {
  background-color: darkgray;
}
[data-theme=dark-theme] label {
  color: rgb(245,245,245);
}

Live demo

This way works perfectly however, it still has one big drawback is we need to duplicate CSS code for every component we want to customize between light theme and dark theme. In the above sample, you can see that we need to redefined CSS for label and panel twice, even worse we also need to repeat [data-theme=dark-theme] many times. To get rid of this disadvantage, I want to introduce you another approach to apply dark theme is using css variable.

Solution 2: CSS variable

The idea behind this solution is we will define some CSS values as a variable, and we define every element will reuse CSS variable instead of defined the new one. It means the value of that variable is flexible during runtime. By this way, we only need to defined customize CSS once (these CSS properties should depend on CSS variable), besides that we also need to define 2 sets of variables: one for dark theme and one for the light theme. This way is much simpler than the solution 1 with nested CSS.

Let take a look on the CSS variable version of above example:

/* Default css for light theme */
body {
  --backgroundColor: white;
  --panelBackgroundColor: lightblue;
  --labelColor: #0d47a1;
}
body[data-theme="dark-theme"] {
  --backgroundColor: gray;
  --panelBackgroundColor: darkgray;
  --labelColor: rgb(245, 245, 245);
}
body {
  background-color: var(--backgroundColor);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: all linear 1s;
}
.panel {
  background-color: var(--panelBackgroundColor);
}
label {
  color: var(--labelColor);
}

Live demo:

Live demo

Final words

Hope that you learned something about CSS variable and willing to apply it in your next project, not only for theme changing but also for flexible web application. Let let us know your feeling in the comment section below and see you in the next post.

You can also visit my blog to read more interesting topics: https://frontend.cloudaccess.host/dark-theme-with-css-variable/