Text Color
Apply color to text using predefined palette classes or arbitrary hex values.
On this page
typography/text_color
The live demo is not available for this example.
text_color.dart
View source
WText('Red text', className: 'text-red-500 dark:text-red-300');
WText('Muted label', className: 'text-gray-500 dark:text-gray-400');
WText('Custom color', className: 'text-[#1DA1F2]');
Basic Usage#
Apply text color with the text- prefix followed by a color name and shade:
WText(
'Primary heading',
className: 'text-gray-900 dark:text-gray-100 font-bold text-2xl',
);
WText(
'Supporting body text',
className: 'text-gray-600 dark:text-gray-400 text-base',
);
Quick Reference#
The full palette is available in every shade from 50 to 900. Use the pattern text-{color}-{shade}:
| Pattern | Example class | Description |
|---|---|---|
text-{color} |
text-blue |
Color at default shade 500. |
text-{color}-{shade} |
text-blue-600 |
Color at a specific shade (50–900). |
text-[#rrggbb] |
text-[#1DA1F2] |
Arbitrary hex color. |
Available color names: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, black, white, primary, secondary.
Available shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.
Dark Mode#
Wind automatically inverts color shades when dark mode is active. Add a dark: prefix variant to provide an explicit color for dark contexts:
WText(
'Adaptive text',
className: 'text-gray-900 dark:text-gray-100',
);
WText(
'Accent label',
className: 'text-blue-600 dark:text-blue-400',
);
WText(
'Error message',
className: 'text-red-600 dark:text-red-400',
);
See Dark Mode for how color inversion works.
Arbitrary Values#
Set any color not in the predefined palette using a hex code in brackets:
WText('Brand color', className: 'text-[#1DA1F2]');
WText('Custom pink', className: 'text-[#FF00FF]');
Related Documentation#
- Text Decoration — underline, overline, and strikethrough.
- Font Size — set text size.
- Font Weight — control text thickness.
- Dark Mode — automatic color inversion.
- Customizing Colors — add or override palette colors.
- WText — the primary text widget.