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 : ThemeColor

, 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

fontTitle : String

var(--tmspc-font-title)

fontText : String

var(--tmspc-font-text)

fontCode : String

var(--tmspc-font-code)

borderRadius : String

var(--tmspc-border-radius)

Usually used for the border radius of small elements. (e.g. buttons)

borderRadiusLarge : String

var(--tmspc-border-radius-large)

Usually used for the border radius of large elements. (e.g. cards)

focus : String

var(--tmspc-focus)

Usually used for accessibility purposes.

background : String

var(--tmspc-color-base)

backgroundContrast : String

var(--tmspc-background-contrast)

backgroundDark : String

var(--tmspc-background-dark)

backgroundLight : String

var(--tmspc-background-light)

backgroundShadow : String

var(--tmspc-background-shadow)

backgroundTint : String

var(--tmspc-background-tint)

color : String

var(--tmspc-color-base)

colorContrast : String

var(--tmspc-color-contrast)

colorDark : String

var(--tmspc-color-dark)

colorLight : String

var(--tmspc-color-light)

colorShadow : String

var(--tmspc-color-shadow)

colorTint : String

var(--tmspc-color-tint)

danger : String

var(--tmspc-danger-base)

dangerContrast : String

var(--tmspc-danger-contrast)

dangerDark : String

var(--tmspc-danger-dark)

dangerLight : String

var(--tmspc-danger-light)

dangerShadow : String

var(--tmspc-danger-shadow)

dangerTint : String

var(--tmspc-danger-tint)

highlight : String

var(--tmspc-highlight-base)

highlightContrast : String

var(--tmspc-highlight-contrast)

highlightDark : String

var(--tmspc-highlight-dark)

highlightLight : String

var(--tmspc-highlight-light)

highlightShadow : String

var(--tmspc-highlight-shadow)

highlightTint : String

var(--tmspc-highlight-tint)

success : String

var(--tmspc-success-base)

successContrast : String

var(--tmspc-success-contrast)

successDark : String

var(--tmspc-success-dark)

successLight : String

var(--tmspc-success-light)

successShadow : String

var(--tmspc-success-shadow)

successTint : String

var(--tmspc-success-tint)

warning : String

var(--tmspc-warning-base)

warningContrast : String

var(--tmspc-warning-contrast)

warningDark : String

var(--tmspc-warning-dark)

warningLight : String

var(--tmspc-warning-light)

warningShadow : String

var(--tmspc-warning-shadow)

warningTint : String

var(--tmspc-warning-tint)

Low-level

toString : Theme -> String

Use this if you want to create your own custom providers. This should only be useful for theme-spec interop library authors.

Modules

ThemeSpec

uncover-co/elm-theme-spec/3.0.0