How to Customize Dear ImGui Style: Complete Guide to ImGuiStyle

To customize Dear ImGui style, modify the global ImGuiStyle structure via ImGui::GetStyle(), use PushStyleColor() and PushStyleVar() for temporary widget overrides, or launch ImGui::ShowStyleEditor() for interactive visual editing.

Dear ImGui's immediate-mode architecture centralizes all visual appearance settings in a single configuration structure. Whether you need to match corporate branding or create a specialized debugging interface, the ocornut/imgui repository provides comprehensive APIs to customize Dear ImGui style at global, local, and runtime levels.

Understanding the ImGuiStyle Architecture

The Core Data Structure

All visual parameters live in ImGuiStyle, defined in [imgui.h](https://github.com/ocornut/imgui/blob/master/imgui.h#L2088) at line 2088. This structure contains over 55 color entries indexed by the ImGuiCol_ enumeration and 27+ sizing variables indexed by ImGuiStyleVar_.

The actual storage arrays are:

ImVec4   Colors[ImGuiCol_COUNT];      // Color palette
float    Variables[ImGuiStyleVar_COUNT];  // Spacing, padding, rounding

Context Integration

When you call ImGui::CreateContext(), the library instantiates an ImGuiContext that owns a fully initialized ImGuiStyle instance. Access the live style anytime via ImGui::GetStyle(), which returns a reference to ImGuiContext::Style. All drawing functions read from this structure every frame, meaning changes immediately affect subsequent rendering.

Built-in Style Presets

Dear ImGui provides three predefined themes in [imgui.cpp](https://github.com/ocornut/imgui/blob/master/imgui.cpp#L1045) (around line 1045):

• ImGui::StyleColorsDark() — Modern dark theme (default since v1.50)
• ImGui::StyleColorsLight() — High-contrast light theme
• ImGui::StyleColorsClassic() — Original ImGui look from early versions

These functions populate the Colors and Variables arrays with hard-coded values. They execute automatically during context creation unless you immediately replace the style.

Global Style Modifications

Modify the reference returned by GetStyle() to permanently alter your application's appearance. Run this code once after context creation and before your main loop:

ImGui::StyleColorsDark();                 // Initialize with dark preset
ImGuiStyle& style = ImGui::GetStyle();    // Reference to global style

// Modify color palette
style.Colors[ImGuiCol_WindowBg]       = ImVec4(0.10f, 0.10f, 0.12f, 1.00f);
style.Colors[ImGuiCol_TitleBgActive]  = ImVec4(0.30f, 0.31f, 0.35f, 1.00f);
style.Colors[ImGuiCol_Button]         = ImVec4(0.20f, 0.25f, 0.30f, 1.00f);

// Adjust spacing and padding
style.FramePadding = ImVec2(8, 4);
style.ItemSpacing  = ImVec2(12, 8);

Temporary Runtime Overrides

For localized changes that shouldn't affect global state, use the stack-based API. PushStyleColor() and PushStyleVar() save the current value to an internal stack, while their Pop counterparts restore it:

// Temporarily make buttons red for this scope
ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0.8f, 0.2f, 0.2f, 1.0f));
if (ImGui::Button("Danger!")) {
    // Handle click
}
ImGui::PopStyleColor();   // Restore previous button color

This mechanism uses private stacks defined in imgui_internal.h, allowing you to nest style changes safely across widget hierarchies.

Interactive Style Editing

ShowStyleEditor

Located in [imgui_demo.cpp](https://github.com/ocornut/imgui/blob/master/imgui_demo.cpp#L1400) at line 1400, ImGui::ShowStyleEditor() renders a complete property panel. This lets you tweak every ImGuiStyle field at runtime and export the resulting code:

// Typically placed inside your main UI loop
if (ImGui::BeginMainMenuBar()) {
    if (ImGui::BeginMenu("Tools")) {
        ImGui::MenuItem("Style Editor", nullptr, &show_style_editor);
        ImGui::EndMenu();
    }
    ImGui::EndMainMenuBar();
}

if (show_style_editor)
    ImGui::ShowStyleEditor();   // Renders full style editor window

ShowStyleSelector

For quick preset switching, use ImGui::ShowStyleSelector(), which provides a compact combo box:

if (ImGui::ShowStyleSelector("##StylePresets")) {
    // Function internally calls StyleColorsDark/Light/Classic()
    // based on user selection
}

Persisting Custom Styles

Because the style lives in the ImGui context, you can serialize user modifications using the built-in settings system:

// Save on application exit
ImGui::SaveIniSettingsToDisk("my_imgui.ini");

// Load during startup (before creating the first frame)
ImGui::LoadIniSettingsFromDisk("my_imgui.ini");

The ImGuiIO::IniFilename mechanism automatically serializes ImGuiStyle fields, preserving your customizations across sessions.

Summary

• ImGuiStyle structure in imgui.h stores all colors, spacing, and sizing parameters
• ImGui::GetStyle() provides global access to the current context's style
• StyleColorsDark/Light/Classic() in imgui.cpp initialize the three built-in presets
• PushStyleColor/Var() and PopStyleColor/Var() enable temporary, stack-based overrides
• ShowStyleEditor() in imgui_demo.cpp offers interactive visual editing
• .ini file serialization via SaveIniSettingsToDisk() persists user customizations

Frequently Asked Questions

How do I change the background color of all windows?

Access the global style and modify ImGuiCol_WindowBg. Retrieve the style via ImGui::GetStyle(), then set style.Colors[ImGuiCol_WindowBg] to your desired ImVec4 RGBA values. This affects all windows drawn after the modification.

What's the difference between PushStyleColor and modifying GetStyle()?

PushStyleColor() creates a temporary override that lasts until the matching PopStyleColor() call, affecting only widgets rendered within that scope. Modifying GetStyle() changes the global default permanently for all subsequent frames until you modify it again.

Can I load styles from external files?

Yes. While Dear ImGui doesn't include a dedicated style file parser, you can serialize the ImGuiStyle structure to disk using ImGui::SaveIniSettingsToDisk(). The resulting .ini file stores all color and variable values. Reload it on startup with ImGui::LoadIniSettingsFromDisk().

How do I create a completely custom theme preset?

Define a function that populates an ImGuiStyle reference with your custom values, similar to StyleColorsDark() in imgui.cpp. Call your function immediately after ImGui::CreateContext() and before the main loop. This approach keeps your branding code centralized and reusable across projects.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}