Guides/Colors & gradients

Colors & gradients

dart_tui speaks 24-bit true color. Paint per-character gradients across any number of stops, fill gradient backgrounds, and branch your palette on the terminal's detected background.

colors & gradients · dart_tui
Colors & gradients demo

Gradient text & backgrounds

dart
// Per-character true-color gradient across any number of colors
final rainbow = gradientText('dart_tui', [
  const RgbColor(203, 166, 247), // mauve
  const RgbColor(116, 199, 236), // sky
  const RgbColor(166, 227, 161), // green
]);

// Gradient background fill
final banner = gradientBackground('  Welcome!  ', [
  const RgbColor(30, 30, 46),
  const RgbColor(49, 50, 68),
], foreground: const Style(foregroundRgb: RgbColor(205, 214, 244)));

Light / dark background detection

Program sends an OSC 11 query at startup; the reply arrives automatically as BackgroundColorMsg in your update(). Branch your styles with isDarkRgb():

dart
case BackgroundColorMsg(:final rgb):
  final dark = isDarkRgb(rgb);
  return (MyModel(darkTheme: dark), null);
CompleteColor lets you specify one color per profile (true-color / 256 / ANSI) so output degrades gracefully on limited terminals.

Related