DEV Community

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

Posted on • Edited on

34 6

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

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (4)

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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️