Skip to content
ModernUI A DaneTrades developer library

Light and Dark Themes

ModernUI supports a dark default theme and a light theme.

The dark theme is the standard chart-hosted look. The light theme is useful for brighter workspaces, screenshots, and users who prefer a light UI.

Dark theme

The default constructor creates the dark theme.

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

Use the dark theme for:

  • most chart panels
  • compact trade-style tools
  • dark MT5 chart templates
  • high-contrast dashboards
  • default product screenshots

Light theme

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

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

Use the light theme for:

  • light MT5 chart templates
  • documentation screenshots
  • users who prefer bright panels
  • examples that need a softer non-trading look

Set theme before building the UI

Best practice:

Place inside OnInit after g_ui.Init succeeds
MuiTheme theme=MuiTheme::Light();
theme.Dense(true);
g_ui.SetTheme(theme);

MuiAppWindow app=Mui::AppWindow(g_ui,"Light Panel",20,40,360,420,true);

Set the theme before creating most controls so preferred sizes and defaults are consistent.

Switching theme at runtime

g_ui.SetTheme(theme) replaces the whole theme and marks layout and paint dirty.

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

Runtime switching is useful for demos, but a normal product panel often only needs to set the theme once in OnInit().

Dense light theme

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

Dense light theme works well for compact utility panels, but check spacing carefully. Light UIs can feel cramped more quickly than dark UIs.

Screenshot guidance

For public examples:

  • use dark theme for compact chart tools
  • use light theme to show the library is not dark-only
  • do not show fake trading performance as if real
  • mark simulated trade-style panels clearly
  • keep chart backgrounds simple

Choosing a default

Situation Recommended theme
General MT5 chart panel Dark
Compact trade-manager-style panel Dark
Settings or admin utility Dark or light
Documentation screenshot variety Both
Bright chart template Light
Dense small utility Dark dense or light dense after testing

Common mistakes

Mixing light and dark assumptions

Do not hardcode local colours that only work on one theme unless the panel is theme-specific.

Changing theme after every small state update

Theme replacement is a broad update. Use per-control setters for local state.

Using light theme without enough border contrast

Check inputs, panels, drawers, and menus on real chart backgrounds.

Related pages