CSS Custom Properties at Runtime: Dynamic Theming Without JavaScript

The Dynamic Theming Dilemma

We've all been there - stuck with a static theme that's hard to modify without digging into JavaScript. But what if we told you there's a way to achieve dynamic theming without writing a single line of JavaScript? Enter CSS Custom Properties, a game-changer for styling your web applications.

Table of Contents

• Understanding CSS Custom Properties
• Using CSS Custom Properties for Dynamic Theming
• The Power of the var() Cascade
• Media Query Toggling for Responsive Theming
• Theming with prefers-color-scheme and oklch()
• Putting it all Together

Understanding CSS Custom Properties

CSS Custom Properties, also known as CSS variables, allow us to define and reuse values in our CSS code. We can think of them as variables that can be used throughout our stylesheet. To define a custom property, we use the -- prefix followed by the property name.

:root {
  --primary-color: #3498db;
  --background-color: #f9f9f9;
}

We can then use these properties in our CSS rules like so:

.button {
  background-color: var(--primary-color);
  color: var(--background-color);
}

Using CSS Custom Properties for Dynamic Theming

So, how can we use custom properties for dynamic theming? The key is to update the custom property values at runtime. We can do this by using the :root pseudo-class and defining our custom properties inside a media query.

:root {
  --primary-color: #3498db;
  --background-color: #f9f9f9;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #2ecc71;
    --background-color: #2c3e50;
  }
}

In this example, when the user's system is set to a dark theme, the custom property values are updated, and our theme changes accordingly.

The Power of the var() Cascade

One of the most powerful features of CSS Custom Properties is the var() cascade. This allows us to define a fallback value for a custom property if it's not defined.

.button {
  background-color: var(--primary-color, #3498db);
  color: var(--background-color, #f9f9f9);
}

In this example, if the --primary-color or --background-color properties are not defined, the fallback values will be used.

Media Query Toggling for Responsive Theming

We can use media queries to toggle our theme based on different screen sizes or devices.

/* Mobile theme */
@media (max-width: 768px) {
  :root {
    --primary-color: #9b59b6;
    --background-color: #ecf0f1;
  }
}

In this example, when the screen size is below 768px, the custom property values are updated, and our theme changes accordingly.

Theming with prefers-color-scheme and oklch()

We can also use the prefers-color-scheme media query to detect the user's preferred color scheme and update our theme accordingly.

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: oklch(53.33% 0.000 0.000);
    --background-color: oklch(20.00% 0.000 0.000);
  }
}

In this example, we're using the oklch() function to define our colors in the OKLab color space, which provides better color accuracy and consistency across different devices.

Putting it all Together

Let's put everything together and create a simple theme toggle using CSS Custom Properties.

:root {
  --primary-color: #3498db;
  --background-color: #f9f9f9;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #2ecc71;
    --background-color: #2c3e50;
  }
}

/* Mobile theme */
@media (max-width: 768px) {
  :root {
    --primary-color: #9b59b6;
    --background-color: #ecf0f1;
  }
}

.button {
  background-color: var(--primary-color);
  color: var(--background-color);
}

Key Takeaways

• Use CSS Custom Properties to define and reuse values in your CSS code.
• Update custom property values at runtime using the :root pseudo-class and media queries.
• Use the var() cascade to define fallback values for custom properties.
• Use media queries to toggle your theme based on different screen sizes or devices.
• Use the prefers-color-scheme media query to detect the user's preferred color scheme and update your theme accordingly.

FAQ

Q: Can I use CSS Custom Properties with other CSS preprocessors like Sass or Less?

A: Yes, you can use CSS Custom Properties with other CSS preprocessors like Sass or Less.

Q: How do I access CSS Custom Properties in JavaScript?

A: You can access CSS Custom Properties in JavaScript using the getComputedStyle() method.

Q: Can I use CSS Custom Properties with other CSS features like Grid or Flexbox?

A: Yes, you can use CSS Custom Properties with other CSS features like Grid or Flexbox.