Color Helpers

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#

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
}