Color Helpers

• Resolving Colors
• Hex Colors
• Opacity Handling
• Material Color Inversion
• Context Extensions

Wind provides a set of utility functions and extensions to help you resolve and manipulate colors programmatically, staying consistent with your theme.

Resolving Colors

The wColor function is the primary way to resolve colors from the active WindTheme. It handles color names, shades, and even automatic dark mode overrides.

Color? wColor(
  BuildContext context,
  String colorName, {
  int shade = 500,
  String? darkColorName,
  int darkShade = 500,
})

Basic Usage

You can resolve a color by its name and shade:

// Resolves blue-500 from the theme
final primary = wColor(context, 'blue');

// Resolves red-600
final error = wColor(context, 'red', shade: 600);

// Resolves using color-shade string format
final danger = wColor(context, 'rose-500');

Dark Mode Overrides

You can specify a different color or shade to be used when the theme is in dark mode:

final background = wColor(
  context,
  'slate-50',
  darkColorName: 'slate-900',
);

Hex Colors

The hexToColor function converts various hex string formats into Flutter Color objects.

Color hexToColor(String code)

Supported Formats

[!NOTE] The hash (#) prefix is optional. hexToColor('FF0000') works identically to hexToColor('#FF0000').

Opacity Handling

Wind includes utilities for parsing Tailwind-style opacity modifiers and applying them to colors.

Parsing Opacity

The parseColorOpacity function splits a class string into the color part and its opacity factor.

// Returns (colorPart: 'blue-500', opacity: 0.5)
final result = parseColorOpacity('blue-500/50');

// Supports arbitrary values: (colorPart: 'red-500', opacity: 0.75)
final arbitrary = parseColorOpacity('red-500/[75]');

Applying Opacity

Use applyOpacity to programmatically adjust the alpha channel of any Color.

Color applyOpacity(Color color, double opacity)

final semiTransparent = applyOpacity(Colors.blue, 0.5);

Material Color Inversion

The invertMaterialColor utility is used by the theme engine to automatically generate dark mode variants by swapping shades (e.g., 50 ↔ 900, 100 ↔ 800).

MaterialColor invertMaterialColor(MaterialColor color)

Context Extensions

For more ergonomic access, Wind extends BuildContext with several color-related shortcuts.

context.windColors

Returns the full color map from the current WindThemeData.

final redPalette = context.windColors['red'];

context.wColorExt

A shortcut for calling wColor(context, ...).

final primary = context.wColorExt('blue', shade: 600);

context.windIsDark

Returns a boolean indicating if the current theme brightness is Brightness.dark.

if (context.windIsDark) {
  // Do something specific for dark mode
}