A DRY Approach to Color Themes in CSS

Recently, Florens Verschelde asked how to define dark mode styles in class and media queries while avoiding repeated declaration of CSS custom properties. I've also encountered this problem in the past, but haven't found a suitable solution.

Our goal is to avoid redefining—and thus repeating—customizing properties when switching light and dark mode. This is the goal of DRY (Don't Repeat Yourself) programming, but the typical pattern of switching topics is usually like this:

 <code>:root { --background: #fff; --text-color: #0f1031; /* etc. */ } @media (prefers-color-scheme: dark) { :root { --background: #0f1031; --text-color: #fff; /* etc. */ } }</code>

Do you understand what I mean? Of course, it may not seem important in this short example, but imagine dealing with dozens of custom properties at once – it’s a lot of repetition!

Then I remembered the trick of using --var: ; , and although I didn't think of it at first, I found a way to make it work: instead of using var(--light-value, var(--dark-value)) or similar nested combinations, use them side by side!

Of course, there must be someone who discovered this before me, but I haven't heard of using (or rather, abused) CSS custom properties to achieve this. Without further ado, this is the idea:

 <code>--color: var(--light, orchid) var(--dark, rebeccapurple);</code>

If the --light value is set to initial , the fallback value (orchid) will be used, which means that --dark should be set to a space character (this is a valid value), making the final calculated value look like this:

 <code>--color: orchid ; /* 注意额外的空格*/</code>

Instead, if --light is set to space and --dark is set to initial , we end up with a calculated value as:

 <code>--color: rebeccapurple; /* 同样，注意空格*/</code>

Now, this is fine, but we need to define --light and --dark custom properties based on context. Users can set system preferences (light or dark), or use certain UI elements to switch the theme of the website. Just like the Florens example, we will define these three cases and use Lea's proposed "on" and "off" constants for some small readability enhancements to make it clear at a glance:

 <code>:root { /* 感谢Lea Verou！*/ --ON: initial; --OFF: ; } /* 默认情况下，浅色主题处于启用状态*/ .theme-default, .theme-light { --light: var(--ON); --dark: var(--OFF); } /* 默认情况下，暗色主题处于禁用状态*/ .theme-dark { --light: var(--OFF); --dark: var(--ON); } /* 如果用户偏好暗色，那么他们将获得暗色主题*/ @media (prefers-color-scheme: dark) { .theme-default { --light: var(--OFF); --dark: var(--ON); } }</code>

We can then set all the topic variables in one declaration without duplication. In this example, theme-* class is set to html element, so we can use :root as selector, just like many people like to do, but if the cascading properties of custom properties make more sense, you can also set them to body .

 <code>:root { --text: var(--light, black) var(--dark, white); --bg: var(--light, orchid) var(--dark, rebeccapurple); }</code>

To use them, we use var() and built-in fallback because we like to be careful:

 <code>body { color: var(--text, navy); background-color: var(--bg, lightgray); }</code>

Hopefully you've started to see the benefits here. Rather than defining and switching a large number of custom properties, we process two properties and set all other properties only once on :root . This is a huge improvement from where we started.

Implementing more DRY code using preprocessor

If I were to look at the following line of code out of context, I would definitely be confused because the color is a single value, not two!

 <code>--text: var(--light, black) var(--dark, white);</code>

That's why I prefer to be a little abstract. We can set up a function using our favorite preprocessor (Sass in my case). If we keep the code with --light and --dark values ​​defined above in different contexts, we just need to change the actual custom attribute declaration. Let's create a light-dark function that returns us the CSS syntax:

 @function light-dark($light, $dark) {
  @return var(--light, #{ $light }) var(--dark, #{ $dark });
}

We will use it like this:

 :root {
   --text: #{ light-dark(black, white) };
   --bg: #{ light-dark(orchid, rebeccapurple) };
   --accent: #{ light-dark(#6d386b, #b399cc) };
}

You will notice that there is an interpolation separator #{ … } around the function call. Without these, Sass will output the code as is (just like a normal CSS function). You can try various implementations, but the syntax complexity depends on your preferences.

How does this look for a more DRY code base?

More than one topic? no problem!

You can do this with more than two modes. The more topics you add, the more complex it will be to manage, but the key is that this is possible ! We add another group of ON or OFF variables topics and set an extra variable in the value list.

 <code>.theme-pride { --light: var(--OFF); --dark: var(--OFF); --pride: var(--ON); } :root { --text: var(--light, black) var(--dark, white) var(--pride, #ff8c00) ; /* 换行符是完全有效的*/ /* 其他要声明的变量… */ }</code>

Is this a skill? Yes, absolutely. Is this a good use case for potential, non-existent CSS booleans? OK, this is a dream.

And you? Have you solved this problem in a different way? Please share in the comments!

The above is the detailed content of A DRY Approach to Color Themes in CSS. For more information, please follow other related articles on the PHP Chinese website!