Modern CSS Color Workflows

Resolve dynamic CSS color expressions with themes, variables, and explicit context.

In this chapter

Read in order or jump directly to a specific page.

  1. Resolve custom properties

    Decide whether CSS variables should remain browser-owned or resolve from authoritative server context.

  2. Evaluate `color-mix()`

    Choose immediate PHP color mixing or a deferred CSS color-mix expression according to when the operands become known.

  3. Use relative colors

    Build and resolve CSS relative color expressions.

  4. Resolve `light-dark()`

    Decide whether light-dark branches should resolve from server-owned theme context or remain deferred for the browser.

  5. Resolve `currentColor`

    Resolve currentColor only when the server knows the inherited foreground that the browser would otherwise supply.

  6. Build resolution contexts

    Provide variables, theme, and current color before resolving expressions.

  7. Generate theme-aware tokens

    Decide which theme-aware token relationships should resolve on the server and which should remain browser-owned CSS.