Styling

Colors, styles, and themes are all managed by Style.
It offers direct access to the colors and styles of Dear ImGui.

Custom components should try to use those colors and styles to allow for seamless theme switching.

Light & Dark Mode

With Style.Theme you get the current theme of the application.
Currently, only light and dark mode can be selected. They each represent the equally named theme in Dear ImGui.

Change the theme at any point in the application lifetime with Style.ChangeTheme(Theme.Dark) or Style.ChangeTheme(Theme.Light).

Colors

Colors use the Color struct from ImageSharp.

They are global default colors and can be changed in local scopes, like specific components, by using ImGuiNET.imGui.PushStyleColor and ImGuiNET.imGui.PopStyleColor.

Get a color for the current theme in Dear ImGui like so:

Color color = Style.GetColor(ImGuiCol.Border);

Get a color for a specific theme in Dear ImGui like so:

Color color = Style.GetColor(Theme.Dark, ImGuiCol.Border);

Set a color for the current theme in Dear ImGui like so:

Style.SetColor(ImGuiCol.Border, Color.AliceBlue);

Set a color for a specific theme in Dear ImGui like so:

Style.SetColor(Theme.Dark, ImGuiCol.Border, Color.AliceBlue);

ThemedColor

Components that allow changing at least one of their colors, take a ThemedColor.

A ThemedColor represents either a color index from Dear ImGui directly, or up to two static colors, one for each mode.

Set a color index for a specific component's color property:

// Respects theme switching
label.TextColor = ImGuiCol.Border;

Set a single color for a specific component's color property:

// A fixed color for all themes
label.TextColor = Color.AliceBlue;

Set a color for every theme for a specific component's color property:

// Respects theme switching; First light mode, the dark mode color
label.TextColor = new ThemedColor(Color.AliceBlue, Color.DeepSkyBlue);

Styles

Similar to colors, styles affect the look of various aspects of Dear ImGui, like padding and rounding.

Styles are of type float or Vector2, based on Dear ImGui specifications.

Get a style for the current theme in Dear ImGui like so:

float rounding = Style.GetStyleFloat(ImGuiStyleVar.FrameRounding);
// - or -
Vector2 padding = Style.GetStyleVector2(ImGuiStyleVar.FramePadding);

Get a style for a specific theme in Dear ImGui like so:

float rounding = Style.GetStyleFloat(Theme.Dark, ImGuiStyleVar.FrameRounding);
// - or -
Vector2 padding = Style.GetStyleVector2(Theme.Dark, ImGuiStyleVar.FramePadding);

Set a style for the current theme in Dear ImGui like so:

Style.SetStyle(ImGuiStyleVar.FrameRounding, 2f);
// - or -
Style.SetStyle(ImGuiStyleVar.FramePadding, Vector2.Zero);

Set a style for a specific theme in Dear ImGui like so:

Style.SetStyle(Theme.Dark, ImGuiStyleVar.FrameRounding, 2f);
// - or -
Style.SetStyle(Theme.Dark, ImGuiStyleVar.FramePadding, Vector2.Zero);