Skip to content

struct

Theme

pub struct Theme {
    /* private fields */
}

Colors and fonts available to utilities.

Methods

with_color

pub fn with_color(self, name: &str, hex: &str) -> Theme

Add a single named color (bg-brand, text-brand/50, …).

with_scale

pub fn with_scale(self, name: &str, base: &str) -> Theme

Add a full 50–950 scale generated from a base (500) color.

with_font

pub fn with_font(self, name: &str, stack: &str) -> Theme

Add (or replace) a font family (font-<name>): a CSS stack ("\"Inter\", sans-serif"), or a font file the site serves ("/fonts/Inter.woff2", as [Theme::with_font_file]).

with_font_file

pub fn with_font_file(self, name: &str, src: &str) -> Theme

A font family (font-<name>) from a file the site serves, such as "/fonts/Inter-Bold.woff2" (WOFF2, WOFF, TTF or OTF). Call it once per file of a family: the weight and style come from the file's name (Bold, SemiBoldItalic …), and a name without one (a variable font) covers every weight. [Theme::with_font_face] sets them.

with_font_face

pub fn with_font_face(self, name: &str, src: &str, weight: &str, style: &str) -> Theme

[Theme::with_font_file] with the face's weight ("700", "100 900") and style ("normal", "italic").

font_face_css

pub fn font_face_css(&self, name: &str) -> String

The @font-face rules for family name's files (one per line).

with_base

pub fn with_base(self, selector: &str, classes: &str) -> Theme

Style every element matching selector with Tailwind classes, as a site's own CSS would: .with_base("a", "text-brand-700 hover:underline"). The rules keep the selector's specificity (:is(a)): they override Tailwind's preflight, and a class on an element overrides a plain tag selector. Calls for the same selector add up.

base

pub fn base(&self) -> &[(String, String)]

The base styles: (selector, classes).

font

pub fn font(&self, name: &str) -> Option<String>

The font stack for font name (sans, mono, or one the theme adds), if there is one.

flippable

pub fn flippable(self) -> Theme

Emit scale colors (and white) as var(--c-<name>, <hex>), so the .weft-flip class from [Theme::flip_css] can invert the palette for a light/dark toggle. .theme-locked subtrees keep the original colors.

dark_variants

pub fn dark_variants(self) -> Theme

Light and dark come from dark: classes, which follow the scheme the page shows (data-scheme on <html>) instead of the system's media query, so the theme toggle switches them. The page starts in the visitor's system scheme. The palette isn't flipped: this turns [Theme::flippable] off.

has_dark_variants

pub fn has_dark_variants(&self) -> bool

Whether dark: follows the page's scheme (see [Theme::dark_variants]).

is_flippable

pub fn is_flippable(&self) -> bool

Whether the theme can flip between light and dark (see [Theme::flip_css]).

css_color

pub fn css_color(&self, name: &str) -> Option<String>

A color as it should appear in CSS: [Theme::color], wrapped in its custom property when the theme is flippable.

flip_css

pub fn flip_css(&self) -> String

The flipped palette (every scale reversed, white → near-black) under .weft-flip, and its reset under .theme-locked — and in any element directly holding an absolutely positioned shader backdrop, whose text is designed against the shader (mark a backdrop weft-flip-hide to hide it in the flipped scheme instead). Empty unless the theme is flippable.

color

pub fn color(&self, name: &str) -> Option<String>

Resolve red-500, white, brand, current, …

Trait implementations