theme

Types

ColourScaleVariables

pub type ColourScaleVariables {
  ColourScaleVariables(
    bg: String,
    bg_subtle: String,
    tint: String,
    tint_subtle: String,
    tint_strong: String,
    accent: String,
    accent_subtle: String,
    accent_strong: String,
    solid: String,
    solid_subtle: String,
    solid_strong: String,
    solid_text: String,
    text: String,
    text_subtle: String,
  )
}

Constructors

ColourScaleVariables(
  bg: String,
  bg_subtle: String,
  tint: String,
  tint_subtle: String,
  tint_strong: String,
  accent: String,
  accent_subtle: String,
  accent_strong: String,
  solid: String,
  solid_subtle: String,
  solid_strong: String,
  solid_text: String,
  text: String,
  text_subtle: String,
)

FontVariables

</>

pub type FontVariables {
  FontVariables(heading: String, body: String, code: String)
}

Constructors

FontVariables(heading: String, body: String, code: String)

Fonts

</>

Configuration for the different fonts that can be used in a themed application. Each font String should match the format you would write in a CSS font-family rule.

If you are using custom fonts, remember to make sure the font is loaded in your app, either through a <link> tag, or a CSS @import.

pub type Fonts {
  Fonts(heading: String, body: String, code: String)
}

Constructors

Fonts(heading: String, body: String, code: String)

Selector

</>

Configures the CSS selector used when applying a theme or a theme’s dark mode.

pub type Selector {
  Global
  Class(String)
  DataAttribute(String, String)
}

Constructors

```
Global
```
```
Class(String)
```
```
DataAttribute(String, String)
```

Configuration for the different size values that can be used for different parts of a themed application. Both a theme’s space scale as well as the different options for border radius are configured by a SizeScale.

Each field is a value in rem units. So a value of 12.0 would be 12.0rem in CSS, not 12.0px. This means your space scale remains adaptive even if the user configures their browser to render smaller or larger text (for example when zooming or for accessibility reasons.)

pub type SizeScale {
  SizeScale(
    xs: Float,
    sm: Float,
    md: Float,
    lg: Float,
    xl: Float,
    xl_2: Float,
    xl_3: Float,
  )
}

Constructors

SizeScale(
  xs: Float,
  sm: Float,
  md: Float,
  lg: Float,
  xl: Float,
  xl_2: Float,
  xl_3: Float,
)

SizeVariables

</>

pub type SizeVariables {
  SizeVariables(
    xs: String,
    sm: String,
    md: String,
    lg: String,
    xl: String,
    xl_2: String,
    xl_3: String,
  )
}

Constructors

SizeVariables(
  xs: String,
  sm: String,
  md: String,
  lg: String,
  xl: String,
  xl_2: String,
  xl_3: String,
)

Theme

opaque </>

A Lustre UI theme dictates the visual style of an application. It defines a number of design tokens to set common styles such as fonts, colours, and spacing.

These design tokens can be used in your own components and styles to ensure a consistent look and feel in your application. For example you might want to colour a span of text with the primary colour of your theme by doing:

html.span([attribute.style([#("color", theme.primary.solid_text)])], [
  html.text("Hello, world!")
])

You can construct a blank theme using the new function, or start with a sensible default using the Lustre UI’s default theme.

A theme can be further customised using the various with_ functions, such as with_primary_scale, with_space, or with_dark_palette.

pub opaque type Theme

Constants

base

</>

pub const base: ColourScaleVariables

A record that lets you access theme tokens for the base colour scale of the theme. The base colour scale is typically a greyscale or neutral scale.

colour

</>

pub const colour: ColourScaleVariables

A record that lets you access theme tokens related to the current colour scale. The current colour scale is context-dependent and depends on the CSS cascade: if a parent element higher up the tree sets the data-scale attribute or applies a class like .lustre-ui-primary, these tokens will match the colours from that scale.

danger

</>

pub const danger: ColourScaleVariables

A record that lets you access theme tokens for the danger colour scale of the theme. The danger colour scale is typically used in parts of your UI that indicate critical information or notify users that an action will have destructive consequences.

font

</>

pub const font: FontVariables

A record that lets you access theme tokens related to fonts. You could use these when styling elements yourself either with the style attribute or with sketch, a CSS-in-Gleam library.

primary

</>

pub const primary: ColourScaleVariables

A record that lets you access theme tokens for the primary colour scale of the theme. The primary colour scale is typically your brand colour.

radius

</>

pub const radius: SizeVariables

A record that lets you access theme tokens related to border radius. You could use these when styling elements yourself either with the style attribute or with sketch, a CSS-in-Gleam library.

These border radius variables are typically used to round the corners of an element.

secondary

</>

pub const secondary: ColourScaleVariables

A record that lets you access theme tokens for the secondary colour scale of the theme. The secondary colour scale is typically used as an accent or compliment to your primary colour.

spacing

</>

pub const spacing: SizeVariables

A record that lets you access theme tokens related to spacing. You could use these when styling elements yourself either with the style attribute or with sketch, a CSS-in-Gleam library.

These spacing variables are typically used to add margin or a gap between elements in a layout, or to add padding to an element.

success

</>

pub const success: ColourScaleVariables

A record that lets you access theme tokens for the success colour scale of the theme. The success colour scale is typically used in parts of your UI that indicate an action was successful.

warning

</>

pub const warning: ColourScaleVariables

A record that lets you access theme tokens for the warning colour scale of the theme. The warning colour scale is typically used in parts of your UI to indicate non-critical information or notify users that an action may have non-destructive consequences.

Functions

augmented_forth

</>

pub fn augmented_forth(base: Float) -> SizeScale

decoder

</>

pub fn decoder(json: Dynamic) -> Result(Theme, List(DecodeError))

default

</>

pub fn default() -> Theme

Construct Lustre UI’s default theme. This theme defines some sensible defaults for fonts, radius, and space, and provides both a light and dark mode palette. The light mode palette applies globally, and the dark mode palette applies if the user has enabled dark mode in their operating system or browser, or if you manually set the "dark" class on an element.

You can customise the theme further using the various with_ functions, such as with_primary_scale, with_space, with_dark_palette, etc.

encode

</>

pub fn encode(theme: Theme) -> Json

golden_ratio

</>

pub fn golden_ratio(base: Float) -> SizeScale

inject

</>

pub fn inject(
  theme: Theme,
  view: fn() -> Element(a),
) -> Element(a)

new

</>

pub fn new(id: String, selector: Selector) -> Theme

Construct an empty theme with the given id and selector. The theme will have a sensible default configuration for fonts, radius, and space, but the colour palette will be empty.

You can customise the theme further using the various with_ functions, such as with_primary_scale, with_space, with_dark_palette, etc.

perfect_fifth

</>

pub fn perfect_fifth(base: Float) -> SizeScale

perfect_fourth

</>

pub fn perfect_fourth(base: Float) -> SizeScale

to_style

</>

pub fn to_style(theme theme: Theme) -> Element(a)

Render a Theme as a <style> tag.

use_base

</>

pub fn use_base() -> Attribute(a)

use_danger

</>

pub fn use_danger() -> Attribute(a)

use_primary

</>

pub fn use_primary() -> Attribute(a)

use_secondary

</>

pub fn use_secondary() -> Attribute(a)

use_success

</>

pub fn use_success() -> Attribute(a)

use_warning

</>

pub fn use_warning() -> Attribute(a)

with_base_scale

</>

pub fn with_base_scale(theme: Theme, scale: ColourScale) -> Theme

Replace the base colour scale of a theme’s default colour palette with a new one.

with_body_font

</>

pub fn with_body_font(theme: Theme, font: String) -> Theme

Replace the body font in a theme with a new value. The provided string should match the kind of font stack you might write in a CSS font-family rule.

The body font is typically used throughout an interface as the primary font in all copy.

with_code_font

</>

pub fn with_code_font(theme: Theme, font: String) -> Theme

Replace the code font in a theme with a new value. The provided string should match the kind of font stack you might write in a CSS font-family rule.

The code font is typically a monospaced font used for code snippets in prose, but may also be used as an alternative heading font or otherwise used as an alternative to the body font.

with_danger_scale

</>

pub fn with_danger_scale(
  theme: Theme,
  scale: ColourScale,
) -> Theme

Replace the danger colour scale of a theme’s default colour palette with a new one.

with_dark_base_scale

</>

pub fn with_dark_base_scale(
  theme: Theme,
  scale: ColourScale,
) -> Theme

Replace the base colour scale of a theme’s dark mode colour palette with a new one. If the theme does not have a dark mode registered, calling this function will do nothing.