PF6.Charts.Theme

Chart theme system for PF6 — light and dark modes.

Mirrors the pattern from PF6.Theme in elm-ui-patternfly, adapted for chart-specific tokens (axis, grid, series colors).

Types

type Theme

An opaque type holding all color tokens for chart rendering.

type Mode

= Light

| Dark

The visual mode — Light or Dark.

Constructors

light : Theme

PF6 light mode chart theme.

dark : Theme

PF6 dark mode chart theme. Uses lighter colors on dark backgrounds.

fromMode : Mode -> Theme

Derive a theme from a Mode value.

fromMode Light == light
fromMode Dark  == dark

Bridging from a UI theme library

PF6.Charts intentionally has no dependency on mdgriffith/elm-ui or any specific UI theme library. If you are already using lenards/elm-ui-patternfly (or a future elm-patternfly built on elm/html), use UiThemeColors and fromUiThemeColors to bridge your theme into chart tokens.

type alias UiThemeColors =

{ primary : String

, labelText : String

, background : String

, borderDefault : String

}

A plain record of hex color strings extracted from a UI theme library.

Pass this to fromUiThemeColors to get a Theme without requiring any dependency on mdgriffith/elm-ui or lenards/elm-ui-patternfly.

All fields are 6-digit hex strings, e.g. "#0066cc".

fromUiThemeColors : UiThemeColors -> Theme

Build a chart Theme from a UiThemeColors record.

The chart series color scale defaults to Colors.multiOrdered with primary as the first color. Axis and grid lines use borderDefault. Label text uses labelText. See the module doc for a full bridging example.

Example — bridging from lenards/elm-ui-patternfly:

import Element exposing (toRgb)
import PF6.Theme as UiTheme
import PF6.Charts.Theme as ChartTheme

{-| Convert an elm-ui Color to a 6-digit hex string.
    Requires rtfeldman/elm-hex or a similar hex-encoding package.
-}
colorToHex : Element.Color -> String
colorToHex color =
    let
        { red, green, blue } =
            Element.toRgb color

        byte n =
            String.padLeft 2 '0' (Hex.toString (round (n * 255)))
    in
    "#" ++ byte red ++ byte green ++ byte blue

{-| Derive chart tokens from a PF6 UI theme.
-}
chartTheme : UiTheme.Theme -> ChartTheme.Theme
chartTheme uiTheme =
    ChartTheme.fromUiThemeColors
        { primary = colorToHex (UiTheme.primary uiTheme)
        , labelText = colorToHex (UiTheme.text uiTheme)
        , background = colorToHex (UiTheme.backgroundDefault uiTheme)
        , borderDefault = colorToHex (UiTheme.borderDefault uiTheme)
        }

The same pattern will work for a future elm-patternfly library built on elm/html — just swap the colorToHex helper for whatever color type that library exposes.

Accessors

primaryColor : Theme -> String

The primary series color for single-series charts.

seriesColor : Int -> Theme -> String

All series colors as an ordered list. Use index into this list to color each series in multi-series charts. Falls back to primary if index is out of range.

axisColor : Theme -> String

Axis line and tick mark color.

gridColor : Theme -> String

Grid line color.

labelColor : Theme -> String

Tick label and legend text color.

backgroundColor : Theme -> String

Chart background color.

fontFamily : Theme -> String

Font family string for chart text (tick labels, legends, annotations).