Responsive Styles and States

Custom Properties Theme

A summary card uses CSS custom properties for accent, surface, and text colors before a theme class changes all of them together.

Program

CSS custom properties store reusable values in the cascade. Changing the value changes every declaration that reads it with var().

custom_properties_theme.html
Visuals: captured from real browser rendering
<style>
.theme { --surface: #f8fafc; --text: #0f172a; --accent: #0f766e; }
.theme { background: var(--surface); color: var(--text); }
.theme { border-left: 8px solid var(--accent); padding: 18px; }
.dark { --surface: #111827; --text: #f9fafb; --accent: #f59e0b; }
</style>

<section class="theme dark">
  <h2>Build Summary</h2>
  <p>42 checks passed.</p>
</section>

  1. Define theme variables on the component.

    The card still uses browser defaults until the variables are read.
    Custom properties are inert until another declaration uses var().

  2. Read surface and text variables.

    The summary card uses the surface and text colors.
    The var() function pulls values from the cascade.

  3. Use the accent variable for a marker.

    A teal accent stripe appears beside the card.
    One variable can drive several visual decisions.

  4. Override variables with a theme class.

    The card switches to a dark surface with an amber accent.
    Changing custom property values updates every declaration using them.
custom property A custom property is a CSS variable such as --accent.
var() The var() function reads a custom property value.