Skip to content

Full access to ImGui Theme parameters #258

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
tingspain opened this issue Sep 30, 2024 · 2 comments
Open

Full access to ImGui Theme parameters #258

tingspain opened this issue Sep 30, 2024 · 2 comments
Labels
faq A frequent issue, remaining opened to facilitate discoverability

Comments

@tingspain
Copy link

Hello,

I am trying to customise the look of the ImGui, but I dont find access to the standard Imgui's theme parameters. I only find a set of "new" theme parameters:

tweaked_theme = hello_imgui.get_runner_params().imgui_window_params.tweaked_theme
tweaked_theme.theme = hello_imgui.ImGuiTheme_.darcula_darker
tweaked_theme.tweaks.rounding = 4.0
tweaked_theme.tweaks.value_multiplier_bg = 0.5
tweaked_theme.tweaks.value_multiplier_frame_bg = 0.5

Is there anyway to access to the standard imgui theme attributes:

DisabledAlpha      
WindowRounding     
WindowBorderSize   
WindowMenuButtonPosition 
FrameRounding      
PopupRounding      
TabRounding        
TabBarOverlineSize 
Text
TextDisabled
WindowBg
ChildBg
PopupBg
Border
BorderShadow
FrameBg
FrameBgHovered
FrameBgActive
TitleBg
TitleBgActive
TitleBgCollapsed
MenuBarBg
ScrollbarBg
ScrollbarGrab
ScrollbarGrabHovered
ScrollbarGrabActive
CheckMark
SliderGrab
SliderGrabActive
Button
ButtonHovered
ButtonActive
Header
HeaderHovered
HeaderActive
Separator
SeparatorHovered
SeparatorActive
ResizeGrip
ResizeGripHovered
ResizeGripActive
Tab
TabHovered
TabDimmed
TabDimmedSelected
TabDimmedSelectedOverline
TabSelected
TabSelectedOverline
DockingPreview
DockingEmptyBg
PlotLines
PlotLinesHovered
PlotHistogram
PlotHistogramHovered
TextSelectedBg
DragDropTarget
NavHighlight
NavWindowingHighlight
NavWindowingDimBg
ModalWindowDimBg
Separator

Thanks in advance!!!!
@pthom
Copy link
Owner

pthom commented Oct 1, 2024 •
edited
Loading

I updated demo_docking to show a full example:

Python

imgui_bundle/bindings/imgui_bundle/demos_python/demos_immapp/demo_docking.py

Lines 782 to 801 in aa8f75b

##########################################################################
# Define the app initial theme
##########################################################################
def setup_my_theme():
"""Example of theme customization at App startup
This function is called in the callback `setup_imgui_style` in order to apply a custom theme:
runner_params.callbacks.setup_imgui_style = setup_my_theme()
"""
# Apply default style
hello_imgui.imgui_default_settings.setup_default_imgui_style()
# Create a tweaked theme
tweaked_theme = hello_imgui.ImGuiTweakedTheme()
tweaked_theme.theme = hello_imgui.ImGuiTheme_.material_flat
tweaked_theme.tweaks.rounding = 10.0
# Apply the tweaked theme
hello_imgui.apply_tweaked_theme(tweaked_theme) # Note: you can also push/pop the theme in order to apply it only to a specific part of the Gui: hello_imgui.push_tweaked_theme(tweaked_theme) / hello_imgui.pop_tweaked_theme()
# Then apply further modifications to ImGui style
imgui.get_style().item_spacing = (6, 4) # Reduce spacing between items ((8, 4) by default)
imgui.get_style().set_color_(imgui.Col_.text, ImVec4(0.8, 0.8, 0.85, 1.0)) # Change text color

C++

imgui_bundle/bindings/imgui_bundle/demos_cpp/demos_immapp/demo_docking.cpp

Lines 794 to 812 in aa8f75b

void SetupMyTheme()
{
// Example of theme customization at App startup
// This function is called in the callback `SetupImGuiStyle` in order to apply a custom theme:
// runnerParams.callbacks.SetupImGuiStyle = SetupMyTheme;
// Apply default style
HelloImGui::ImGuiDefaultSettings::SetupDefaultImGuiStyle();
// Create a tweaked theme
ImGuiTheme::ImGuiTweakedTheme tweakedTheme;
tweakedTheme.Theme = ImGuiTheme::ImGuiTheme_MaterialFlat;
tweakedTheme.Tweaks.Rounding = 10.0f;
// Apply the tweaked theme
ImGuiTheme::ApplyTweakedTheme(tweakedTheme); // Note: you can also push/pop the theme in order to apply it only to a specific part of the Gui: ImGuiTheme::PushTweakedTheme(tweakedTheme) / ImGuiTheme::PopTweakedTheme()
// Then apply further modifications to ImGui style
ImGui::GetStyle().ItemSpacing = ImVec2(6, 4); // Reduce spacing between items ((8, 4) by default)
ImGui::GetStyle().Colors[ImGuiCol_Text] = ImVec4(0.8, 0.8, 0.85, 1.0); // Change text color
}

@pthom pthom added the faq A frequent issue, remaining opened to facilitate discoverability label Oct 2, 2024
@tingspain
Copy link
Author

tingspain commented Oct 6, 2024 •
edited
Loading

@pthom, once again thank you very much for your fast reply and I am sorry for my slow reply :-/

It works perfectly, thanks. This is my Theme:

image

In my main function:

def main():
.
.
.
    # Set the Them of the App
    runner_params.callbacks.setup_imgui_style = lambda: ThemeGui()
    
    # runner_params.callbacks.post_init = lambda: app.createGLContext()
    runner_params.callbacks.show_gui = lambda: gui(app_state)

    add_ons_params = immapp.AddOnsParams()
    add_ons_params.with_markdown = True
    immapp.run(runner_params, add_ons_params)

    return 0

My theme function:

def ThemeGui():
    hello_imgui.apply_theme( hello_imgui.ImGuiTheme_.so_dark_accent_blue)
    tweaked_theme = hello_imgui.get_runner_params().imgui_window_params.tweaked_theme
    tweaked_theme.theme = hello_imgui.ImGuiTheme_.darcula_darker
    tweaked_theme.tweaks.rounding = 4.0
    
    tweaked_theme.tweaks.value_multiplier_bg = 0.5
    tweaked_theme.tweaks.value_multiplier_frame_bg = 0.5
    
    hello_imgui.apply_tweaked_theme(tweaked_theme=tweaked_theme)
    
    imgui.get_style().disabled_alpha     = 0.4000000238418579
    imgui.get_style().window_rounding    = 0
    imgui.get_style().window_border_size = 0.2
    imgui.get_style().window_menu_button_position =  imgui.Dir.right
    imgui.get_style().window_padding = (10, 10)
    imgui.get_style().frame_rounding      = 4
    imgui.get_style().popup_rounding      = 4
    imgui.get_style().tab_rounding        = 4
    imgui.get_style().tab_bar_border_size = 0
    imgui.get_style().frame_padding = (10, 8)
   
    imgui.get_style().set_color_(imgui.Col_.text,                         ImVec4(0.8, 0.8, 0.85, 1.0))
    imgui.get_style().set_color_(imgui.Col_.text,                         ImVec4(1.000, 1.000, 1.000, 1.000))
    imgui.get_style().set_color_(imgui.Col_.text_disabled,                ImVec4(0.500, 0.500, 0.500, 1.000))
    imgui.get_style().set_color_(imgui.Col_.window_bg,                    ImVec4(0.149, 0.149, 0.149, 1.000))
    imgui.get_style().set_color_(imgui.Col_.child_bg,                     ImVec4(0.280, 0.280, 0.280, 0.000))
    imgui.get_style().set_color_(imgui.Col_.popup_bg,                     ImVec4(0.106, 0.106, 0.106, 1.000))
    imgui.get_style().set_color_(imgui.Col_.border,                       ImVec4(0.077, 0.077, 0.077, 1.000))
    imgui.get_style().set_color_(imgui.Col_.border_shadow,                ImVec4(0.000, 0.000, 0.000, 0.000))
    imgui.get_style().set_color_(imgui.Col_.frame_bg,                     ImVec4(0.105, 0.105, 0.105, 1.000))
    imgui.get_style().set_color_(imgui.Col_.frame_bg_hovered,             ImVec4(1.000, 1.000, 1.000, 0.127)) #new System.Numerics.Vector4(0.271f, 0.251f, 0.197f, 1.000f);
    imgui.get_style().set_color_(imgui.Col_.frame_bg_active,              ImVec4(0.280, 0.280, 0.280, 1.000))
    imgui.get_style().set_color_(imgui.Col_.title_bg,                     ImVec4(0.082, 0.082, 0.082, 1.000))
    imgui.get_style().set_color_(imgui.Col_.title_bg_active,              ImVec4(0.082, 0.082, 0.082, 1.000))
    imgui.get_style().set_color_(imgui.Col_.title_bg_collapsed,           ImVec4(0.082, 0.082, 0.082, 1.000))
    imgui.get_style().set_color_(imgui.Col_.menu_bar_bg,                  ImVec4(0.102, 0.102, 0.102, 1.000))
    imgui.get_style().set_color_(imgui.Col_.scrollbar_bg,                 ImVec4(0.129, 0.129, 0.129, 1.000))
    imgui.get_style().set_color_(imgui.Col_.scrollbar_grab,               ImVec4(0.277, 0.277, 0.277, 1.000))
    imgui.get_style().set_color_(imgui.Col_.scrollbar_grab_hovered,       ImVec4(0.391, 0.391, 0.391, 1.000)) # //new System.Numerics.Vector4(0.300f, 0.300f, 0.300f, 1.000f); 
    imgui.get_style().set_color_(imgui.Col_.scrollbar_grab_active,        ImVec4(1.000, 0.391, 0.000, 1.000))
    imgui.get_style().set_color_(imgui.Col_.check_mark,                   ImVec4(1.000, 1.000, 1.000, 1.000))
    imgui.get_style().set_color_(imgui.Col_.slider_grab,                  ImVec4(0.391, 0.391, 0.391, 1.000))
    imgui.get_style().set_color_(imgui.Col_.slider_grab_active,           ImVec4(1.000, 0.391, 0.000, 1.000))
    imgui.get_style().set_color_(imgui.Col_.button,                       ImVec4(1.000, 1.000, 1.000, 0.065))
    imgui.get_style().set_color_(imgui.Col_.button_hovered,               imgui.get_style().color_(imgui.Col_.frame_bg_hovered)) 
    imgui.get_style().set_color_(imgui.Col_.header,                       ImVec4(0.188, 0.188, 0.188, 1.000))
    imgui.get_style().set_color_(imgui.Col_.header_hovered,               imgui.get_style().color_(imgui.Col_.frame_bg_hovered)) 
    imgui.get_style().set_color_(imgui.Col_.header_active,                ImVec4(0.469, 0.469, 0.469, 1.000))
    imgui.get_style().set_color_(imgui.Col_.separator,                    ImVec4(0.129, 0.129, 0.129, 1.000))
    imgui.get_style().set_color_(imgui.Col_.separator_hovered,            imgui.get_style().color_(imgui.Col_.scrollbar_grab_hovered))
    imgui.get_style().set_color_(imgui.Col_.separator_active,             ImVec4(1.000, 0.391, 0.000, 1.000))
    imgui.get_style().set_color_(imgui.Col_.resize_grip,                  ImVec4(1.000, 1.000, 1.000, 0.250))
    imgui.get_style().set_color_(imgui.Col_.resize_grip_hovered,          imgui.get_style().color_(imgui.Col_.scrollbar_grab_hovered)) 
    imgui.get_style().set_color_(imgui.Col_.resize_grip_active,           ImVec4(1.000, 0.391, 0.000, 1.000))
    imgui.get_style().set_color_(imgui.Col_.tab,                          ImVec4(0.098, 0.098, 0.098, 1.000))
    imgui.get_style().set_color_(imgui.Col_.tab_hovered,                  imgui.get_style().color_(imgui.Col_.frame_bg_hovered))
    imgui.get_style().set_color_(imgui.Col_.tab_dimmed,                   imgui.get_style().color_(imgui.Col_.tab_dimmed_selected_overline)) 
    imgui.get_style().set_color_(imgui.Col_.tab_dimmed_selected,          ImVec4(0.149, 0.149, 0.149, 1.000))
    imgui.get_style().set_color_(imgui.Col_.tab_dimmed_selected_overline, ImVec4(0.195, 0.195, 0.195, 1.000))
    imgui.get_style().set_color_(imgui.Col_.tab_selected,                 ImVec4(0.149, 0.149, 0.149, 1.000))
    imgui.get_style().set_color_(imgui.Col_.tab_selected_overline,        ImVec4(0.949, 0.149, 0.149, 0.300))
    imgui.get_style().set_color_(imgui.Col_.docking_preview,              ImVec4(1.000, 0.391, 0.000, 0.781))
    imgui.get_style().set_color_(imgui.Col_.docking_empty_bg,             ImVec4(0.180, 0.180, 0.180, 1.000))
    imgui.get_style().set_color_(imgui.Col_.plot_lines,                   ImVec4(0.469, 0.469, 0.469, 1.000))
    imgui.get_style().set_color_(imgui.Col_.plot_lines_hovered,           ImVec4(1.000, 0.391, 0.000, 1.000))
    imgui.get_style().set_color_(imgui.Col_.plot_histogram,               ImVec4(0.586, 0.586, 0.586, 1.000))
    imgui.get_style().set_color_(imgui.Col_.plot_histogram_hovered,       ImVec4(1.000, 0.391, 0.000, 1.000))
    imgui.get_style().set_color_(imgui.Col_.text_selected_bg,             ImVec4(1.000, 1.000, 1.000, 0.156))
    imgui.get_style().set_color_(imgui.Col_.drag_drop_target,             ImVec4(1.000, 0.391, 0.000, 1.000))
    imgui.get_style().set_color_(imgui.Col_.nav_highlight,                ImVec4(1.000, 0.391, 0.000, 1.000))
    imgui.get_style().set_color_(imgui.Col_.nav_windowing_highlight,      ImVec4(1.000, 0.391, 0.000, 1.000))
    imgui.get_style().set_color_(imgui.Col_.nav_windowing_dim_bg,         ImVec4(0.000, 0.000, 0.000, 0.586))
    imgui.get_style().set_color_(imgui.Col_.modal_window_dim_bg,          ImVec4(0.000, 0.000, 0.000, 0.586))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
faq A frequent issue, remaining opened to facilitate discoverability
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@tingspain @pthom