Styles & Themes

TUI.zig provides a robust styling system.

Styles

A Style defines the visual appearance of a cell:

const style = tui.Style{
    .fg = tui.Color.red,
    .bg = tui.Color.black,
    .bold = true,
};

Method chaining is supported:

const active = tui.Style.default
    .setFg(.green)
    .bold()
    .underline();

Themes

A Theme is a collection of styles for common UI elements.

pub const Theme = struct {
    primary: Color,
    secondary: Color,
    accent: Color,
    background: Color,
    surface: Color,
    foreground: Color,
    muted: Color,
    error_color: Color,
    // ...
};

Built-in Themes

Several themes are included:

• Theme.default_theme
• Theme.dark
• Theme.light
• Theme.nord
• Theme.dracula
• Theme.gruvbox

Using a Theme

Set the theme when initializing the App:

var app = try tui.App.init(.{
    .theme = tui.Theme.nord,
});