# How to Customize Dear ImGui Style: Complete Guide to ImGuiStyle

> Master Dear ImGui style customization! Learn to modify ImGuiStyle globally, use temporary overrides with PushStyleColor/Var, or interactively edit with ShowStyleEditor.

- Repository: [omar/imgui](https://github.com/ocornut/imgui)
- Tags: how-to-guide
- Published: 2026-07-28

---

**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/main/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:

```cpp
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/main/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:

```cpp
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:

```cpp
// 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`](https://github.com/ocornut/imgui/blob/main/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/main/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:

```cpp
// 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:

```cpp
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:

```cpp
// 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`](https://github.com/ocornut/imgui/blob/main/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`](https://github.com/ocornut/imgui/blob/main/imgui.cpp) initialize the three built-in presets
- **`PushStyleColor/Var()`** and **`PopStyleColor/Var()`** enable temporary, stack-based overrides
- **`ShowStyleEditor()`** in [`imgui_demo.cpp`](https://github.com/ocornut/imgui/blob/main/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`](https://github.com/ocornut/imgui/blob/main/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.