theme
Theme format
A theme is a small text document with up to four blocks: colors, metrics, shaders, and widget_shaders. Every block is optional and any block may set only some of its keys — unset keys keep the active theme's value, so a theme can be a tiny override or a full repaint. Unknown keys are ignored.
Colors are hex literals: 0xRRGGBB for an opaque color, 0xRRGGBBAA where a shader wants alpha.
Load a theme file and apply it:
local theme = my_dir:read("sunset.theme"):theme()
datumhue.theme.pin(theme)
colors 68
Each line is a token name followed by an 0xRRGGBB hex color:
colors {
panel_background 0x343f44
accent_primary 0xa7c080
}
The Dark / Light columns are the built-in Everforest values each token resolves to when a theme leaves it unset.
| Token | Group | Dark | Light | Description |
|---|---|---|---|---|
panel_background | Surfaces | 0x343f44 | 0xf4f0d9 | Panel / card fill. |
panel_border | Surfaces | 0x475258 | 0xe6e2cc | Panel / card border. |
surface_sunken | Surfaces | 0x2d353b | 0xfdf6e3 | Recessed surface: wells, insets, trays. |
surface_raised | Surfaces | 0x4f585e | 0xe0dcc7 | Raised surface: headers; carries text_primary only. |
surface_overlay | Surfaces | 0x56635f | 0xbdc3af | A non-text overlay. |
selection_background | Surfaces | 0x543a48 | 0xeaedc8 | Selection / row-highlight background. |
focus_ring | Surfaces | 0xb1cb8a | 0x5d6b00 | Keyboard-focus ring outline. |
button_normal | Buttons | 0x3d484d | 0xefebd4 | Button rest fill. |
button_hover | Buttons | 0x475258 | 0xe6e2cc | Button hover fill. |
button_pressed | Buttons | 0x343f44 | 0xf4f0d9 | Button pressed fill. |
button_border | Buttons | 0x9ea8af | 0x817d6a | Button edge, while the button takes the theme's fills. |
button_text | Buttons | 0xd8cbae | 0x55636b | Button label text. |
button_disabled | Buttons | 0x2d353b | 0xfdf6e3 | Disabled button fill. |
button_text_disabled | Buttons | 0x7a8478 | 0xa6b0a0 | Disabled button label text. |
checkbox_background | Checkbox | 0x2d353b | 0xfdf6e3 | Checkbox box fill when unchecked. |
checkbox_background_checked | Checkbox | 0xb1cb8a | 0x5d6b00 | Checkbox box fill when checked. |
checkbox_border | Checkbox | 0x89939a | 0x8b8774 | Checkbox box border. |
checkbox_mark | Checkbox | 0x2d353b | 0xfdf6e3 | Checkbox mark drawn inside when checked. |
slider_track | Slider | 0x2d353b | 0xfdf6e3 | Slider track groove. |
slider_fill | Slider | 0xb1cb8a | 0x5d6b00 | Slider filled portion left of the thumb. |
slider_thumb | Slider | 0x7f898f | 0x8e8a77 | Slider draggable thumb. |
radio_border | Radio | 0xb8c6bc | 0x5c675a | Radio option circle border (unselected). |
radio_mark | Radio | 0xb1cb8a | 0x5d6b00 | Radio inner dot + selected circle border. |
scrollbar_track | Scrollbar | 0x2d353b | 0xfdf6e3 | Scrollbar track gutter. |
scrollbar_thumb | Scrollbar | 0x4f585e | 0xe0dcc7 | Scrollbar draggable thumb. |
list_row_selected | List | 0x425047 | 0xf0f1d2 | Selected list row background. |
list_row_active | List | 0xb1cb8a | 0x5d6b00 | Active (focused) list row outline. |
input_background | Text Input | 0x2d353b | 0xfdf6e3 | Text input field background. |
input_border | Text Input | 0x4f585e | 0xe0dcc7 | Text input field border. |
input_text | Text Input | 0xd8cbae | 0x55636b | Entered text. |
input_placeholder | Text Input | 0x919f95 | 0x697467 | Placeholder text shown when empty. |
input_cursor | Text Input | 0xb1cb8a | 0x5d6b00 | Text input caret. |
popover_background | Overlay | 0x2d353b | 0xfdf6e3 | Popover panel background. |
popover_border | Overlay | 0x56635f | 0xbdc3af | Popover panel border. |
menu_background | Overlay | 0x3d484d | 0xefebd4 | Dropdown menu popup background. |
menu_border | Overlay | 0x56635f | 0xbdc3af | Dropdown menu popup border. |
text_primary | Text | 0xd8cbae | 0x55636b | Primary text. |
text_secondary | Text | 0xb8c6bc | 0x5c675a | Secondary / muted text. |
text_disabled | Text | 0x7a8478 | 0xa6b0a0 | Disabled / faint text. |
accent_primary | Accents | 0xb1cb8a | 0x5d6b00 | Primary accent (brand green). |
accent_secondary | Accents | 0x93d0a1 | 0x007351 | Secondary accent. |
accent_data | Accents | 0xffb08c | 0xa24b00 | Data-point accent (brand orange). |
accent_tertiary | Accents | 0xefb0ce | 0xa93688 | Tertiary accent. |
success | Status | 0xb1cb8a | 0x5d6b00 | Success foreground. |
warning | Status | 0xdebf81 | 0x845d00 | Warning foreground. |
error | Status | 0xffadac | 0xc51d28 | Error foreground. |
info | Status | 0x91cec5 | 0x006b99 | Info foreground. |
success_background | Status surfaces | 0x425047 | 0xf0f1d2 | Muted success banner surface. |
warning_background | Status surfaces | 0x4d4c43 | 0xfaedcd | Muted warning banner surface. |
error_background | Status surfaces | 0x514045 | 0xfde3da | Muted error banner surface. |
info_background | Status surfaces | 0x3a515d | 0xe9f0e9 | Muted info banner surface. |
accent_tertiary_background | Status surfaces | 0x4a444e | 0xfae8e2 | Muted tertiary-accent surface. |
statusline_primary | Status bar | 0xa7c080 | 0x93b259 | Status bar, primary state. |
statusline_secondary | Status bar | 0xd3c6aa | 0x708089 | Status bar, secondary state. |
statusline_tertiary | Status bar | 0xe67e80 | 0xe66868 | Status bar, tertiary state. |
chart_axis | Chart | 0xb8c6bc | 0x5c675a | Axis / tick lines. |
chart_grid | Chart | 0x475258 | 0xe6e2cc | Gridlines. |
chart_axis_label | Chart | 0x9da9a0 | 0x5f6e5f | Tick labels, chart text, and marks given no color. |
chart_background | Chart | 0x232a2e | 0xefebd4 | Plot-area background. |
chart_legend_background | Chart | 0x2d353b | 0xfdf6e3 | Legend backing (translucent). |
chart_legend_border | Chart | 0x475258 | 0xe6e2cc | Legend border. |
chart_legend_text | Chart | 0xd8cbae | 0x55636b | Legend text. |
syntax_keyword | Syntax | 0xffadac | 0xc51d28 | Keywords. |
syntax_string | Syntax | 0xb1cb8a | 0x5d6b00 | String literals. |
syntax_number | Syntax | 0xefb0ce | 0xa93688 | Number literals. |
syntax_comment | Syntax | 0xb8c6bc | 0x5c675a | Comments. |
syntax_function | Syntax | 0x91cec5 | 0x006b99 | A name being called. |
syntax_builtin | Syntax | 0x93d0a1 | 0x007351 | The engine's own names. |
metrics 20
Each line is a token name followed by one number, in pixels:
metrics {
padding_medium 10
border_radius 6
}
A token the theme leaves out takes the default for the app's control density (datumhue.theme.density); a value the theme sets applies at every density.
| Token | Group | Standard | Touch | Description |
|---|---|---|---|---|
padding_small | Spacing | 4 px | 8 px | Small inner padding. |
padding_medium | Spacing | 8 px | 12 px | Medium inner padding. |
padding_large | Spacing | 16 px | 20 px | Large inner padding. |
input_padding_vertical | Spacing | 6 px | 12 px | Vertical padding inside a text input field. |
gap_small | Spacing | 4 px | 8 px | Small gap between items. |
gap_medium | Spacing | 8 px | 12 px | Medium gap between items. |
gap_large | Spacing | 16 px | 20 px | Large gap between items. |
border_width | Borders | 1 px | 1 px | Default border width. |
border_radius | Borders | 4 px | 8 px | Default corner radius. |
font_size_small | Typography | 12 px | 14 px | Small font size. |
font_size_normal | Typography | 14 px | 16 px | Normal font size. |
font_size_large | Typography | 16 px | 18 px | Large font size. |
font_size_heading | Typography | 20 px | 22 px | Heading / section-title font size. |
font_size_title | Typography | 24 px | 26 px | Dialog and modal title font size. |
font_size_display | Typography | 28 px | 32 px | Largest display font size (top-level document headings, hero text). |
font_weight_normal | Typography | 500 wght | 500 wght | Body text weight on the variable axis. |
font_weight_heading | Typography | 600 wght | 600 wght | Heading and title weight on the variable axis. |
button_min_width | Buttons | 80 px | 96 px | Minimum button width. |
button_min_height | Buttons | 32 px | 48 px | Minimum button height. |
scrollbar_width | Scrollbar | 16 px | 24 px | Room a scroll bar takes at a scrolling element's edge, over its padding and content. Pad that edge at least this much to keep content clear of the bar. |
shaders 14
Each child of shaders is a named GPU material. type picks one of the shader kinds below; color1 / color2 are 0xRRGGBBAA hex (some kinds read the alpha), param1 / param2 are numbers whose meaning depends on the type, and animated (a #true / #false flag) freezes or runs the time-driven kinds. An optional fallback (0xRRGGBB) is the solid color shown if the material can't render; it defaults to color1.
shaders {
frosted {
type "glassmorphism"
color1 0xffffff40
color2 0xa7c080ff
param1 0.5
param2 0.2
}
}
The parameter columns name what each slot means for that type; a blank cell means the type ignores that slot. The Anim column marks the time-driven kinds.
| Type | Anim | color1 | color2 | param1 | param2 | Description |
|---|---|---|---|---|---|---|
solid | Fill color | Flat fill. | ||||
gradient | Start color | End color | Angle in radians (0 = left-to-right) | Linear gradient between two colors. | ||
radial_gradient | Inner / center color | Outer / edge color | Center offset X (UV; 0 = centered) | Center offset Y (UV; 0 = centered) | Radial gradient from a center point. | |
animated_glow | yes | Base color | Glow color | Glow intensity | Pulse speed | Base color under a pulsing glow. |
glassmorphism | Glass tint (alpha = transparency) | Border highlight | Border width (0-1) | Noise intensity | Frosted-glass panel with a highlighted border. | |
scanline | yes | Base color (alpha = scanline darkness) | Beam tint | Scanline density | Beam sweep speed | CRT scanlines with a moving phosphor beam. |
noise | Base color | Noise tint | Noise intensity | Noise scale (higher = finer grain) | Static value noise over a base color. | |
border | Border color | Fill color | Border width (UV) | Corner radius (UV) | Rounded border over a fill. | |
checkerboard | First color | Second color | Tile count across | Two-color checkerboard. | ||
stripe | Stripe color | Gap color | Stripe count | Angle in radians (0 = horizontal) | Parallel stripes. | |
dissolve | Visible color | Edge glow color | Threshold (0 = visible, 1 = dissolved) | Edge width | Threshold burn / dissolve with a glowing edge. | |
outline | Fill color | Outline color | Outline width (0-1) | Glow falloff | Filled shape with a glowing outline. | |
wave | yes | Base color | Blend color | Wave amplitude | Wave frequency | Time-distorted wave blend between two colors. |
color_ramp | Start color | End color | 0 = linear, 1 = stepped | Step count (when stepped) | Color ramp, linear or stepped. |
widget_shaders 2
Each line binds a widget slot to a material defined in the shaders block, so widgets of that kind paint with the material unless they set their own. Slots left unset use a solid fill:
widget_shaders {
button "frosted"
panel "frosted"
}
| Slot | Description |
|---|---|
button | Default shader material for buttons. |
panel | Default shader material for panels. |