Styling
ModernUI is designed to give MT5 panels a consistent visual system without forcing you to edit control internals.
Use this section to understand:
- how
MuiThemeandMuiTokenswork - how to switch between dark and light palettes
- how to use theme defaults
- how to override individual controls
- which setter names are preferred
- when a visual change causes repaint vs layout
Styling pages
| Page | Use it for |
|---|---|
| Themes and tokens | Understanding MuiTheme, MuiTokens, defaults, and dense mode |
| Colours | ARGB colours, semantic colours, badges, accents, and per-control colour setters |
| Spacing, radius, and typography | Padding, corner radius, font sizes, component metrics, and dense mode |
| Light and dark themes | Switching palettes and choosing theme style for examples |
| Setter naming | Preferred public setter names such as Pad, Radius, SizePt, and AccentColor |
Recommended styling approach
Start with the default theme.
Then customise in this order:
- choose dark or light theme
- enable dense mode if the panel needs to be compact
- use factory defaults for normal controls
- use per-control setters for specific overrides
- only customise theme tokens when you need a consistent app-wide look
Most panels do not need a custom theme. They only need a clean layout and a few local accent overrides.
Example
MuiTheme theme=MuiTheme::Light();
theme.Dense(true);
theme.SetSemanticColors(0xFF15803D,0xFFB7791F);
g_ui.SetTheme(theme);
MuiAppWindow app=Mui::AppWindow(g_ui,"Styled Panel",20,40,360,420,true);
MuiSection main=Mui::Section(app.content,"Settings","Theme-aware controls");
MuiLabeledSpinEdit risk=Mui::LabeledSpinEdit(main.body,"Risk %",0.1,10.0,0.1,1.0);
if(risk.control!=NULL)
risk.control.AccentColor(0xFF2563EB);
Keep styling practical
Good styling in ModernUI means:
- consistent spacing
- readable text
- clear selected/hover states
- restrained accents
- no unnecessary colour noise
- compact but not cramped panels
- no unsupported claims about performance or execution