Customizing

• "Applying a theme" means setting token values
• prefer to customize 'semantic' (i.e. alias) tokens rather than 'base' (i.e. crayon) tokens
• set token values on :root for whole pages, or on a selector for a class (e.g. 3-card promo band)
• brag about your customizations! did other teams use it, or something similar? maybe it should be added upstream to the design system?

.theme-pink {
  --rh-color-surface-lightest: #feeded;
  --rh-color-surface-darkest: var(--rh-color-brand-red-darkest, #5f0000);
  --rh-color-text-primary-on-light: #131313;
}

.product-grid {
  & rh-card {
    --rh-border-radius-default: 10px;
  }
}

Custom theme

A custom theme may be used for very specific brand projects like campaigns. However, the light and dark themes are fine for the majority of other projects. If your project does need a custom theme, contact the Brand team and Design system team for guidance. A custom theme may feature a bespoke color palette, but try to use other styles with elements and patterns from the design system if possible.

Choosing a theme

For most projects, the light and dark themes are good enough. Evaluate your project thoroughly before creating a custom theme.

Inline theming Beta

Inline theming is when a section switches themes and looks different than the rest of the page or interface. Some use cases include highlighting an important section on a page or adding a sidebar to an interface. Use inline theming only for major shifts in color. For minor shifts, use a different surface color from the same theme.

Update from the team

The design system team is working on creating inline theming best practices in the near future. Contact us if you would like to contribute.