Background Color

Apply background colors to widgets using predefined theme colors or arbitrary hex values.

• Basic Usage
• Quick Reference
• Arbitrary Values
• Responsive Design
• Dark Mode
• Customizing Theme
• Related Documentation

WContainer(
  className: 'bg-blue-500 w-64 h-64 alignment-center',
  child: WText('Blue Background', className: 'text-white'),
)

Basic Usage

Use the bg- prefix followed by a color name and optional shade to apply a background color:

WContainer(
  className: 'bg-blue-500 p-4',
  child: WText('Blue background', className: 'text-white'),
)

WContainer(
  className: 'bg-gray-100 dark:bg-gray-800 p-4',
  child: WText('Light/dark aware', className: 'text-gray-900 dark:text-white'),
)

Quick Reference

Syntax

bg-[color]-[shade]
bg-[color]

• color: the color name (e.g., red, blue, gray). Omitting the shade defaults to 500.
• shade: the intensity — 50, 100, 200, 300, 400, 500, 600, 700, 800, or 900.

Available Colors

Each color supports shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.

Arbitrary Values

Apply any color with a hex code using bracket notation:

bg-[#rrggbb]

WContainer(
  className: 'bg-[#1abc9c] w-64 h-64 alignment-center',
  child: WText('Custom Color Background', className: 'text-white'),
)

Responsive Design

Prefix any bg- class with a breakpoint to apply it only above that screen width:

WContainer(
  className: 'bg-gray-100 md:bg-blue-500 lg:bg-green-500 p-4',
  child: WText('Responsive background'),
)

Available breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px).

Dark Mode

Pair every light background with a dark: variant for automatic dark mode support:

WContainer(
  className: 'bg-white dark:bg-gray-900 p-4',
  child: WText(
    'Dark-mode aware container',
    className: 'text-gray-900 dark:text-white',
  ),
)

Wind applies dark-mode variants automatically when WindTheme.setType(Brightness.dark) is active.

Customizing Theme

Add custom colors to the theme with WindTheme.addColor:

WindTheme.addColor('brand', MaterialColor(0xFF6200EE, {
  50: Color(0xFFEDE7F6),
  100: Color(0xFFD1C4E9),
  500: Color(0xFF6200EE),
  900: Color(0xFF311B92),
}));

WContainer(className: 'bg-brand-500 p-4', child: WText('Brand color'))

See Customizing Colors for the full API.

Related Documentation

• Customizing Colors — add and override palette colors.
• Border Color — apply color to widget borders.
• Text Color — color utility for text.
• Dark Mode — how dark-mode inversion works in Wind.