Skip to content
Home

Theme component

Info
Demos
Properties

Demos

Basis example

Text with different color based on theme. Change the theme to see the effect.

Surface dark

Use surface="dark" to adjust component styles for dark backgrounds.

Anchor on dark surface
<section
  style={{
    padding: '1rem',
    backgroundColor: 'var(--token-color-decorative-first-bold-static)',
  }}
>
  <Theme.Context surface="dark">
    <Button right>Primary button</Button>
    <Button variant="secondary" right>
      Secondary button
    </Button>
    <Anchor href="/">Anchor on dark surface</Anchor>
  </Theme.Context>
</section>

Surface initial

Use surface="initial" to reset components back to their default surface behavior inside a dark surface context.

<Section surface="dark" innerSpace>
  <Button right>Dark surface button</Button>
  <Theme.Context surface="initial">
    <Button>Default surface button</Button>
  </Theme.Context>
</Section>