Pico Theme Test

Typography

Heading 2

Subtitle / hgroup second child

Heading 3

Heading 4

Paragraph with a primary link, bold, italic, inline code, kbd, and a highlighted mark. Select this text to see text-selection-color.

Blockquote with a link inside — check underline color here too.

Small text · small link

Buttons — primary & secondary

Buttons

Custom colors — `data-color` scoping

accent

Toggle Range

danger

Toggle Range

Forms — tab through to test focus ring color

Text input Email input

Select Textarea

Checkboxes Checked Unchecked

Radio Option A Option B

Toggle switches Switch on Switch off

Range

Article

Nullam dui arcu, malesuada et sodales eu, efficitur vitae dolor. Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit pharetra egestas. Nunc placerat facilisis cursus. Sed vestibulum metus eget dolor pharetra rutrum.

Links on forced backgrounds

On the page background: hover this link · another link · third

Forced dark: link underline and hover-underline — should be a clean tint, not muddy.

Forced light: link underline and hover-underline — should also look clean.

Table

Variable	Light	Dark
--pico-primary	seed	seed
--pico-primary-background	seed	seed
--pico-primary-inverse	oklch auto-contrast (black or white)
--pico-primary-underline	oklch(seed / 0.5)
--pico-primary-focus	oklch(seed / 0.28)	oklch(seed / 0.32)

Progress & misc

Article header

Article body with a link inside a card.

Generated CSS