Styling

Rezi provides a comprehensive styling system for terminal UIs, including direct style props, semantic themes, icons, and focus indicators.

Overview

Rezi styling works at two levels:

Direct Styles : Apply colors and text attributes directly to widgets using RGB values and style objects.

Semantic Themes : Use predefined theme tokens for consistent colors across your application.

Quick Example

import { ui, rgb, darkTheme } from "@rezi-ui/core";
import { createNodeApp } from "@rezi-ui/node";

const app = createNodeApp({
    initialState: {},
});

app.view(() =>
  ui.column({ p: 1, gap: 1 }, [
    // Direct RGB styling
    ui.text("Error!", { style: { fg: rgb(255, 100, 100), bold: true } }),

    // Theme-aware styling
    ui.box({ title: "Panel", border: "rounded", p: 1 }, [
      ui.text("Content here"),
    ]),
  ])
);

// Apply a built-in theme
app.setTheme(darkTheme);

await app.start();

Style Properties

Every widget that displays text supports a style prop:

type TextStyle = Readonly<{
  fg?: Rgb;              // Foreground (text) color
  bg?: Rgb;              // Background color
  bold?: boolean;        // Bold text
  dim?: boolean;         // Dim/faint text
  italic?: boolean;      // Italic text
  underline?: boolean;   // Underlined text
  inverse?: boolean;     // Swap fg/bg colors
  strikethrough?: boolean; // Strikethrough text
  overline?: boolean;    // Overline text
  blink?: boolean;       // Blinking text
  underlineStyle?: "none" | "straight" | "double" | "curly" | "dotted" | "dashed";
  underlineColor?: string | ThemeColor;
}>;

RGB Colors

Create colors with the rgb() helper:

import { rgb } from "@rezi-ui/core";

const red = rgb(255, 0, 0);
const green = rgb(0, 255, 0);
const customBlue = rgb(100, 150, 255);

ui.text("Colored text", { style: { fg: red, bg: customBlue } });

Text Attributes

ui.text("Bold text", { style: { bold: true } });
ui.text("Italic text", { style: { italic: true } });
ui.text("Underlined", { style: { underline: true } });
ui.text("Curly underline", {
  style: { underlineStyle: "curly", underlineColor: "#ff6b6b" },
});
ui.text("Dim text", { style: { dim: true } });
ui.text("Struck through", { style: { strikethrough: true } });
ui.text("Overlined", { style: { overline: true } });
ui.text("Blinking", { style: { blink: true } });
ui.text("Inverted", { style: { inverse: true } });

Graphics Styling

Graphics widgets use color strings and rendering protocol options in addition to TextStyle.

Widget	Styling knobs
`link`	`style`, focus state, theme primary/underline defaults
`canvas`	draw colors (`#rrggbb` or theme tokens), `blitter` quality
`image`	`fit`, `protocol`, `zLayer`, `imageId` caching
`lineChart` / `sparkline` / `barChart`	series colors, `blitter`, optional `highRes` rendering

Use lower-resolution blitters (quadrant, halfblock) for speed; use braille for maximum detail.

Built-in Themes

Rezi includes six built-in themes:

Theme	Description
`darkTheme`	Ayu-inspired dark theme with orange accents
`lightTheme`	Clean light theme with blue accents
`dimmedTheme`	Reduced contrast dark theme
`highContrastTheme`	WCAG AAA compliant theme
`nordTheme`	Nord color palette
`draculaTheme`	Dracula color palette

Applying Themes

import { darkTheme, lightTheme, nordTheme } from "@rezi-ui/core";

// Set theme at startup
const app = createNodeApp({
    initialState: {},
  theme: darkTheme,
});

// Or switch themes at runtime
app.setTheme(nordTheme);

Semantic Color Tokens

Themes use semantic color tokens for consistent styling:

Surface Colors (`bg.*`)

bg.base - Main background
bg.elevated - Raised surfaces (cards, modals)
bg.overlay - Overlay surfaces (dropdowns, tooltips)
bg.subtle - Subtle backgrounds (hover states)

Foreground Colors (`fg.*`)

fg.primary - Primary text
fg.secondary - Secondary/less important text
fg.muted - Muted text (disabled, placeholders)
fg.inverse - Text on accent backgrounds

Accent Colors (`accent.*`)

accent.primary - Primary accent (actions, focus)
accent.secondary - Secondary accent (links, highlights)
accent.tertiary - Subtle accents

Semantic Colors

success - Success states
warning - Warning states
error - Error states
info - Informational states

Diagnostic Colors (`diagnostic.*`)

diagnostic.error - Diagnostic error underline/color
diagnostic.warning - Diagnostic warning underline/color
diagnostic.info - Diagnostic info underline/color
diagnostic.hint - Diagnostic hint underline/color

State Colors

focus.ring - Focus ring color
focus.bg - Focus background
selected.bg - Selected item background
selected.fg - Selected item foreground
disabled.fg - Disabled foreground
disabled.bg - Disabled background

Border Colors (`border.*`)

border.subtle - Subtle borders (dividers)
border.default - Default borders
border.strong - Emphasized borders

Border Styles

Box widgets support various border styles:

ui.box({ border: "single" }, [...])   // Single line (default)
ui.box({ border: "double" }, [...])   // Double line
ui.box({ border: "rounded" }, [...])  // Rounded corners
ui.box({ border: "heavy" }, [...])    // Heavy/thick line
ui.box({ border: "dashed" }, [...])   // Dashed line
ui.box({ border: "heavy-dashed" }, [...]) // Heavy dashed line
ui.box({ border: "none" }, [...])     // No border

Shadow Effects

Add depth with box shadows:

// Simple shadow
ui.box({ shadow: true }, [...])

// Custom shadow
ui.box({
  shadow: {
    offsetX: 2,
    offsetY: 1,
    density: "dense"  // "light" | "medium" | "dense"
  }
}, [...])

Spacing

Use the spacing scale for consistent layouts:

Key	Value	Use Case
`"none"`	0	No spacing
`"xs"`	1	Tight spacing
`"sm"`	1	Compact elements
`"md"`	2	Default spacing
`"lg"`	3	Sections
`"xl"`	4	Major sections
`"2xl"`	6	Page margins

ui.box({ p: "md", border: "rounded" }, [
  ui.column({ gap: "sm" }, [...]),
])
ui.column({ py: "lg", px: "xl" }, [...])

Learn More

Style Props Reference - Complete style property documentation
Theme Guide - Creating and customizing themes
Icons - Icon system and available icons
Focus Styles - Focus ring and indicator customization

On this page