theme

Theme tokens and <style> generation for Basecoat UI.

Basecoat uses shadcn/ui compatible CSS variables for theming. This module provides typed tokens and helpers to generate theme styles.

Example

import glaze/basecoat
import glaze/basecoat/theme

let my_theme =
  theme.default_theme()
  |> theme.set(theme.Primary, "oklch(0.205 0 0)")
  |> theme.set(theme.Radius, "0.5rem")

html.head([], [
  glaze_basecoat.register(glaze_basecoat.version),
  theme.style_tag(my_theme),
])

Theming

You can use any shadcn/ui theme. Visit ui.shadcn.com/themes to browse available themes and copy their CSS variables.

Types

Theme

opaque </>

A mapping from Token to CSS value.

pub opaque type Theme

Token

</>

A typed design token used as a key in a Theme.

Tokens are converted to CSS custom properties (for example Background -> --background) when rendering style output.

pub type Token {
  Background
  Foreground
  Card
  CardForeground
  Popover
  PopoverForeground
  Primary
  PrimaryForeground
  Secondary
  SecondaryForeground
  Muted
  MutedForeground
  Accent
  AccentForeground
  Destructive
  DestructiveForeground
  Border
  Input
  Ring
  Radius
  Chart1
  Chart2
  Chart3
  Chart4
  Chart5
  Sidebar
  SidebarForeground
  SidebarPrimary
  SidebarPrimaryForeground
  SidebarAccent
  SidebarAccentForeground
  SidebarBorder
  SidebarRing
}

Constructors

```
Background
```
```
Foreground
```
```
Card
```
```
CardForeground
```
```
Popover
```
```
PopoverForeground
```
```
Primary
```
```
PrimaryForeground
```
```
Secondary
```
```
SecondaryForeground
```
```
Muted
```
```
MutedForeground
```
```
Accent
```
```
AccentForeground
```
```
Destructive
```
```
DestructiveForeground
```
```
Border
```
```
Input
```
```
Ring
```
```
Radius
```
```
Chart1
```
```
Chart2
```
```
Chart3
```
```
Chart4
```
```
Chart5
```
```
Sidebar
```
```
SidebarForeground
```
```
SidebarPrimary
```
```
SidebarPrimaryForeground
```
```
SidebarAccent
```
```
SidebarAccentForeground
```
```
SidebarBorder
```
```
SidebarRing
```

Values

dark_theme

</>

pub fn dark_theme() -> Theme

Returns the dark theme variant.

Use this for dark mode or combine with default_theme() using light-dark().

default_theme

</>

pub fn default_theme() -> Theme

Returns Basecoat’s default theme (shadcn/ui default theme).

This includes the default color palette and border radius. Start with this and customize as needed.

from_list

</>

pub fn from_list(tokens: List(#(Token, String))) -> Theme

Construct a Theme from a list of token-value pairs.

If the same token appears multiple times, the last value overrides previous ones.

Example

let t = theme.from_list([
  #(theme.Primary, "oklch(0.205 0 0)"),
  #(theme.PrimaryForeground, "oklch(0.985 0 0)"),
])

get

</>

pub fn get(theme: Theme, token: Token) -> String

Get a token value from a theme.

set

</>

pub fn set(theme: Theme, token: Token, value: String) -> Theme

Set a token value in a theme.

set_many

</>

pub fn set_many(
  theme: Theme,
  updates: List(#(Token, String)),
) -> Theme

Set multiple token values in a theme.

style_tag

</>

pub fn style_tag(theme: Theme) -> element.Element(a)

Render a <style> tag that sets all CSS variables from the theme.

style_tag_light_dark

</>

pub fn style_tag_light_dark(
  light: Theme,
  dark: Theme,
) -> element.Element(a)

Render a <style> tag with both light and dark theme variants.

This generates CSS that automatically switches between themes based on the color-scheme or prefers-color-scheme media query.

tailwind_v4_bridge_css

</>

pub fn tailwind_v4_bridge_css() -> String

The Tailwind v4 @theme mapping used by Basecoat.

This matches the @theme block in Basecoat’s src/css/basecoat.css.

tailwind_v4_bridge_style_tag

</>

pub fn tailwind_v4_bridge_style_tag() -> element.Element(a)

Render a <style type="text/tailwindcss"> tag containing Basecoat’s Tailwind v4 @theme mapping.

This is only needed when using Tailwind’s Play CDN (@tailwindcss/browser). In build-time Tailwind setups (Tailwind CLI/PostCSS/Vite/etc), this mapping comes from @import "basecoat-css";.

Basecoat defines design tokens like --accent and Tailwind generates utility classes like bg-accent from theme variables like --color-accent. This mapping bridges the two.

to_list

</>

pub fn to_list(theme: Theme) -> List(#(Token, String))

Convert a Theme into token-value pairs.