Post your color styles/themes here

[ocornut]

I have decided to include a few better color themes in the default packaging, perhaps as soon as next release (1.50).

The reasoning is that I want to do it to reduce the like-hood of people actually messing up too much with styling themselves. In small part because this is taking people time, and in big part because custom themes are easier to break and create a situation where I am more cautious to change the styling system. So I'm hoping to provide a better baseline with named themes that people are happy with, that we maintain and actually not encourage people to do too much skinning until ImGui is actually ready for it.

1.A.
I would like to improve the existing default theme. Most probably, the main button colors needs to be changed, they are the worst looking now. A slight amount of tweaks to the current default theme would be a good freshening move. If you are in a creative mood please try to have a look at tweaking the default theme :)

1.B.
I would like to add new themes. Please submit yours with suitable screenshots here! I was thinking probably at least a black-ish theme, a white-ish theme. Probably one or two more. While discussing we need to be considerate that slightly transparent windows are useful to many users who are overlaying windows over their game/contents. While this isn't a deal-breaker, it is nice if a theme both work with fully opaque background colors and will slightly transparent colors. You may also submit shots of other software for ideas/references, tho I am hoping to get straight to the point and getting actual settings integrated.

I also would like, if possible, to find a practical way to showcase font changes without adding new building/compatibility issues to the examples/ applications. In particular, depending on the toolset/build system used, the starting directory may be variable and make it a little more work to use external files such as the one exhibited in extra_fonts/. That's solvable.

Related topics
#438 simplified design
#184 new design / colors (not doing right now).

[dougbinks]

The theme I'm using is setup via the function SetupimGuiStyle in this Gist, based on the light style by @itamago.

I modified this slightly to unify the treatment of alpha, and added functions to switch between light and dark and to vary the background alpha.

For the main font I use Roboto-Regular.ttf at 18.0f size, and Fontawesome using includes from IconFontCppHeaders.

[RobertoMalatesta]

Hi @ocornut ,
it's not my intention to hurry you 😊 , but do you have an estimated time of release for 1.50 with these themes enhancements?

Another thing: since there are at least four unofficial ports of imgui to emscripten it would be nice to have an official one inside the base library. On the plus side, once wasm webassembly becomes mandatory in browsers that will come as a free bonus.

My bests,

--RM

[ocornut]

I'm sorry Roberto I can't give ETA. From mid-month I will resule work on navigational controls and colors will be looked after that.

I also can't take on any new projects and anything-emscripten would be a new thing to think about. I don't know emscripten and can't take informed decision. If anyone of those four persons are serious about giving to the community and maintaining something then they are free to sort the projects out themselves and submit something to the official repo if they think it makes sense. Devil in the details and sorting/maintaining/presenting is lots of the work I can't do it for them. I can't either force it nor merely suggest to anyone, as most contributions are one-shot and adding me more work. People contributing without being asked to are more likely to keep things working in the long run :)

[RobertoMalatesta]

Hi Omar and thanks for the response,
I fully understand you since for me as well time is today a really scarce resource.
I did one port >1.5 year ago to emscripten but frankly I don't know where I put it.
At this moment I'm not using imgui in my projects since they are mostly web-based and to get imgui in I'm waiting for webassembly to be standard and default in all browsers.
If and when that happens I'll be glad to port it and contribute (and to drop all the CSS/browser/JS libraries madness for a more stable mutiplatform solution).

Navigational controls? do you mean more nifty things like a docker panel (seen 3 around), tab management? (I wish it 😄 )

Thank you for the nice piece of code and for keeping it tiny and simple.

--Roberto

[ocornut]

Please post your styles here!
For 1.50 because it is a nice number I would like to work and add those new color themes :)

[codz01]

i'll post my theme here when finish my work .
btw , you have a very skilled artist friend (benfiquet) , i think he can help with this .

[codz01]

here is mine

ImGuiStyle& style = ImGui::GetStyle();
style.WindowRounding = 5.3f;
style.FrameRounding = 2.3f;
style.ScrollbarRounding = 0;

style.Colors[ImGuiCol_Text]                  = ImVec4(0.90f, 0.90f, 0.90f, 0.90f);
style.Colors[ImGuiCol_TextDisabled]          = ImVec4(0.60f, 0.60f, 0.60f, 1.00f);
style.Colors[ImGuiCol_WindowBg]              = ImVec4(0.09f, 0.09f, 0.15f, 1.00f);
style.Colors[ImGuiCol_ChildWindowBg]         = ImVec4(0.00f, 0.00f, 0.00f, 0.00f);
style.Colors[ImGuiCol_PopupBg]               = ImVec4(0.05f, 0.05f, 0.10f, 0.85f);
style.Colors[ImGuiCol_Border]                = ImVec4(0.70f, 0.70f, 0.70f, 0.65f);
style.Colors[ImGuiCol_BorderShadow]          = ImVec4(0.00f, 0.00f, 0.00f, 0.00f);
style.Colors[ImGuiCol_FrameBg]               = ImVec4(0.00f, 0.00f, 0.01f, 1.00f);
style.Colors[ImGuiCol_FrameBgHovered]        = ImVec4(0.90f, 0.80f, 0.80f, 0.40f);
style.Colors[ImGuiCol_FrameBgActive]         = ImVec4(0.90f, 0.65f, 0.65f, 0.45f);
style.Colors[ImGuiCol_TitleBg]               = ImVec4(0.00f, 0.00f, 0.00f, 0.83f);
style.Colors[ImGuiCol_TitleBgCollapsed]      = ImVec4(0.40f, 0.40f, 0.80f, 0.20f);
style.Colors[ImGuiCol_TitleBgActive]         = ImVec4(0.00f, 0.00f, 0.00f, 0.87f);
style.Colors[ImGuiCol_MenuBarBg]             = ImVec4(0.01f, 0.01f, 0.02f, 0.80f);
style.Colors[ImGuiCol_ScrollbarBg]           = ImVec4(0.20f, 0.25f, 0.30f, 0.60f);
style.Colors[ImGuiCol_ScrollbarGrab]         = ImVec4(0.55f, 0.53f, 0.55f, 0.51f);
style.Colors[ImGuiCol_ScrollbarGrabHovered]  = ImVec4(0.56f, 0.56f, 0.56f, 1.00f);
style.Colors[ImGuiCol_ScrollbarGrabActive]   = ImVec4(0.56f, 0.56f, 0.56f, 0.91f);
style.Colors[ImGuiCol_ComboBg]               = ImVec4(0.1f, 0.1f, 0.1f, 0.99f);
style.Colors[ImGuiCol_CheckMark]             = ImVec4(0.90f, 0.90f, 0.90f, 0.83f);
style.Colors[ImGuiCol_SliderGrab]            = ImVec4(0.70f, 0.70f, 0.70f, 0.62f);
style.Colors[ImGuiCol_SliderGrabActive]      = ImVec4(0.30f, 0.30f, 0.30f, 0.84f);
style.Colors[ImGuiCol_Button]                = ImVec4(0.48f, 0.72f, 0.89f, 0.49f);
style.Colors[ImGuiCol_ButtonHovered]         = ImVec4(0.50f, 0.69f, 0.99f, 0.68f);
style.Colors[ImGuiCol_ButtonActive]          = ImVec4(0.80f, 0.50f, 0.50f, 1.00f);
style.Colors[ImGuiCol_Header]                = ImVec4(0.30f, 0.69f, 1.00f, 0.53f);
style.Colors[ImGuiCol_HeaderHovered]         = ImVec4(0.44f, 0.61f, 0.86f, 1.00f);
style.Colors[ImGuiCol_HeaderActive]          = ImVec4(0.38f, 0.62f, 0.83f, 1.00f);
style.Colors[ImGuiCol_Column]                = ImVec4(0.50f, 0.50f, 0.50f, 1.00f);
style.Colors[ImGuiCol_ColumnHovered]         = ImVec4(0.70f, 0.60f, 0.60f, 1.00f);
style.Colors[ImGuiCol_ColumnActive]          = ImVec4(0.90f, 0.70f, 0.70f, 1.00f);
style.Colors[ImGuiCol_ResizeGrip]            = ImVec4(1.00f, 1.00f, 1.00f, 0.85f);
style.Colors[ImGuiCol_ResizeGripHovered]     = ImVec4(1.00f, 1.00f, 1.00f, 0.60f);
style.Colors[ImGuiCol_ResizeGripActive]      = ImVec4(1.00f, 1.00f, 1.00f, 0.90f);
style.Colors[ImGuiCol_CloseButton]           = ImVec4(0.50f, 0.50f, 0.90f, 0.50f);
style.Colors[ImGuiCol_CloseButtonHovered]    = ImVec4(0.70f, 0.70f, 0.90f, 0.60f);
style.Colors[ImGuiCol_CloseButtonActive]     = ImVec4(0.70f, 0.70f, 0.70f, 1.00f);
style.Colors[ImGuiCol_PlotLines]             = ImVec4(1.00f, 1.00f, 1.00f, 1.00f);
style.Colors[ImGuiCol_PlotLinesHovered]      = ImVec4(0.90f, 0.70f, 0.00f, 1.00f);
style.Colors[ImGuiCol_PlotHistogram]         = ImVec4(0.90f, 0.70f, 0.00f, 1.00f);
style.Colors[ImGuiCol_PlotHistogramHovered]  = ImVec4(1.00f, 0.60f, 0.00f, 1.00f);
style.Colors[ImGuiCol_TextSelectedBg]        = ImVec4(0.00f, 0.00f, 1.00f, 0.35f);
style.Colors[ImGuiCol_ModalWindowDarkening]  = ImVec4(0.20f, 0.20f, 0.20f, 0.35f);

[Flix01]

@ocornut: if you want you can choose some of the styles in my addon branch: See the ResetStyle() method here: https://github.com/Flix01/imgui/blob/imgui_with_addons/addons/imguistyleserializer/imguistyleserializer.cpp

Not all of them look nice, but this was what I could do.

P.S. Some of them are not mine at all: I just collected (and sometimes adapted) styles from other posts.

P.S. You can try them here: https://rawgit.com/Flix01/imgui/imgui_with_addons/examples/addons_examples/html/main.html (authoring attribution is displayed in the Combo tooltip, for themes I didn't make).

[Edit:] Are you going to move the ShowBorder property from ImGuiWindow to ImStyle ?