# How to Implement Theming and Custom Styling in Dear ImGui (ImGuiStyle & ImGuiCol)

> Easily customize Dear ImGui appearance. Learn to implement theming and custom styling using ImGuiStyle and ImGuiCol for unique application aesthetics. Modify colors, padding, and more.

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

---

**Dear ImGui stores all visual parameters—colors, padding, rounding, and border sizes—in the `ImGuiStyle` structure, which you can modify globally via `ImGui::GetStyle()` or temporarily using `PushStyleColor` and `PushStyleVar`.**

The `ocornut/imgui` repository provides a comprehensive styling system that separates color palettes (`ImGuiCol_` enums) from dimensional variables (`ImGuiStyleVar_` enums). Understanding how to leverage the `ImGuiStyle` structure and the push/pop stack system allows you to create persistent custom themes or apply temporary visual overrides for specific windows and widgets.

## Understanding ImGuiStyle and ImGuiCol

All visual configuration in Dear ImGui lives in the **`ImGuiStyle`** structure declared in [`imgui.h`](https://github.com/ocornut/imgui/blob/main/imgui.h) (line 208). This struct contains dimensional properties like `WindowRounding`, `FramePadding`, and `Alpha`, plus a `Colors` array that holds the entire RGBA palette.

According to the source in [`imgui.h`](https://github.com/ocornut/imgui/blob/main/imgui.h) (lines 225), the member `Colors[ImGuiCol_COUNT]` stores color values as `ImU32` or `ImVec4` depending on the API used. The enum definitions categorize these into two distinct groups:

- **`ImGuiStyleVar_…`** (lines 1814–1864): Controls float and `ImVec2` fields such as `WindowRounding`, `FramePadding`, and `ItemSpacing`
- **`ImGuiCol_…`** (lines 1825–1840): Defines color entries for every UI element from `ImGuiCol_WindowBg` to `ImGuiCol_PlotHistogram`

## Built-in Base Themes

The framework provides three entry-point functions in [`imgui.h`](https://github.com/ocornut/imgui/blob/main/imgui.h) (lines 421–423) to initialize a clean palette:

1. **`ImGui::StyleColorsDark(ImGuiStyle* dst = NULL)`** – Default dark theme with high contrast
2. **`ImGui::StyleColorsLight(ImGuiStyle* dst = NULL)`** – Light-bordered theme for bright environments
3. **`ImGui::StyleColorsClassic(ImGuiStyle* dst = NULL)`** – Classic legacy look from older ImGui versions

These functions populate an `ImGuiStyle` structure with sensible defaults. You should call one of these after `ImGui::CreateContext()` but before your first `ImGui::NewFrame()`.

## Global Style Modification

For persistent theme changes that affect the entire application, obtain a reference to the global style using **`ImGui::GetStyle()`** (declared in [`imgui.h`](https://github.com/ocornut/imgui/blob/main/imgui.h) line 402) and modify its members directly.

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

// Modify dimensional properties
style.Alpha                  = 0.95f;
style.WindowRounding         = 6.0f;
style.FrameRounding          = 4.0f;
style.ScrollbarRounding      = 5.0f;

// Override specific colors in the palette
style.Colors[ImGuiCol_TitleBgActive]  = ImVec4(0.45f, 0.15f, 0.75f, 1.00f);
style.Colors[ImGuiCol_Button]         = ImVec4(0.30f, 0.30f, 0.80f, 0.40f);
style.Colors[ImGuiCol_ButtonHovered]  = ImVec4(0.30f, 0.30f, 0.80f, 1.00f);
style.Colors[ImGuiCol_ButtonActive]   = ImVec4(0.15f, 0.15f, 0.45f, 1.00f);

```

Changes to `GetStyle()` modify the active context's style permanently until you change them again or call another base theme function.

## Temporary Style Overrides

For per-frame or localized modifications that should not affect the global theme, use the push/pop stack system. These functions (declared in [`imgui.h`](https://github.com/ocornut/imgui/blob/main/imgui.h) lines 529–537) automatically restore previous values when you call the corresponding pop function.

**Color overrides:**

```cpp
ImGui::PushStyleColor(ImGuiCol idx, ImU32 col);
ImGui::PushStyleColor(ImGuiCol idx, const ImVec4& col);
ImGui::PopStyleColor(int count = 1);

```

**Variable overrides:**

```cpp
ImGui::PushStyleVar(ImGuiStyleVar idx, float val);
ImGui::PushStyleVar(ImGuiStyleVar idx, const ImVec2& val);
ImGui::PopStyleVar(int count = 1);

```

This approach is essential when you want a specific window or widget to differ from the global theme without affecting subsequent UI elements.

## Complete Implementation Examples

### Creating a Custom Dark Theme at Startup

Initialize your custom theme once after context creation:

```cpp
// After ImGui::CreateContext()
ImGuiStyle& style = ImGui::GetStyle();
ImGui::StyleColorsDark(&style);

style.WindowRounding = 6.0f;
style.FrameRounding  = 4.0f;
style.Colors[ImGuiCol_WindowBg] = ImVec4(0.1f, 0.1f, 0.1f, 0.95f);

```

### Per-Window Temporary Style Overrides

Use push/pop to create isolated styling contexts:

```cpp
ImGui::PushStyleColor(ImGuiCol_WindowBg, ImVec4(0.1f, 0.1f, 0.1f, 1.0f));
ImGui::PushStyleVar(ImGuiStyleVar_WindowRounding, 12.0f);

ImGui::Begin("Themed Window");
ImGui::Text("This window uses custom background and rounding");
ImGui::End();

ImGui::PopStyleVar();          // Restore previous rounding
ImGui::PopStyleColor();        // Restore previous background

```

### Runtime Theme Switching

Toggle between light and dark modes dynamically:

```cpp
bool use_dark = true; // Toggle via UI button

if (use_dark)
    ImGui::StyleColorsDark();
else
    ImGui::StyleColorsLight();

// Re-apply custom tweaks after base palette
ImGui::GetStyle().WindowRounding = 4.0f;

```

### Combining Fonts with Style Scaling

Adjust typography alongside colors:

```cpp
ImGuiIO& io = ImGui::GetIO();
io.Fonts->AddFontFromFileTTF("Roboto-Regular.ttf", 16.0f);
ImGui::GetStyle().ScaleAllSizes(1.1f);   // Enlarge all UI elements proportionally

```

## Summary

- **Global themes**: Modify `ImGui::GetStyle()` directly after calling `StyleColorsDark()`, `StyleColorsLight()`, or `StyleColorsClassic()` from [`imgui.h`](https://github.com/ocornut/imgui/blob/main/imgui.h) (lines 421–423)
- **Temporary changes**: Use `PushStyleColor()` and `PushStyleVar()` for localized overrides, always pairing with `PopStyleColor()` and `PopStyleVar()` (lines 529–537)
- **Color storage**: Access via `ImGui::GetStyle().Colors[ImGuiCol_...]` where the `ImGuiCol_` enum spans lines 1825–1840 in [`imgui.h`](https://github.com/ocornut/imgui/blob/main/imgui.h)
- **Dimensional vars**: `ImGuiStyleVar_` enum defined in lines 1814–1864 controls spacing, rounding, and sizes
- **Source files**: Core definitions reside in [`imgui.h`](https://github.com/ocornut/imgui/blob/main/imgui.h) (struct and enums), while [`imgui_demo.cpp`](https://github.com/ocornut/imgui/blob/main/imgui_demo.cpp) contains the `ShowStyleEditor()` implementation for live theme editing

## Frequently Asked Questions

### How do I change the default theme in Dear ImGui?

Call one of the three base theme functions—`ImGui::StyleColorsDark()`, `ImGui::StyleColorsLight()`, or `ImGui::StyleColorsClassic()`—immediately after `ImGui::CreateContext()` and before your first `ImGui::NewFrame()`. These functions populate the `ImGuiStyle` structure stored in the current context with a complete color palette and dimensional defaults.

### What is the difference between ImGuiStyleVar and ImGuiCol?

`ImGuiStyleVar` controls dimensional and scalar properties like `WindowRounding`, `FramePadding`, and `Alpha`, while `ImGuiCol` defines color indices for the `Colors` array in `ImGuiStyle`. When using push/pop APIs, you must use `PushStyleVar` for dimensional changes and `PushStyleColor` for color changes, as they manipulate different data types (float/`ImVec2` vs `ImU32`/`ImVec4`).

### When should I use PushStyleColor vs modifying GetStyle() directly?

Modify `GetStyle()` directly for persistent global themes that should last the entire session or until explicitly changed. Use `PushStyleColor` and `PushStyleVar` when you need temporary overrides for a specific window, button, or frame, followed by the corresponding pop calls to restore the previous state. This prevents style changes from leaking into subsequent UI elements.

### Where are the style enums defined in the ImGui source?

The `ImGuiStyle` structure is declared in [`imgui.h`](https://github.com/ocornut/imgui/blob/main/imgui.h) at line 208, with its `Colors` array defined at line 225. The `ImGuiStyleVar_` enum appears at lines 1814–1864, and the `ImGuiCol_` enum follows at lines 1825–1840. The push/pop function signatures are located at lines 529–537 in the same header file according to the `ocornut/imgui` source code.