Colors Not Updating

When you change a color property in StudioWeb but the DDO doesn’t visually update, follow these steps.

Symptoms

  • Changed a color in the Property Inspector but the DDO still shows the old color
  • Color picker shows the new value but the canvas render doesn’t match
  • Value text on meters shows wrong color
  • Background/foreground colors don’t apply

Common Causes and Fixes

1. Wrong Color Property

Different DDOs use different color properties for different parts:

Meters (Arc, Gauge, FSL, MSL):

PropertyControls
Meter ColorPrimary meter body / fill bar
Face ColorBackground face
Needle ColorNeedle or pointer
Scale ColorTick marks and scale labels
Title ColorTitle text
Value FG ColorNumeric value text color
Value BG ColorNumeric value text background

If you’re changing meterColor but expecting the value text to change, you need valueFgColor instead.

2. AFD Colors vs DFD Colors

DDOs have two sets of colors:

  • AFD Foreground/Background (in Options section) — general object colors
  • DFD colors (type-specific) — individual element colors (needle, face, scale, etc.)

DFD colors override AFD colors for specific elements. If a DFD color is set, changing the AFD color won’t affect that element.

3. Browser Cache

The browser may be rendering a cached version:

  1. Hard refresh: Ctrl+Shift+R
  2. Clear cache: DevTools → Application → Clear storage

4. Dev Server Stale

If you modified source code, the Vite dev server should hot-reload. If it doesn’t:

  1. Check the terminal running npm run dev for errors
  2. Stop and restart the dev server
  3. Hard refresh the browser

5. Color Format

StudioWeb accepts standard CSS color formats:

FormatExampleValid
Hex#ff0000✅
Hex short#f00✅
RGBrgb(255, 0, 0)✅
Namedred✅
Invalidff0000 (no #)❌

Ensure your color value includes the # prefix for hex colors.

6. Threshold Colors Overriding

Some DDOs (meters, bars) use threshold-based coloring where the displayed color depends on the current value:

  • If Color Type is set, the meter color changes based on where the value falls relative to threshold limits
  • The threshold color may override the static color you set

Check the threshold/limits configuration if colors change unexpectedly at runtime.

Verifying the Fix

After changing a color:

  1. Click away from the DDO (deselect)
  2. Re-select the DDO
  3. Check that the Property Inspector shows your new color value
  4. If the store has the correct value but the render is wrong, the issue is in the renderer — file a bug

See Also