lenards/elm-ui-patternfly/4.0.0

NOTE: the latest version is 4.0.2

PF6.Theme

A theme system for PF6 components supporting light and dark modes.

The Theme type wraps all color tokens needed by the design system. Use light or dark to get a pre-built theme, or fromMode to derive one from a Mode value stored in your model.

Theme

type Theme

An opaque type holding all color tokens for a given theme.

type Mode
= Light
| Dark

The visual mode — Light or Dark.

The PF6 light mode theme. Color values match PF6.Tokens.

The PF6 dark mode theme. Uses lighter foreground colors on dark surfaces for proper contrast.

Convert a Mode to the corresponding Theme.

fromMode Light == light


fromMode Dark == dark

Text Colors

text : Theme -> Color

Default text color.

textSubtle : Theme -> Color

Subtle/secondary text color.

textOnDark : Theme -> Color

Text color for use on dark backgrounds.

Background Colors

Default background color.

Secondary background color.

Primary-colored background.

Danger/error background color.

Warning background color.

Success background color.

Info background color.

Border Colors

borderDefault : Theme -> Color

Default border color.

borderSubtle : Theme -> Color

Subtle border color.

Semantic Colors

primary : Theme -> Color

Primary brand color.

primaryHover : Theme -> Color

Primary brand color hover state.

danger : Theme -> Color

Danger/error color.

dangerHover : Theme -> Color

Danger/error color hover state.

warning : Theme -> Color

Warning color.

warningHover : Theme -> Color

Warning color hover state.

success : Theme -> Color

Success color.

successHover : Theme -> Color

Success color hover state.

info : Theme -> Color

Info color.

infoHover : Theme -> Color

Info color hover state.

neutral : Theme -> Color

Neutral / secondary gray.

neutralHover : Theme -> Color

Neutral color hover state.