W.Theme

Setting Up

{ theme : Theme

, darkMode : DarkMode

}

-> Html msg

Theme's are most commonly set globally. By using globalTheme the theme will be applied to the body element directly.

classTheme :

{ theme : Theme

, class : String

, darkMode : DarkMode

}

-> Html msg

However, if you want to set up multiple themes in the same page, or if you don't want to use Elm Theme for your whole application but just for part of it, you can set class based themes.

themeComponents : Html msg

When not using global themes, you should add the styles for your theme components manually. These will enable features such as W.Theme.Color.asPrimary and W.Theme.Color.asSolid.

Dark Modes

When applying a theme using any of the available methods, you can also provide a dark mode strategy.

Not that the themes passed in for dark modes will only change color tokens. Other tokens will still be configured based on the main theme.

type DarkMode

noDarkMode : DarkMode

darkModeFromClass : String -> Theme -> DarkMode

darkModeFromSystemPreferences : Theme -> DarkMode

Creating Custom Themes

You should always start a new theme by extending one of the default themes:

W.Theme.lightTheme
    |> W.Theme.withTextFont "Roboto"
    |> W.Theme.withPrimaryColor myProductColor

type Theme

lightTheme : Theme

darkTheme : Theme

Theme Id

withId : String -> Theme -> Theme

This setting can be useful for debugging theme inheritance.

Theme Fonts

withHeadingFont : String -> Theme -> Theme

withTextFont : String -> Theme -> Theme

withCodeFont : String -> Theme -> Theme

Theme Radius, Sizing & Spacing

withSpacing : SpacingScale -> Theme -> Theme

withSizing : SizingScale -> Theme -> Theme

withRadius : RadiusScale -> Theme -> Theme

Theme Colors

withColorPalette : ColorPalette -> Theme -> Theme

withBaseColor : ColorScale -> Theme -> Theme

withPrimaryColor : ColorScale -> Theme -> Theme

withSecondaryColor : ColorScale -> Theme -> Theme

withSuccessColor : ColorScale -> Theme -> Theme

withWarningColor : ColorScale -> Theme -> Theme

withDangerColor : ColorScale -> Theme -> Theme

Styling Helpers

styleList : List ( String, String ) -> Attribute msg

Set styles using CSS variables.

This is used to bypass a current limitation of Elm's Html.Attribute.style function, which ignores CSS variables.

You can't compose this function with other functions that also set the element's style! Unlike Html.Attribute.class this function does not compose with other similar functions.

Html.input
    [ W.Theme.styleList
        [ ( "background", W.Theme.Color.bg )
        , ( "color", W.Theme.Color.text )
        ]
    ]
    []

styleListIf : List ( String, String, Bool ) -> Attribute msg

Conditionally set styles using CSS variables.

This is used to bypass a current limitation of Elm's Html.Attribute.style function, which ignores CSS variables.

You can't compose this function with other functions that also set the element's style! Unlike Html.Attribute.class this function does not compose with other similar functions.

Html.input
    [ Theme.styleListIf
        [ ( "background", W.Theme.Color.background, True )
        , ( "color", W.Theme.Color.text, True )
        , ( "border-color", W.Theme.Color.dangerAccent, hasErrors )
        ]
    ]
    []