NOTE: the latest version is 8.0.1

README About Versions Source Modules

ThemeSpec

ThemeSpec is a theme specification that can be used across a variety of projects to quickly theme them based on CSS vars. Themes are scoped and multiple can be used at the same time in an application. ThemeSpec is fully compatible with darkmode and any theme can have dark variants.

Theme

type alias Theme =

{ fontTitle : String

, fontText : String

, fontCode : String

, borderRadius : Int

, borderRadiusLarge : Int

, focus : String

, background : String

, color : ThemeColor

, highlight : ThemeColor

, success : ThemeColor

, warning : ThemeColor

, danger : ThemeColor

}

type alias ThemeColor =

{ base : String

, light : String

, dark : String

, tint : String

, contrast : String

, shadow : String

}

Default Themes

lightTheme : Theme

darkTheme : Theme

Setup

globalProvider : Theme -> Html msg

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

Dark Mode

globalProviderWithDarkMode :

{ light : Theme

, dark : Theme

, strategy : DarkModeStrategy

}

-> Html msg

providerWithDarkMode :

{ light : Theme

, dark : Theme

, strategy : DarkModeStrategy

}

-> List (Attribute msg)

-> List (Html msg)

-> Html msg

type DarkModeStrategy

= SystemStrategy

| ClassStrategy String

Defines the dark mode strategy.

SystemStrategy uses the user system settings.
ClassStrategy uses the presence of a CSS class to determine dark mode.

Theme Sample

sample : Html msg

Renders an element that showcases all the current theme's colors and settings.

Theme Variables

background : String

borderRadius : String

borderRadiusLarge : String

color : String

colorContrast : String

colorDark : String

colorLight : String

colorShadow : String

colorTint : String

danger : String

dangerContrast : String

dangerDark : String

dangerLight : String

dangerShadow : String

dangerTint : String

focus : String

fontCode : String

fontText : String

fontTitle : String

highlight : String

highlightContrast : String

highlightDark : String

highlightLight : String

highlightShadow : String

highlightTint : String

success : String

successContrast : String

successDark : String

successLight : String

successShadow : String

successTint : String

warning : String

warningContrast : String

warningDark : String

warningLight : String

warningShadow : String

warningTint : String

Low-level

toString : Theme -> String

Modules

ThemeSpec