uncover-co / elm-theme / Theme

Creating Themes

new : ThemeData -> Theme


type alias ThemeData =
{ fonts : ThemeFonts
, base : ThemeColorSet
, neutral : ThemeColorSet
, primary : ThemeColorSet
, secondary : ThemeColorSet
, success : ThemeColorSet
, warning : ThemeColorSet
, danger : ThemeColorSet 
}


type alias ThemeFonts =
{ heading : String
, text : String
, code : String 
}


type alias ThemeColorSet =
{ background : Color
, foreground : Color
, aux : Color 
}


type Theme

Built-in Themes

lightTheme : Theme

darkTheme : Theme

Extending Themes

fromTheme : Theme -> ThemeBuilder

toTheme : ThemeBuilder -> Theme

toThemeData : Theme -> ThemeData

withFonts : ThemeFonts -> ThemeBuilder -> ThemeBuilder

withFontHeading : String -> ThemeBuilder -> ThemeBuilder

withFontText : String -> ThemeBuilder -> ThemeBuilder

withFontCode : String -> ThemeBuilder -> ThemeBuilder

withBase : ThemeColorSet -> ThemeBuilder -> ThemeBuilder

withBaseForeground : Color -> ThemeBuilder -> ThemeBuilder

withBaseBackground : Color -> ThemeBuilder -> ThemeBuilder

withBaseAux : Color -> ThemeBuilder -> ThemeBuilder

withNeutral : ThemeColorSet -> ThemeBuilder -> ThemeBuilder

withNeutralForeground : Color -> ThemeBuilder -> ThemeBuilder

withNeutralBackground : Color -> ThemeBuilder -> ThemeBuilder

withNeutralAux : Color -> ThemeBuilder -> ThemeBuilder

withPrimary : ThemeColorSet -> ThemeBuilder -> ThemeBuilder

withPrimaryForeground : Color -> ThemeBuilder -> ThemeBuilder

withPrimaryBackground : Color -> ThemeBuilder -> ThemeBuilder

withPrimaryAux : Color -> ThemeBuilder -> ThemeBuilder

withSecondary : ThemeColorSet -> ThemeBuilder -> ThemeBuilder

withSecondaryForeground : Color -> ThemeBuilder -> ThemeBuilder

withSecondaryBackground : Color -> ThemeBuilder -> ThemeBuilder

withSecondaryAux : Color -> ThemeBuilder -> ThemeBuilder

withSuccess : ThemeColorSet -> ThemeBuilder -> ThemeBuilder

withSuccessForeground : Color -> ThemeBuilder -> ThemeBuilder

withSuccessBackground : Color -> ThemeBuilder -> ThemeBuilder

withSuccessAux : Color -> ThemeBuilder -> ThemeBuilder

withWarning : ThemeColorSet -> ThemeBuilder -> ThemeBuilder

withWarningForeground : Color -> ThemeBuilder -> ThemeBuilder

withWarningBackground : Color -> ThemeBuilder -> ThemeBuilder

withWarningAux : Color -> ThemeBuilder -> ThemeBuilder

withDanger : ThemeColorSet -> ThemeBuilder -> ThemeBuilder

withDangerForeground : Color -> ThemeBuilder -> ThemeBuilder

withDangerBackground : Color -> ThemeBuilder -> ThemeBuilder

withDangerAux : Color -> ThemeBuilder -> ThemeBuilder

withThemeData : ThemeData -> ThemeBuilder -> ThemeBuilder

withExtraValues : List ( String, String ) -> ThemeBuilder -> ThemeBuilder

Theme Providers

globalProvider : Theme -> Html msg

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.

provider : Theme -> List (Html.Attribute msg) -> List (Html msg) -> Html msg

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 [] [ .. ]
        ]

Dark Mode

globalProviderWithDarkMode : { light : Theme, dark : Theme, strategy : DarkModeStrategy } -> Html msg

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.

providerWithDarkMode : { light : Theme, dark : Theme, strategy : DarkModeStrategy } -> List (Html.Attribute msg) -> List (Html msg) -> Html msg

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
            }
            [] [ .. ]
        ]

classStrategy : String -> DarkModeStrategy

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

systemStrategy : DarkModeStrategy

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


type DarkModeStrategy

Optimized Providers

optimizedProvider : Theme -> ThemeProvider msg

myTheme =
    optimizedProvider theme

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

optimizedProviderWithDarkMode : { light : Theme, dark : Theme, strategy : DarkModeStrategy } -> ThemeProvider msg


type alias ThemeProvider msg =
{ styles : Html msg
, provider : List (Html.Attribute msg) -> List (Html msg) -> Html msg 
}

Theme Sampler

sample : Html msg

Theme Html Helpers

Elm doesn't always play nice with CSS variables. These functions are a workaround for that issue. Please note that you can only use one of these functions per element (or Html.Attributes.style).

styles : List ( String, String ) -> Html.Attribute msg

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

stylesIf : List ( String, String, Basics.Bool ) -> Html.Attribute msg

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

Theme Values

fontHeading : String

fontText : String

fontCode : String

baseForeground : String

baseBackground : String

baseAux : String

baseForegroundWithAlpha : Basics.Float -> String

baseBackgroundWithAlpha : Basics.Float -> String

baseAuxWithAlpha : Basics.Float -> String

neutralForeground : String

neutralBackground : String

neutralAux : String

neutralForegroundWithAlpha : Basics.Float -> String

neutralBackgroundWithAlpha : Basics.Float -> String

neutralAuxWithAlpha : Basics.Float -> String

primaryForeground : String

primaryBackground : String

primaryAux : String

primaryForegroundWithAlpha : Basics.Float -> String

primaryBackgroundWithAlpha : Basics.Float -> String

primaryAuxWithAlpha : Basics.Float -> String

secondaryForeground : String

secondaryBackground : String

secondaryAux : String

secondaryForegroundWithAlpha : Basics.Float -> String

secondaryBackgroundWithAlpha : Basics.Float -> String

secondaryAuxWithAlpha : Basics.Float -> String

successForeground : String

successBackground : String

successAux : String

successForegroundWithAlpha : Basics.Float -> String

successBackgroundWithAlpha : Basics.Float -> String

successAuxWithAlpha : Basics.Float -> String

warningForeground : String

warningBackground : String

warningAux : String

warningForegroundWithAlpha : Basics.Float -> String

warningBackgroundWithAlpha : Basics.Float -> String

warningAuxWithAlpha : Basics.Float -> String

dangerForeground : String

dangerBackground : String

dangerAux : String

dangerForegroundWithAlpha : Basics.Float -> String

dangerBackgroundWithAlpha : Basics.Float -> String

dangerAuxWithAlpha : Basics.Float -> String

Theme Value Sets


type alias ThemeColorSetValues =
{ foreground : String
, foregroundWithAlpha : Basics.Float -> String
, background : String
, backgroundWithAlpha : Basics.Float -> String
, aux : String
, auxWithAlpha : Basics.Float -> String 
}

base : ThemeColorSetValues

neutral : ThemeColorSetValues

primary : ThemeColorSetValues

secondary : ThemeColorSetValues

success : ThemeColorSetValues

warning : ThemeColorSetValues

danger : ThemeColorSetValues