Creating Color Themes With Custom Properties, HSL, and a Little calc()

Before CSS custom properties (often called "variables"), managing multiple color schemes on a single website required separate stylesheets—a cumbersome approach. Now, we can define variables within a single stylesheet and let CSS handle the variations.

Even without user-defined themes, site-wide theming is valuable. For example, different sections might employ distinct color palettes.

Let's build an example: Our example uses a consistent lightness across sections, varying only the hue. A simplified palette for a single hue looks like this: [Example palette omitted for brevity, as it's visually represented in the original]. Multiple hues would expand this, easily managed with HSL where only one value changes.

Leveraging Custom Properties

Widely supported and easily polyfilled for older browsers, custom properties offer a straightforward syntax similar to standard CSS. Basic usage is shown below: [Basic usage example omitted for brevity, as it's conceptually explained in the original]. Variables are commonly defined on the :root pseudo-element but can be scoped to specific elements using attributes like data attributes.

Integrating calc()

Custom properties aren't limited to fixed values. The calc() function enables dynamic value calculations within a consistent pattern: [Example using calc() omitted for brevity, as it's conceptually explained in the original]. While CSS lacks loops, preprocessors can assist in generating parts of the code (but remember: CSS variables differ from Sass variables).

Implementing CSS Variables in Practice

Our goal is to change a component's color across different page sections. We'll use three sections with IDs: #food, #lifestyle, and #travel, each associated with a different hue. The data-theme attribute on a .wrapper div determines the active hue. When #travel is active, --first-hue (e.g., 180° for teal) is assigned to --hue.

<div data-theme="travel">
  <!-- Content -->
</div>

<style>
.wrapper[data-theme="travel"] {
  --hue: var(--first-hue); /* = 180° = teal */
}
</style>

A small JavaScript snippet updates the data-theme attribute based on tab clicks, removing the hash (#). This leverages JavaScript's ability to manipulate CSS, unlike preprocessor variables which are static after compilation.

Progressive Enhancement

To ensure accessibility for users with JavaScript disabled, we add progressive enhancement:

// progressive enhancement:
// without JavaScript all sections are displayed, the theme is only set when the page loads
wrapper.dataset.theme = wrapper.querySelector('section').id;

This ensures basic functionality even without JavaScript.

While a single-page approach is used here, serving sections as separate pages with server-side data-theme setting is also feasible.

Alternative Approaches

If color values don't change linearly, we can separate stylesheets: [Example omitted for brevity, as it's conceptually explained in the original].

Supporting Web Components

Theming web components requires the :host-context() pseudo-selector: [Example omitted for brevity, as it's conceptually explained in the original].

Conclusion

CSS custom properties simplify website theming, offering improved maintainability, performance, and integration with JavaScript. Combined with HSL and calc(), they unlock powerful theming capabilities, extending beyond simple color changes to user-controlled themes.

The above is the detailed content of Creating Color Themes With Custom Properties, HSL, and a Little calc(). For more information, please follow other related articles on the PHP Chinese website!