DEV Community

Cover image for Theming with CSS variables.
Enes Kılıç
Enes Kılıç

Posted on • Updated on

Theming with CSS variables.

In this article, I will talk about how to make theming with CSS variables. We will see again the importance of using variables with this example.

Step 1: Define your variables.

/* Define your variables to the root. */
:root {
  --black: #181818;
  --white: #f5f7f7;
  --fade:  150ms;
}

/*  
The variables of the tag with the data-theme="light" attribute.
We will then apply this property to the HTML tag with javascript,
but you can define it manually.
*/
[data-theme="light"]{
  --color-text: var(--black);
  --color-background: var(--white);
}

/* Change variables for dark theme. */
[data-theme="dark"]{
  --color-text: var(--white);
  --color-background: var(--black);
}

/* And apply styles to document root element. */
html {
  color: var(--color-text);
  background-color: var(--color-background);

  /* for smooth color transitions. */
  transition: var(--fade) color, var(--fade) background-color;
}

Enter fullscreen mode Exit fullscreen mode

Step 2: Add functionality with javascript.

// Call theme value from browsers local storage.
var theme = localStorage.getItem("theme");
// Root element of the document.
const _root = document.documentElement;

// Check if local storage has no theme value, define the initial value.
!theme && localStorage.setItem("theme", "light");

// Update theme value.
theme = localStorage.getItem("theme");

// Apply theme value to document root element.
_root.setAttribute("data-theme", theme);

// Function for change theme.
// You can define this function to the a button or call this any way.
function changeTheme() {
  theme === "light"
    ? localStorage.setItem("theme", "dark")
    : localStorage.setItem("theme", "light");

  // Update theme value
  theme = localStorage.getItem("theme");

  // Apply theme to document root element
  _root.setAttribute("data-theme", theme);
}
Enter fullscreen mode Exit fullscreen mode

Result

Discussion (6)

Collapse
lukeshiru profile image
LUKESHIRU • Edited on

One thing I would suggest if you'll use JS to handle the theme changes, is to detect the OS preference to define the default theme. You can do that this way:

const { matches: darkTheme = false } = matchMedia('(prefers-color-scheme:dark)');
Enter fullscreen mode Exit fullscreen mode

Cheers!

Collapse
oniichan profile image
yoquiale

I hate when websites chose the theme I want instead of me. Just because I like having my OS in dark mode doesn't mean I want to browse some websites in dark mode.

Collapse
lukeshiru profile image
LUKESHIRU • Edited on

As I said, is just to set the default. The app should default to the OS theme, and then let the user change the theme to whatever they want ... defaulting to light mode when the user has the OS in dark mode is not smart.

Collapse
eric23 profile image
Eric

Great post!
Simple, clean and very helpful.

Collapse
charlesfries profile image
Charles Fries

Love that fade effect

Collapse
mafee6 profile image
MAFEE7

noice