Skin support / example?

[SomeGuyDoinWork]

I know imgui supports styles, but I was wondering if anyone had any success applying a skin? If there are any third party addons or examples that would be great. Or advice about how i could go about this myself.

[PathogenDavid]

Dear ImGui's current styling system is relatively limited, and as a result most UIs created with it have a similar feel.

That being said, some people accomplish quite a bit with what's available (sometimes with copious amounts of custom drawing and widgets.) The gallery threads are a good place to find examples of this. Here's some random ones I found/remembered:

• Gallery: Post your screenshots / code here (PART 16) #5886 (comment)
• Gallery: Post your screenshots / code here (PART 16) #5886 (comment)
• Gallery: Post your screenshots / code here (PART 12) #3488 (comment)
• Gallery: Post your screenshots / code here (PART 10) #2847 (comment)
• Gallery: Post your screenshots / code here (PART 17) #6478 (comment)

Another useful thread is the styles/themes thread, which provides a multitude of simpler examples.

If there are any third party addons

There's a fairly exhaustive list of third-party extensions on the wiki. They're mostly for custom widgets, but maybe they can help you accomplish the vibe you're wanting to go for.

Or advice about how i could go about this myself.

In general Dear ImGui's widget rendering is fairly limited, for example here's the code that renders buttons:

imgui/imgui_widgets.cpp

Lines 706 to 709 in 5053d79

	// Render
	const ImU32 col = GetColorU32((held && hovered) ? ImGuiCol_ButtonActive : hovered ? ImGuiCol_ButtonHovered : ImGuiCol_Button);
	RenderNavHighlight(bb, id);
	RenderFrame(bb.Min, bb.Max, col, true, style.FrameRounding);

imgui/imgui.cpp

Lines 3439 to 3451 in 5053d79

	// Render a rectangle shaped with optional rounding and borders
	void ImGui::RenderFrame(ImVec2 p_min, ImVec2 p_max, ImU32 fill_col, bool border, float rounding)
	{
	ImGuiContext& g = *GImGui;
	ImGuiWindow* window = g.CurrentWindow;
	window->DrawList->AddRectFilled(p_min, p_max, fill_col, rounding);
	const float border_size = g.Style.FrameBorderSize;
	if (border && border_size > 0.0f)
	{
	window->DrawList->AddRect(p_min + ImVec2(1, 1), p_max + ImVec2(1, 1), GetColorU32(ImGuiCol_BorderShadow), rounding, 0, border_size);
	window->DrawList->AddRect(p_min, p_max, GetColorU32(ImGuiCol_Border), rounding, 0, border_size);
	}
	}

ButtonEx calls down to RenderFrame more or less just draws a couple (rounded) rectangles with solid colors. However, you'll find that many widgets are implemented using RenderFrame, so depending on what you're wanting to accomplish you might be able to just modify RenderFrame and call it a day.

There is no general guide to customizing Dear ImGui beyond what ImGuiStyle provides, you'll need to get comfortable digging around in Dear ImGui's source code.

[GamingMinds-DanielC]

Depending on the effect you want, you could do a lot without customizing widgets already. Instead of rendering to the back buffer directly, you could render to a texture and use some custom post processing. Together with custom styles (f.e. to color code for post processing effects) you could do some interesting stuff. Or you could use your own backend with custom shaders. This may be enough as long as you can limit yourself to sampling based on the screen position. If not, custom widgets are the way to go.

[ocornut]

Closing as answered, let us know if you have other questions!