new : ThemeData -> Theme
{ fonts : ThemeFonts
, base : ThemeColorSet
, neutral : ThemeColorSet
, primary : ThemeColorSet
, secondary : ThemeColorSet
, success : ThemeColorSet
, warning : ThemeColorSet
, danger : ThemeColorSet
}
{ heading : String
, text : String
, code : String
}
{ background : Color
, foreground : Color
, aux : Color
}
lightTheme : Theme
darkTheme : Theme
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
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 [] [ .. ]
]
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.
optimizedProvider : Theme -> ThemeProvider msg
myTheme =
optimizedProvider theme
body []
[ myTheme.styles
, myTheme.provider []
[ ... ]
]
optimizedProviderWithDarkMode : { light : Theme, dark : Theme, strategy : DarkModeStrategy } -> ThemeProvider msg
{ styles : Html msg
, provider : List (Html.Attribute msg) -> List (Html msg) -> Html msg
}
sample : Html msg
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 )
]
]
[]
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
{ 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