Skip to content
ModernUI A DaneTrades developer library

Colours

ModernUI uses ARGB colour values.

Most public examples use hexadecimal ARGB values like:

Reference excerpt
0xFF2563EB

The first byte is alpha. 0xFF means fully opaque.

Default palette

The default MuiTheme() palette is dark.

It is designed for chart-hosted panels and dark trading workspaces.

UI build fragment
MuiTheme dark;
g_ui.SetTheme(dark);

Light palette

Use MuiTheme::Light() for the light palette.

UI build fragment
MuiTheme light=MuiTheme::Light();
g_ui.SetTheme(light);

The light palette changes surfaces, text, borders, focus, toggles, menu tint, and semantic colours together.

Semantic colours

ModernUI has semantic colour roles for status and feedback.

Common semantic meanings:

Role Use it for
Success Ready, connected, complete
Warning Needs attention
Danger/Error Failed, destructive, invalid
Info Informational state
Neutral Normal/default state
Primary Important selected/action state

For StatusRow, pass a string variant:

UI build fragment
Mui::StatusRow(parent,"Status","Ready","success");
Mui::StatusRow(parent,"Connection","Demo","info");
Mui::StatusRow(parent,"Risk","Check","warning");

Custom semantic colours

MuiTheme exposes a simple semantic colour setter for success and warning.

UI build fragment
MuiTheme theme=MuiTheme::Light();
theme.SetSemanticColors(0xFF15803D,0xFFB7791F);
g_ui.SetTheme(theme);

This also sets the progress fill to the success colour.

Progress fill

You can set the progress fill independently.

UI build fragment
MuiTheme theme;
theme.SetProgressFill(0xFF34A06E);
g_ui.SetTheme(theme);

Per-control colour setters

Many controls expose colour setters.

Common names:

Setter Use it for
BgColor(...) Control background/surface override
BorderColor(...) Border override
TextColor(...) Text override
AccentColor(...) Primary/accent/fill override where supported
FillColor(...) Fill-specific controls such as progress/slider/chart fills

Example:

UI build fragment
MuiButtonAction *button=Mui::Button(parent,"Run",NULL,160.0,0.0);
button.AccentColor(0xFF2563EB);
button.TextColor(0xFFFFFFFF);

MuiSlider *slider=Mui::HorizontalSlider(parent,0.0,1.0,0.35,NULL,220.0,0.0);
slider.AccentColor(0xFF34A06E);

ARGB examples

Value Meaning
0xFF2563EB fully opaque blue
0xFF15803D fully opaque green
0xFFB7791F fully opaque amber
0xFFDC2626 fully opaque red
0x80FFFFFF 50 percent transparent white
0x00000000 fully transparent

When to use theme colours

Use theme colours for:

  • app-wide dark/light styling
  • consistent product screenshots
  • global density and typography
  • consistent semantic status styling

Use local colour setters for:

  • one highlighted button
  • one special slider
  • one chart series
  • a specific warning or accent
  • a demo screenshot accent

Colour discipline

A clean panel usually needs:

  • one accent colour
  • one success colour
  • one warning/danger colour
  • muted text
  • neutral surfaces
  • restrained borders

Avoid giving every control its own colour.

Common mistakes

Forgetting the alpha byte

0x2563EB is not the same as 0xFF2563EB.

Use full ARGB values in examples.

Overusing danger colours

Danger/red should mean a destructive or invalid state. Do not use it as decoration.

Styling everything locally

If every control needs the same override, use a theme-level approach or keep the default theme.

Related pages