PackagesReroutesAboutlamdera.com

uncover-co/elm-theme-spec/5.0.0

NOTE: the latest version is 8.0.1

READMEAboutVersionsSourceModules

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.

type alias ThemeSpec =
{ fontTitle : String
, fontText : String
, fontCode : String
, borderRadius : String
, borderRadiusLarge : String
, focus : String
, background : ThemeSpecBackground
, base : ThemeSpecColor
, accent : ThemeSpecColor
, success : ThemeSpecColor
, warning : ThemeSpecColor
, danger : ThemeSpecColor
}
type alias ThemeSpecBackground =
{ base : String
, dark : String
, darker : String
, shadow : String
}
type alias ThemeSpecColor =
{ base : String
, light : String
, lighter : String
, shadow : String
}
theme : ThemeSpec -> Theme

Used for turning a ThemeSpec into a Theme used by elm-theme-provider.

Default Themes

lightTheme : Theme
darkTheme : Theme

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)

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

CSS Variables based on background colors.

  • background.base var(--tmspc-background)
  • background.dark var(--tmspc-background-dark)
  • background.darker var(--tmspc-background-darker)
  • background.shadow var(--tmspc-background-shadow)
base : ThemeSpecColor

CSS Variables based on base colors.

  • base.base var(--tmspc-base)
  • base.dark var(--tmspc-base-dark)
  • base.darker var(--tmspc-base-darker)
  • base.shadow var(--tmspc-base-shadow)
accent : ThemeSpecColor

CSS Variables based on accent colors.

  • accent.base var(--tmspc-accent)
  • accent.dark var(--tmspc-accent-dark)
  • accent.darker var(--tmspc-accent-darker)
  • accent.shadow var(--tmspc-accent-shadow)
success : ThemeSpecColor

CSS Variables based on success colors.

  • success.base var(--tmspc-success)
  • success.dark var(--tmspc-success-dark)
  • success.darker var(--tmspc-success-darker)
  • success.shadow var(--tmspc-success-shadow)
warning : ThemeSpecColor

CSS Variables based on warning colors.

  • warning.base var(--tmspc-warning)
  • warning.dark var(--tmspc-warning-dark)
  • warning.darker var(--tmspc-warning-darker)
  • warning.shadow var(--tmspc-warning-shadow)
danger : ThemeSpecColor

CSS Variables based on danger colors.

  • danger.base var(--tmspc-danger)
  • danger.dark var(--tmspc-danger-dark)
  • danger.darker var(--tmspc-danger-darker)
  • danger.shadow var(--tmspc-danger-shadow)

Modules

About this package serverReroutesreroutes.json
Pages and docs rendering from package.elm-lang.org, © 2012-2020 Evan Czaplicki. © 2026 Lamdera