The power of CSS Properties/Variables & Dark Mode 
Tags: cssvariables, darkmode, customproperties
Published: 2019-12-20 13:06:57

---
title: The power of CSS Properties/Variables & Dark Mode 
published: true
description: How you can use CSS variables and converted our site to dark mode without too much hassle.
tags: CSS-variables, dark-mode, custom properties
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ev6zdf76ak2ciuphqfnp.jpg
---
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).
{% codepen https://codepen.io/hunzaboy/pen/xxbqYWG default-tab=css,result %}

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.

```html
<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 :) 
```css
: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*
{% codepen https://codepen.io/hunzaboy/pen/jOEBzjq %}

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

```css
: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. 


{% codepen https://codepen.io/hunzaboy/pen/dyPveab default-tab=result %}

Let us create another basic colorful theme

{% codepen https://codepen.io/hunzaboy/pen/xxbqzVv default-tab=result %}

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.

{% codepen https://codepen.io/hunzaboy/pen/zYxZaZV default-tab=result %}


**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.

```css
@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.


{% codepen https://codepen.io/hunzaboy/pen/MWYpXGx default-tab=result %}


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