Developers

Context Protocol

Style Queries

Your page markup declares a custom surface:

<div class="custom-surface dark">
  <rh-cta href="#">GO!</rh-cta>
</div>

And your document css sets the desired color context:

.custom-surface {
  container: surface;
  &.dark { --rh-background-context: dark; }
  &.light { --rh-background-context: light; }
}

Internally / in shared CSS:

@container style (--rh-context-background: dark) {
  --rh-color-text-primary: var(--rh-color-text-primary-on-dark)
}

Art Direction

Art direction is the process of selecting art assets based on the context in which they are used.

Inline SVG

Page authors using inline SVG can use theme tokens to style graphics.

<svg slot="header" width="80" height="80">
  <rect fill="var(--rh-color-border-interactive)"
        fill-opacity="0.1"
        stroke-dasharray="4"
        stroke-width="1"
        stroke="var(--rh-color-border-interactive)"
        width="80"
        height="80"/>
</svg>

This approach does not work with svg loaded through the <img> tag, or with raster graphics, however another approach is in development which could help:

<rh-picture> Planned

<rh-picture>
  <source srcset="../google-cloud-dark.svg" color-theme="dark"></source>
  <img src="../google-cloud.svg" alt="Logo for Red Hat partner Google Cloud">
<rh-picture>

Join the discussion