The power of CSS Properties/Variables & Dark Mode

If you are using CSS custom properties in your project and want to create a dark mode then this article might help you with it.

But let's start with some basics and enjoy some Frontend Jokes along with it in the demos ;)

CSS Custom Properties

Any CSS property you define with a prefix of -- e.g --propertyName is a custom property and you can use them anywhere in your CSS file using var(--propertyName).

You can declare the variables in any class, just like the demo above, but I prefer to declare them in the :root{}. I will come to the reason later.

Now we are done with the basics lets dive in.

Firstly, let us create a basic HTML layout.

<div class="app">
  <header>
    Basic Application
  </header>
  <main>
    <!-- Left sidebar -->
    <aside>
      Sidebar
    </aside>

    <!-- Main content -->
    <article> </article>

  </main>
</div>

and now lets make it a bit fancy :)

:root {
/*   Background Colors */
  --headerBg: #001b38;
  --sidebarBg: #ba324f;
  --articleBg: #f2f2f4;
/*   Text Colors */
  --articleTextColor: #999999;
  --headerTextColor: #ffffff;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header {
  background: var(--headerBg);
  padding: 10px;
  color: var(--headerTextColor);
}
main {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
}
aside {
  min-width: 150px;
  background: var(--sidebarBg);
}
article {
  flex-grow: 1;
  background: var(--articleBg);
  padding: 10px 20px;
  font-size: 28px;
  color: var(--articleTextColor);

}

DEMO

Now let us add a dark version. In order to do, I will create/overwrite values of CSS variables, that I defined in the :root, in a new dark class (for this example ) and add it to my app div. You can also add this to the html or the body depending on your use case.

e.g

:root {
  /*   Background Colors */
  --headerBg: #001b38;
  --sidebarBg: #ba324f;
  --articleBg: #f2f2f4;
  /*   Text Colors */
  --articleTextColor: #999999;
  --headerTextColor: #9aa1b5;
  --sidebarTextColor: #f9aaaa;
}

.dark {
  /*   Background Colors */
  --headerBg: #525252;
  --sidebarBg: #414141;
  --articleBg: #313131;
  /*   Text Colors */
  --articleTextColor: rgba(255, 255, 255, 0.3);
  --headerTextColor: rgba(255, 255, 255, 0.8);
  --sidebarTextColor: rgba(255, 255, 255, 0.5);
}

The important thing to note here is that I am only changing the variable values and not changing anything else in rest of the stylesheet

Declaring all the custom properties beforehand and using them in the application will keep you in control of how the application looks. You can go crazy and define widths, heights, border-radius, padding, grid layouts, etc. And the best part is you will be in total control of how your application looks.

Back to the example, the .dark class now acts as a secondary theme for the application. Let us see how it looks.

Let us create another basic colorful theme

All I did was changing the values of custom properties and defining a new class which I can later use to add to my application.

I have added a toggle button with some very basic javascript. Here is the final demo.

PRO TIP

If you want to use the device color mode ( dark / light), you can also use the @media (prefers-color-scheme: dark) and assign the values to the root element directly instead of adding a toggle.

@media (prefers-color-scheme: dark) {
  :root{
    /*   Background Colors */
  --headerBg: #525252;
  --sidebarBg: #414141;
  --articleBg: #313131;
  /*   Text Colors */
  --articleTextColor: rgba(255, 255, 255, 0.3);
  --headerTextColor: rgba(255, 255, 255, 0.8);
  --sidebarTextColor: rgba(255, 255, 255, 0.5);
  }
}

So here the demo with prefers-color-scheme: dark. If your device has a dark mode you will see the dark verson otherwise the default, or in this case the light version.

Thank you very much for reading this till the end.

I hope this article might help you with CSS custom properties and gaining more control over your applications look and feel :)

This is my first article on DEV, I will be happy to get some positive/negative feedback.

Browser Support

Browser support for CSS variables isn’t bad at all. It’s pretty good, with decent support across all modern browsers (over 93% at the time of this writing). https://caniuse.com/#search=custom%20properties

References:

More details here: https://developer.mozilla.org/en-US/docs/Web/CSS/--*
Jokes :) https://elijahmanor.com/front-end-web-dev-jokes/
Photo by Josh Nuttall on Unsplash