A theme is defined of a color palette made of six semantic color scales. These scales are the "variants" of a theme and represent different things like a "base" or "neutral" color, a "primary" brand color, status-focused colors like "success", "warning" and "danger", and a "secondary" color used for increased expresiveness.

A ColorScale is made of a number of color shades. But don't worry! There is dozens of handmade scales ready to be used through elm-theme-colors.

The Color Scale

Instead of using the common 100-900 scale found in systems like TailwindCSS or Material Design, we went for a more semantic approach based on what you would find on Radix UI. However, W Theme names colors directly instead of relying on a numeric scale. It also provides more variations than Radix, so no default use cases fall outside the provided scale.

Background

• bg — the main background of your ui
• bg-subtle — an alternate, slightly darker, color of your main background. useful for creating depth.

Tint

• **tint **— useful for subtle backgrounds of some UI elements.
• **tint-subtle **— subtler variation, useful for "pressed" states.
• **tint-strong **— stronger variation, useful for "hovered" states.

Accent

• accent — useful for dividers, borders and other small UI elements.
• accent-subtle — subtle variation, useful for "pressed" states.
• accent-strong — stronger variation, useful for "hovered" states.

Accent colors are not made for background or text usage as they're not guaranteed to have proper contrast, they should be used for colored elements.

Solid

• solid — useful for solid elements such as buttons.
• solid-subtle — subtle variation, useful for "pressed" states.
• solid-strong — stronger variation, useful for "hovered" states.
• solid-text — contrasting color ensuring legibility of text over solid backgrounds

Solid colors should use solid-text as their text color for proper accessibility.

Text

• text — the main text color of your application.
• text-subtle — subtler variation for secondary text.

Both text colors are guaranteed to be accessible over any background and tint colors.

Shadow

• shadow — a darker shade of the color, useful for coloring shadows.

Shadows are usually used with alpha values.

Using Color Variants

You should mostly use colors according to the current variant. This will make your styles more dynamic. Each html element can easily set its own variant, like so:

Html.div
    [ W.Theme.Color.asPrimary
    , W.Theme.styleList
        [ ( "background", W.Theme.Color.bg )
        , ( "border-color", W.Theme.Color.accent )
        , ( "color", W.Theme.Color.text )
        ]
    ]
    [ ... ]

However, if you wish to specify variant-specific colors regardless of context you can also access its values:

Html.button
    [ W.Theme.styleList
        [ ( "background", W.Theme.Color.dangerSolid )
        , ( "color", W.Theme.Color.dangerText )
        ]
    ]
    [ ... ]

Using Color Components

There are a few utility components that can be used to quickly apply some styles to your elements.

Using Shadows

Shadow colors receive an alpha value as they're meant to be used with transparency.

Html.div
    [ W.Theme.styleList
        [ ( "box-shadow"
          , "0 0 8px " ++ W.Theme.Color.shadow 0.1 )
        ]
    ]
    [ ... ]

Variant Colors

These colors will be related to the currently available variant.

By default, the base variant is selected.

Base

Primary

Secondary

Success

Warning

Danger