Themes and styling

Light and dark themes#

On the element wrapping your components, set sy-theme and a theme class. Apply them to the whole page or a specific region.

Live examples of the same Button with different themes. These examples keep their own themes when you switch the site theme.

<section class="sy-theme sy-theme-light">
  <sy-button variant="primary">Primary</sy-button>
  <sy-button>Default</sy-button>
  <sy-button disabled>Disabled</sy-button>
</section>

<section class="sy-theme sy-theme-dark">
  <sy-button variant="primary">Primary</sy-button>
  <sy-button>Default</sy-button>
  <sy-button disabled>Disabled</sy-button>
</section>

Design tokens#

Design tokens are CSS custom properties. To change a Primary Button's background, for example, set the state-specific tokens used by that component.

.brand-theme {
  --button-primary-background-enabled: #1677ff;
  --button-primary-background-hover: #4096ff;
  --button-primary-background-active: #0958d9;
  --button-primary-background-focus: #1677ff;
}

Style scope#

Add a custom class to the themed region. Check colors and text contrast in every state, and reuse the same tokens for shared styles across screens.

<div class="sy-theme sy-theme-light brand-theme">
  <sy-button variant="primary">Button with brand colors</sy-button>
</div>

Prefer public properties, classes, and tokens over selectors that depend on a component's internal HTML structure.