Used to provide a Theme globally. It will be applied to your body element and it will be available for use anywhere in your application.

main : Html msg
main =
    div []
        [ Theme.globalProvider lightTheme
        , p [ style "color" Theme.baseForeground ]
            [ text "I'm colored using the `base foreground` value!" ]
        ]

Note: You are still able to overwrite this Theme locally.

Used to propagate themes to an specific scope.

main : Html msg
main =
    div []
        [ Theme.globalProvider defaultTheme


        -- section using the default theme
        , section [] [ .. ]


        -- section using the orange theme
        , Theme.provider orangeTheme [] [ .. ]
        ]

Used to provide a Theme globally with a dark mode alternative. Themes will automatically switch based on the strategy condition.

main : Html msg
main =
    div []
        [ Theme.globalProviderWithDarkMode
            { light = lightTheme
            , dark = darkTheme
            , strategy = Theme.systemStrategy
            }
        , p [ style "color" Theme.baseForeground ]
            [ text "I'm colored using the `base foreground` value!" ]
        ]

Note: You are still able to overwrite this Theme locally.

Used to propagate themes to an specific scope with a dark mode alternative. Themes will automatically switch based on the strategy condition.

main : Html msg
main =
    div []
        [ Theme.globalProviderWithDarkMode
            { light = lightTheme
            , dark = darkTheme
            , strategy = Theme.systemStrategy
            }


        -- section using the default light or dark theme
        , section [] [ .. ]


        -- section using the orange light and dark themes
        , Theme.providerWithDarkMode
            { light = lightOrange
            , dark = darkOrange
            , strategy = Theme.systemStrategy
            }
            [] [ .. ]
        ]

Uses the presence of a given CSS class in the element scope to decide between light and dark mode.

Uses the user system settings to decide between light and dark mode.

myTheme =
    optimizedProvider theme


body []
    [ myTheme.styles
    , myTheme.provider []
        [ ... ]
    ]

div
    [ styles
        [ ( "color", Theme.baseForeground )
        , ( "background", Theme.baseBackground )
        ]
    ]
    []

div
    [ stylesIf
        [ ( "background", Theme.baseBackground, True )
        , ( "color", Theme.primaryForeground, isPrimary )
        , ( "color", Theme.baseForeground, not isPrimary )
        ]
    ]
    []