uncover-co / elm-theme-spec / ThemeSpec

ThemeSpec is a theme specification that can be used across a variety of projects to quickly theme them based on CSS variables. 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.

lightTheme : ThemeSpec

darkTheme : ThemeSpec

theme : ThemeSpec -> ThemeProvider.Theme

themeSpec : ThemeSpecData -> List ( String, String ) -> ThemeSpec


type ThemeSpec


type alias ThemeSpecData =
{ fonts : { title : String
, text : String
, code : String }
, colors : { base : ThemeSpecColor
, primary : ThemeSpecColor
, secondary : ThemeSpecColor
, success : ThemeSpecColor
, warning : ThemeSpecColor
, danger : ThemeSpecColor } 
}


type alias ThemeSpecColor =
{ bg : Color
, fg : Color
, aux : Color 
}

Theme Sample

sample : Html msg

Theme Variables

fonts : { title : String, text : String, code : String }

var(--tmspc-font-title)

base : ThemeSpecColorVars

primary : ThemeSpecColorVars

secondary : ThemeSpecColorVars

success : ThemeSpecColorVars

warning : ThemeSpecColorVars

danger : ThemeSpecColorVars


type alias ThemeSpecColorVars =
{ bg : String
, bgChannels : String
, fg : String
, fgChannels : String
, aux : String
, auxChannels : String 
}