Themes reference¶
Themes are Python classes.
Subclass Theme, set a typed Palette per color mode plus an optional Typography,
and pass an instance to Deck(theme=...):
from dataclasses import replace
from inkflow import Deck, Palette, Theme, Typography
class MyTheme(Theme):
dark = Palette(bg="#1e1e2e", accent="#cba6f7")
light = replace(Theme.light, accent="#8839ef")
typography = Typography(heading_font="Inter")
Deck(theme=MyTheme())
See the Themes guide for the full workflow, including how a theme ships its own layouts and fonts.
Theme ¶
Base class for a deck theme. Subclass it and set class attributes.
from dataclasses import replace
class Nord(Theme):
mode = ColorMode.DARK
dark = replace(Theme.dark, bg="#2e3440", accent="#88c0d0")
light = replace(Theme.light, accent="#5e81ac")
typography = Typography(heading_font="Fraunces")
Assets live under asset_dir (a theme/ dir next to the module by default;
set asset_root to relocate).
name
class-attribute
instance-attribute
¶
Display name. Defaults to the subclass's class name.
mode
class-attribute
instance-attribute
¶
Color mode a deck gets when it sets none of its own.
font_size
class-attribute
instance-attribute
¶
Base font size (px) for zone content, unless the deck or slide overrides it.
transition
class-attribute
instance-attribute
¶
Slide transition a deck gets when it sets none of its own.
overlays
class-attribute
instance-attribute
¶
Chrome composited on top of every slide, unless the deck or slide overrides
it. Lets a theme ship its own branding, resolved against the theme's
overlays/ directory.
dark
class-attribute
instance-attribute
¶
Colors for dark mode. Defaults to the neutral dark floor.
light
class-attribute
instance-attribute
¶
Colors for light mode. Defaults to the neutral light floor.
typography
class-attribute
instance-attribute
¶
Font families and text metrics, shared by both color modes.
asset_root
class-attribute
¶
Asset subdirectory, relative to the module that defines the theme.
styles_path
property
¶
Where this theme's styles.css would live, whether or not it exists.
asset_dir ¶
Directory holding this theme's assets, derived from its module's file.
render_tokens_css ¶
Emit the :root and :root[data-theme="light"] token blocks.
These define every --inkflow-* token; there is no CSS floor to fall back
to. Typography and the dark palette go in :root, the light palette in the
data-theme block.
Palette
dataclass
¶
A theme's color tokens for one color mode.
Field defaults are the neutral dark floor, so Palette() is a complete,
usable palette and a subclass overrides only the tokens it names. For light, a
theme overrides off Theme.light (see Theme). Semantic tokens first, then the
named accent palette (consumed by syntax highlighting and the inkflow-fill-*
/ inkflow-stroke-* utilities).
Each field maps to a CSS custom property by kebab-casing its name, so
text_muted is available to stylesheets and layouts as --inkflow-text-muted.
text_muted
class-attribute
instance-attribute
¶
Secondary, de-emphasized text.
accent_fg
class-attribute
instance-attribute
¶
Foreground on accent-colored backgrounds.
red
class-attribute
instance-attribute
¶
Named color: .inkflow-fill-red, .inkflow-stroke-red.
orange
class-attribute
instance-attribute
¶
Named color: .inkflow-fill-orange, .inkflow-stroke-orange.
yellow
class-attribute
instance-attribute
¶
Named color: .inkflow-fill-yellow, .inkflow-stroke-yellow.
green
class-attribute
instance-attribute
¶
Named color: .inkflow-fill-green, .inkflow-stroke-green.
teal
class-attribute
instance-attribute
¶
Named color: .inkflow-fill-teal, .inkflow-stroke-teal.
blue
class-attribute
instance-attribute
¶
Named color: .inkflow-fill-blue, .inkflow-stroke-blue.
purple
class-attribute
instance-attribute
¶
Named color: .inkflow-fill-purple, .inkflow-stroke-purple.
pink
class-attribute
instance-attribute
¶
Named color: .inkflow-fill-pink, .inkflow-stroke-pink.
grey
class-attribute
instance-attribute
¶
Named color: .inkflow-fill-grey, .inkflow-stroke-grey.
Typography
dataclass
¶
A theme's typography tokens. Heading sizes are fixed in the contract.
Fields map to CSS custom properties the same way Palette's do, so body_font
is available as --inkflow-body-font. Font values are ordinary font-family
values: ship the file in the theme's fonts/ directory to have it embedded.