themes.py 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. """# Theming
  2. Dear ImGui Bundle supports theming at two levels:
  3. **Hello ImGui themes** provide complete, pre-designed looks. Apply one with a single line:
  4. ```python
  5. hello_imgui.apply_theme(hello_imgui.ImGuiTheme_.darcula) # or apply_tweaked_theme (see below)
  6. ```
  7. **Tweaks** let you fine-tune colors, rounding, spacing, and other style variables.
  8. """
  9. from imgui_bundle import imgui, immapp, hello_imgui, imgui_md, ImVec2
  10. def gui_select_theme() -> None:
  11. """Shows hello_imgui's theme selector and tweak panel
  12. Note: to select a theme at startup simply call
  13. hello_imgui.apply_theme(hello_imgui.ImGuiTheme_.darcula)
  14. """
  15. tweaked_theme = hello_imgui.get_runner_params().imgui_window_params.tweaked_theme
  16. changed = hello_imgui.show_theme_tweak_gui(tweaked_theme)
  17. if changed:
  18. hello_imgui.apply_tweaked_theme(tweaked_theme)
  19. def gui_preview_theme_with_widgets() -> None:
  20. """Show a collection of widgets to demonstrate the effect of the theme"""
  21. # Right: sample widgets to preview the theme
  22. imgui.begin_child("##preview")
  23. imgui.text("Preview widgets:")
  24. imgui.separator()
  25. imgui.button("Button")
  26. imgui.same_line()
  27. imgui.button("Another")
  28. imgui.same_line()
  29. imgui.small_button("Small")
  30. _ = imgui.checkbox("Checkbox", True)
  31. imgui.same_line()
  32. _ = imgui.checkbox("Unchecked", False)
  33. em = hello_imgui.em_size()
  34. imgui.set_next_item_width(em * 12)
  35. _ = imgui.slider_float("Slider", 0.5, 0.0, 1.0)
  36. imgui.set_next_item_width(em * 12)
  37. _ = imgui.input_text("Input", "Hello")
  38. imgui.set_next_item_width(em * 12)
  39. _ = imgui.combo(
  40. "Combo", 0,
  41. ["Option A", "Option B", "Option C"])
  42. if imgui.collapsing_header("Collapsing Header"):
  43. imgui.text("Inside a collapsing header")
  44. imgui.bullet_text("Bullet item 1")
  45. imgui.bullet_text("Bullet item 2")
  46. imgui.progress_bar(0.7, (em * 12, 0), "70%")
  47. if imgui.tree_node("Tree Node"):
  48. imgui.text("Tree content")
  49. imgui.tree_pop()
  50. imgui_md.render_unindented(r"""
  51. #### Markdown examples
  52. | | |
  53. |----------|-------------------------------------------------------------------------|
  54. | Emphasis | *italic*, **bold**, ***both*** |
  55. | Code | `inline_code()` |
  56. | Links | [Example](https://example.com) |
  57. | Math | $e^{i\theta} = \cos(\theta) + i \sin(\theta)$ |
  58. | Image | ![random image](https://picsum.photos/160/120) |
  59. ```python
  60. print("This is a code block")
  61. ```
  62. """)
  63. imgui.end_child()
  64. def gui_layout() -> None:
  65. """Main Gui function
  66. - Renders the Markdown doc
  67. - Creates two panel (child_window):
  68. - on the left, the theme selector
  69. - on the right, a widget collection to preview the theme
  70. """
  71. # Documentation panel
  72. immapp.render_markdown_doc_panel(__doc__, height_em=14)
  73. avail = imgui.get_content_region_avail()
  74. # Left: theme selector / tweak panel (resizable)
  75. left_w = avail.x * 0.5 # initial width
  76. imgui.begin_child("##theme_tweak", size=(left_w, 0),
  77. child_flags=imgui.ChildFlags_.resize_x)
  78. gui_select_theme()
  79. imgui.end_child()
  80. # Make sure our two panels are horizontally side by side
  81. imgui.same_line()
  82. # Right: preview with widgets
  83. imgui.begin_child("##preview")
  84. gui_preview_theme_with_widgets()
  85. imgui.end_child()
  86. ##########################################################################
  87. # Define the app initial theme
  88. ##########################################################################
  89. def setup_my_theme():
  90. """Example of theme customization at App startup
  91. This function is called in the callback `setup_imgui_style` in order to apply a custom theme:
  92. runner_params.callbacks.setup_imgui_style = setup_my_theme()
  93. """
  94. # Apply default style
  95. hello_imgui.imgui_default_settings.setup_default_imgui_style()
  96. # Create a tweaked theme
  97. tweaked_theme = hello_imgui.ImGuiTweakedTheme()
  98. tweaked_theme.theme = hello_imgui.ImGuiTheme_.material_flat
  99. tweaked_theme.tweaks.rounding = 10.0
  100. # Apply the tweaked theme
  101. 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()
  102. # Then apply further modifications to ImGui style
  103. imgui.get_style().item_spacing = ImVec2(6, 4) # Reduce spacing between items ((8, 4) by default)
  104. imgui.get_style().set_color_(imgui.Col_.text, (0.8, 0.8, 0.85, 1.0)) # Change text color
  105. def main():
  106. # Here we use the fully customizable to set up an application:
  107. # 1. Define and populate hello_imgui RunnerParams
  108. # (in this example, we change the theme at startup)
  109. params = hello_imgui.RunnerParams()
  110. params.callbacks.show_gui = gui_layout
  111. params.callbacks.setup_imgui_style = setup_my_theme
  112. params.app_window_params.window_geometry.size = (1000, 700)
  113. params.app_window_params.window_title = "Themes"
  114. params.ini_disable = True
  115. # 2. Define which addons we want to activate
  116. addons = immapp.AddOnsParams()
  117. addons.with_markdown = True
  118. addons.with_latex = True
  119. # 3. Run the app
  120. immapp.run(params, addons)
  121. if __name__ == "__main__":
  122. main()