Themes and Tokens

ModernUI has one design system: MuiTheme.

MuiTokens is a compact snapshot of the theme values. It is not a second design system.

How the model works

Layer	Purpose
`MuiTheme`	Main theme object used by controls and the root
`MuiTokens`	Snapshot of core colours, spacing, radii, fonts, semantic colours, and dense flag
Component metrics	Default sizes exposed as methods on `MuiTheme`
Per-control setters	Local overrides such as `Pad`, `Radius`, `RowHeight`, `AccentColor`

Theme defaults are used when a control does not have a specific override.

If a control exposes a setter such as Size, RowHeight, Pad, or Radius, the explicit user value wins.

Setting a theme on the root

MuiRoot owns the active theme.

MuiTheme theme=MuiTheme::Light();
theme.Dense(true);

g_ui.SetTheme(theme);

Set the theme before building your UI where possible. Changing the theme later is supported, but it marks layout and paint dirty.

Reading the current theme

MuiTheme current;
g_ui.Theme(current);

Print("Dense: ",current.IsDense());

Use this when custom code needs to match the active theme.

Dark default

The default MuiTheme() constructor gives the standard dark ModernUI palette.

MuiTheme dark;
g_ui.SetTheme(dark);

This is a good default for chart-hosted MT5 panels.

Light theme

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

MuiTheme light=MuiTheme::Light();
g_ui.SetTheme(light);

Light mode is useful for screenshots, docs, and users who prefer a bright chart workspace.

Dense mode

Dense mode makes common controls slightly smaller.

MuiTheme theme=MuiTheme::Light();
theme.Dense(true);
g_ui.SetTheme(theme);

Dense mode affects theme-provided defaults such as:

button height
input height
combo height
icon button size
list/table/menu row sizes
tabs and dialog chrome
typography scale

Use dense mode for compact trading tools and small control panels. Avoid dense mode if the panel contains lots of text.

Component metrics

Component defaults live on MuiTheme as methods.

Examples include:

theme.ButtonHeight();
theme.InputHeight();
theme.TextAreaMinHeight();
theme.ComboHeight();
theme.IconButtonSize();
theme.SliderHeight();
theme.ListRowHeight();
theme.TableRowHeight();
theme.TableHeaderHeight();
theme.MenuItemHeight();
theme.TabHeight();
theme.CardPadding();

You normally do not call these directly in application code. The factory helpers use them when width or height arguments are 0.0.

Factory defaults

Factories use theme metrics where possible.

Examples:

Factory helper	Default when height is `0.0`
`Mui::Button`	`ButtonHeight()`
`Mui::TextBox`	`InputHeight()`
`Mui::SpinEdit`	`InputHeight()`
`Mui::DatePicker`	`InputHeight()`
`Mui::ComboBox`	`ComboHeight()`
`Mui::Dropdown`	`ComboHeight()`
`Mui::Slider`	`SliderHeight()`
`Mui::IconButton`	`IconButtonSize()` for the button square, atlas-sized glyph defaults for the icon
`Mui::TextArea`	`TextAreaMinHeight()`

This is why you should usually pass 0.0 for height unless you have a strong reason to force a size.

Recent metric notes

ModernUI uses compact slider metrics for normal EA panels. SliderHeight() is intentionally shorter than the generic input height so sliders sit neatly in trade panels and settings rows.

Icon buttons use theme-driven button sizing while the glyph itself is selected from the nearest built-in atlas size where available. Missing atlas files fall back to canvas icons.

Tokens snapshot

MuiTokens contains compact theme values such as:

spacing scale
radius scale
surface colours
text colours
accent colour
semantic success/warning colours
border colours
focus/menu/toggle colours
font point sizes
dense flag

It intentionally does not duplicate every component height. Component heights are methods on MuiTheme.

App-wide theme vs local overrides

Use an app-wide theme for broad style.

MuiTheme theme=MuiTheme::Light();
theme.Dense(true);
g_ui.SetTheme(theme);

Use local setters for one control.

button.Radius(10.0);
button.Pad(14.0,8.0);
button.AccentColor(0xFF2563EB);

Common mistakes

Editing control internals for simple visual changes

Use setters first. Do not fork a control just to change padding, radius, font size, or accent colour.

Expecting tokens to include every component size

Use MuiTheme component metric methods for default heights and row sizes.

Applying dense mode too late without understanding layout

Changing theme after a UI is built marks layout and paint dirty. Prefer setting the theme before building the root tree.