A custom Dear ImGui dark theme (code you can paste)
The default Dear ImGui look is fine for debug tools, but menus people use every day deserve better. Here is a complete dark theme — rounding, spacing and colors — in one function.
The theme
Call ApplyDarkTheme() once, after ImGui::CreateContext(). It starts from the built-in dark style and changes what makes the biggest difference.
#include "imgui.h"
// 0xRRGGBB → ImVec4
static ImVec4 Hex(unsigned int rgb, float a = 1.0f)
{
return ImVec4(((rgb >> 16) & 0xFF) / 255.0f, ((rgb >> 8) & 0xFF) / 255.0f, (rgb & 0xFF) / 255.0f, a);
}
void ApplyDarkTheme()
{
ImGui::StyleColorsDark(); // start from the built-in dark style
ImGuiStyle& style = ImGui::GetStyle();
// shape and spacing
style.WindowRounding = 10.0f;
style.ChildRounding = 8.0f;
style.FrameRounding = 6.0f;
style.PopupRounding = 8.0f;
style.GrabRounding = 6.0f;
style.ScrollbarRounding = 8.0f;
style.WindowBorderSize = 1.0f;
style.FrameBorderSize = 0.0f;
style.WindowPadding = ImVec2(16.0f, 14.0f);
style.FramePadding = ImVec2(10.0f, 6.0f);
style.ItemSpacing = ImVec2(10.0f, 8.0f);
// colors
const ImVec4 bg = Hex(0x111216);
const ImVec4 surface = Hex(0x1D1E22);
const ImVec4 hover = Hex(0x27282D);
const ImVec4 accent = Hex(0x00E0B8);
const ImVec4 text = Hex(0xE4E4E7);
const ImVec4 muted = Hex(0x71717A);
ImVec4* c = style.Colors;
c[ImGuiCol_Text] = text;
c[ImGuiCol_TextDisabled] = muted;
c[ImGuiCol_WindowBg] = bg;
c[ImGuiCol_ChildBg] = bg;
c[ImGuiCol_PopupBg] = surface;
c[ImGuiCol_Border] = Hex(0xFFFFFF, 0.08f);
c[ImGuiCol_FrameBg] = surface;
c[ImGuiCol_FrameBgHovered] = hover;
c[ImGuiCol_FrameBgActive] = hover;
c[ImGuiCol_TitleBg] = bg;
c[ImGuiCol_TitleBgActive] = surface;
c[ImGuiCol_CheckMark] = accent;
c[ImGuiCol_SliderGrab] = accent;
c[ImGuiCol_SliderGrabActive] = Hex(0x33E8C7);
c[ImGuiCol_Button] = Hex(0x00E0B8, 0.85f);
c[ImGuiCol_ButtonHovered] = accent;
c[ImGuiCol_ButtonActive] = Hex(0x00B896);
c[ImGuiCol_Header] = Hex(0x00E0B8, 0.18f);
c[ImGuiCol_HeaderHovered] = Hex(0x00E0B8, 0.28f);
c[ImGuiCol_HeaderActive] = Hex(0x00E0B8, 0.38f);
c[ImGuiCol_Separator] = Hex(0xFFFFFF, 0.08f);
c[ImGuiCol_ScrollbarBg] = bg;
c[ImGuiCol_ScrollbarGrab] = hover;
c[ImGuiCol_ScrollbarGrabHovered] = Hex(0x3A3B42);
}With a bright accent like this one, button text reads better in a dark color. Set it just for buttons:
ImGui::PushStyleColor(ImGuiCol_Text, Hex(0x03241D));
ImGui::Button("Apply");
ImGui::PopStyleColor();A better font
The default font is small and pixel-based. A modern sans font at 15–16 px changes the feel the most. Load it once, before the first frame:
ImGuiIO& io = ImGui::GetIO();
io.Fonts->AddFontFromFileTTF("Inter-Regular.ttf", 16.0f);Tips
- Keep one accent color and use it for the things people click — checkmarks, sliders, buttons.
- Rounding between 4 and 10 px looks modern; mix 10 for windows with 6 for frames.
- Tab colors changed names in recent Dear ImGui versions (
TabActive→TabSelected), so check your version before styling tabs.
In Kavro you switch between eight finished themes (Kavro Dark, Midnight Violet, Ocean, Sakura, Ember…) or set every color in a style editor, and see the result immediately — then the style is generated as code for you.