Primer / Live
Storybook

  • Theme

  • Light
  • Dark
  • System

  • Light tone

  • Light
  • Light high contrast
  • Light colorblind
  • Light Tritanopia

  • Dark tone

  • Dark
  • Dark dimmed
  • Dark high contrast
  • Dark colorblind
  • Dark Tritanopia
  • Reset to default

Theme

Creates a wrapper that sets the light/dark color mode and theme, with support for color blindness.

Default (system settings)

Label Danger 12 12

Light

Label Danger 12 12

Light high contrast

Label Danger 12 12

Light colorblind

Label Danger 12 12

Light Tritanopia

Label Danger 12 12

Dark

Label Danger 12 12

Dark dimmed

Label Danger 12 12

Dark high contrast

Label Danger 12 12

Dark colorblind

Label Danger 12 12

Dark Tritanopia

Label Danger 12 12

Inline

Setting a theme on individual items using attr is_inline.

HTML attributes

Setting a theme on individual items using PrimerLive.Theme.html_attributes.