Customizing Shadows

Manage shadow sizes through WindTheme: pre-defined keys, arbitrary values, and runtime customization.

• Default Shadow Sizes
• Arbitrary Shadow Values
• Managing Shadows
• Related Documentation

WindTheme.setShadowSize('custom', 10);
double size = WindTheme.getShadowSize('xl'); // 12

Default Shadow Sizes

WindTheme includes default shadow sizes mapped to descriptive keys. Each value is an elevation in px.

For example:

• shadow-sm applies a shadow with an elevation of 1px.
• shadow-lg applies a shadow with an elevation of 8px.

Arbitrary Shadow Values

For sizes outside the scale, use the shadow-[value] syntax, where value is the desired elevation in px.

• shadow-[8] applies a shadow with an elevation of 8px.
• shadow-[20] applies a shadow with an elevation of 20px.

Managing Shadows

WindTheme provides methods to check, retrieve, customize, and remove shadow sizes at runtime.

// Check whether a shadow size exists
bool exists = WindTheme.hasShadowSize('lg');
print(exists); // Output: true

// Retrieve a shadow size value
double size = WindTheme.getShadowSize('xl');
print(size); // Output: 12

// Add a custom shadow size
WindTheme.setShadowSize('custom', 10);

// Update an existing shadow size
WindTheme.setShadowSize('lg', 6);

// Remove a shadow size
WindTheme.removeShadowSize('sm');

Related Documentation

• Shadow Utilities — apply shadows with shadow-*
• Rounded Corners — customize corner radii
• Colors — the palette behind surface styling