Background Color
Utilities for controlling an element's background colour.
On this page
styling/background_color_basic
A live demo of this example follows.
background_color_basic.dart
View source
Open demo
// Solid color
WDiv(className: 'bg-blue-500 h-12 w-12 rounded')
// With opacity
WDiv(className: 'bg-blue-500/50 h-12 w-12 rounded')
// White and Black
WDiv(className: 'bg-white h-12 w-12 rounded')
WDiv(className: 'bg-black h-12 w-12 rounded')
Basic Usage#
Use bg-{color}-{shade} to set the background colour of an element. Wind includes a comprehensive palette of colours (slate, gray, red, blue, etc.) with shades from 50 to 950.
WDiv(
className: 'bg-blue-500 p-4 rounded-lg',
child: WText('Blue Background', className: 'text-white'),
)
You can also use standalone colours like bg-white, bg-black, and bg-transparent.
WDiv(className: 'bg-white shadow-md p-6')
WDiv(className: 'bg-transparent border border-gray-300')
Quick Reference#
| Class | Description |
|---|---|
bg-{color}-{shade} |
Sets background colour (e.g., bg-red-500, bg-slate-900). |
bg-white |
Sets background to white. |
bg-black |
Sets background to black. |
bg-transparent |
Sets background to transparent. |
Opacity Modifier#
Control the opacity of a background colour using the slash modifier /{opacity}. The value ranges from 0 to 100.
styling/background_color_opacity
A live demo of this example follows.
background_color_opacity.dart
View source
Open demo
WDiv(className: 'bg-blue-500/100') // 100% (Default)
WDiv(className: 'bg-blue-500/75') // 75%
WDiv(className: 'bg-blue-500/50') // 50%
WDiv(className: 'bg-blue-500/25') // 25%
Responsive Design#
Change the background colour at specific breakpoints using standard responsive prefixes (sm:, md:, lg:, xl:, 2xl:).
// Red on mobile, Blue on medium screens and up
WDiv(className: 'bg-red-500 md:bg-blue-500 h-32 w-full')
Dark Mode#
Use the dark: prefix to apply a different background colour when dark mode is active.
WDiv(
className: 'bg-white dark:bg-slate-900 p-6 rounded-lg',
child: WText('Adaptive Background', className: 'text-gray-900 dark:text-white'),
)
Arbitrary Values#
If you need a specific colour not in your theme, use square bracket notation bg-[#RRGGBB].
WDiv(className: 'bg-[#1da1f2] text-white p-4') // Twitter Blue
WDiv(className: 'bg-[#ff0000]') // Bright Red
Three, four, six and eight hex digits are accepted, matching hexToColor. The four- and eight-digit forms carry alpha and it leads, because Flutter packs AARRGGBB where CSS writes RRGGBBAA.
WDiv(className: 'bg-[#f00]') // #FF0000, opaque
WDiv(className: 'bg-[#80ff0000]') // #FF0000 at alpha 0x80
WDiv(className: 'bg-[#8f00]') // #FF0000 at alpha 0x88
Customizing Theme#
To add your own colours, modify the colors map in WindThemeData.
WindThemeData(
colors: {
// Add a custom brand color
'brand': MaterialColor(0xFF1DA1F2, {500: Color(0xFF1DA1F2), 600: Color(0xFF1A91DA)}),
},
)
The map merges with the default palette, so the built-in colours stay available. Now you can use bg-brand-500 or bg-brand-600.