Themes¶
- Themes are containers which are composed of:
- Theme Components:
containers within a theme that can specify an item type the theme colors/styles target
- Theme Colors:
items that are added to a theme component and set colors
- Theme Styles:
items that are added to a theme component and set styles
The theme can be:
bound as the default theme. This will have a global effect across all windows and propagate.
bound to a container. This will propagate to its children if applicable theme components are in the theme.
bound to an item type if applicable theme components are in the theme.
Theme components must have a specified item type. This can either be mvAll for all items or a specific item type.
Style and color items have a named constant and will apply that constant to their components named item type. Style and color items must have a named category. Constants contain their category in the name.
Theme colors and styles fall into the following categories:
- mvThemeCat_Plots:
Items that are associated with plots. Style/color constants identified by mvPlotCol_*** or mvPlotStyle_***
- mvThemeCat_Nodes:
Items that are associated with Nodes. Style/color constants identified by mvNodeCol_*** or mvNodeStyle_***
- mvThemeCat_Core:
All other items within dearpygui. Style/color constants identified by mvThemeCol_*** or mvThemeStyle_***
Default Theme (global)¶
Default themes will apply the theme globally across all windows and propagate to children.
import dearpygui.dearpygui as dpg
dpg.create_context()
with dpg.window(label="Tutorial", pos=(20, 50), width=275, height=225) as win1:
t1 = dpg.add_input_text(default_value="some text")
t2 = dpg.add_input_text(default_value="some text")
with dpg.child_window(height=100):
t3 = dpg.add_input_text(default_value="some text")
dpg.add_input_int()
dpg.add_input_text(default_value="some text")
with dpg.window(label="Tutorial", pos=(320, 50), width=275, height=225) as win2:
dpg.add_input_text(default_value="some text")
dpg.add_input_int()
with dpg.theme() as global_theme:
with dpg.theme_component(dpg.mvAll):
dpg.add_theme_color(dpg.mvThemeCol_FrameBg, (255, 140, 23), category=dpg.mvThemeCat_Core)
dpg.add_theme_style(dpg.mvStyleVar_FrameRounding, 5, category=dpg.mvThemeCat_Core)
with dpg.theme_component(dpg.mvInputInt):
dpg.add_theme_color(dpg.mvThemeCol_FrameBg, (140, 255, 23), category=dpg.mvThemeCat_Core)
dpg.add_theme_style(dpg.mvStyleVar_FrameRounding, 5, category=dpg.mvThemeCat_Core)
dpg.bind_theme(global_theme)
dpg.show_style_editor()
dpg.create_viewport(title='Custom Title', width=800, height=600)
dpg.setup_dearpygui()
dpg.show_viewport()
dpg.start_dearpygui()
dpg.destroy_context()
Container Propagation¶
Applying a theme to a container will propagate the theme to its children:
import dearpygui.dearpygui as dpg
dpg.create_context()
with dpg.window(label="Tutorial", pos=(20, 50), width=275, height=225) as win1:
t1 = dpg.add_input_text(default_value="some text")
t2 = dpg.add_input_text(default_value="some text")
with dpg.child_window(height=100):
t3 = dpg.add_input_text(default_value="some text")
dpg.add_input_int()
dpg.add_input_text(default_value="some text")
with dpg.window(label="Tutorial", pos=(320, 50), width=275, height=225) as win2:
dpg.add_input_text(default_value="some text")
dpg.add_input_int()
with dpg.theme() as container_theme:
with dpg.theme_component(dpg.mvAll):
dpg.add_theme_color(dpg.mvThemeCol_FrameBg, (150, 100, 100), category=dpg.mvThemeCat_Core)
dpg.add_theme_style(dpg.mvStyleVar_FrameRounding, 5, category=dpg.mvThemeCat_Core)
with dpg.theme_component(dpg.mvInputInt):
dpg.add_theme_color(dpg.mvThemeCol_FrameBg, (100, 150, 100), category=dpg.mvThemeCat_Core)
dpg.add_theme_style(dpg.mvStyleVar_FrameRounding, 5, category=dpg.mvThemeCat_Core)
dpg.bind_item_theme(win1, container_theme)
dpg.show_style_editor()
dpg.create_viewport(title='Custom Title', width=800, height=600)
dpg.setup_dearpygui()
dpg.show_viewport()
dpg.start_dearpygui()
dpg.destroy_context()
Item Specific¶
Applying a theme to an item will overide any previous themes on the specified item if the theme contains an applicable component.
import dearpygui.dearpygui as dpg
dpg.create_context()
with dpg.window(label="Tutorial", pos=(20, 50), width=275, height=225) as win1:
t1 = dpg.add_input_text(default_value="some text")
t2 = dpg.add_input_text(default_value="some text")
with dpg.child_window(height=100):
t3 = dpg.add_input_text(default_value="some text")
dpg.add_input_int()
dpg.add_input_text(default_value="some text")
with dpg.window(label="Tutorial", pos=(320, 50), width=275, height=225) as win2:
dpg.add_input_text(default_value="some text")
dpg.add_input_int()
with dpg.theme() as item_theme:
with dpg.theme_component(dpg.mvAll):
dpg.add_theme_color(dpg.mvThemeCol_FrameBg, (200, 200, 100), category=dpg.mvThemeCat_Core)
dpg.add_theme_style(dpg.mvStyleVar_FrameRounding, 0, category=dpg.mvThemeCat_Core)
dpg.bind_item_theme(t2, item_theme)
dpg.show_style_editor()
dpg.create_viewport(title='Custom Title', width=800, height=600)
dpg.setup_dearpygui()
dpg.show_viewport()
dpg.start_dearpygui()
dpg.destroy_context()
Priority of Themes¶
The theme prioritizes the latest applied theme in the order of
specific item
container inherited
global
import dearpygui.dearpygui as dpg
dpg.create_context()
with dpg.window(label="Tutorial", pos=(20, 50), width=275, height=225) as win1:
t1 = dpg.add_input_text(default_value="some text")
t2 = dpg.add_input_text(default_value="some text")
with dpg.child_window(height=100):
t3 = dpg.add_input_text(default_value="some text")
dpg.add_input_int()
dpg.add_input_text(default_value="some text")
with dpg.window(label="Tutorial", pos=(320, 50), width=275, height=225) as win2:
dpg.add_input_text(default_value="some text")
dpg.add_input_int()
with dpg.theme() as global_theme:
with dpg.theme_component(dpg.mvAll):
dpg.add_theme_color(dpg.mvThemeCol_FrameBg, (255, 140, 23), category=dpg.mvThemeCat_Core)
dpg.add_theme_style(dpg.mvStyleVar_FrameRounding, 5, category=dpg.mvThemeCat_Core)
with dpg.theme_component(dpg.mvInputInt):
dpg.add_theme_color(dpg.mvThemeCol_FrameBg, (140, 255, 23), category=dpg.mvThemeCat_Core)
dpg.add_theme_style(dpg.mvStyleVar_FrameRounding, 5, category=dpg.mvThemeCat_Core)
with dpg.theme() as container_theme:
with dpg.theme_component(dpg.mvAll):
dpg.add_theme_color(dpg.mvThemeCol_FrameBg, (150, 100, 100), category=dpg.mvThemeCat_Core)
dpg.add_theme_style(dpg.mvStyleVar_FrameRounding, 5, category=dpg.mvThemeCat_Core)
with dpg.theme_component(dpg.mvInputInt):
dpg.add_theme_color(dpg.mvThemeCol_FrameBg, (100, 150, 100), category=dpg.mvThemeCat_Core)
dpg.add_theme_style(dpg.mvStyleVar_FrameRounding, 5, category=dpg.mvThemeCat_Core)
with dpg.theme() as item_theme:
with dpg.theme_component(dpg.mvAll):
dpg.add_theme_color(dpg.mvThemeCol_FrameBg, (200, 200, 100), category=dpg.mvThemeCat_Core)
dpg.add_theme_style(dpg.mvStyleVar_FrameRounding, 0, category=dpg.mvThemeCat_Core)
dpg.bind_theme(global_theme)
dpg.bind_item_theme(win1, container_theme)
dpg.bind_item_theme(t2, item_theme)
dpg.show_style_editor()
dpg.create_viewport(title='Custom Title', width=800, height=600)
dpg.setup_dearpygui()
dpg.show_viewport()
dpg.start_dearpygui()
dpg.destroy_context()
Theme for Disabled Items¶
Each item has a separate disabled theme that is used when the item is disabled. The disabled theme follows the same propagation rules as the enabled theme. When an item’s parameter enabled is set to False the item will use its disabled theme. If no disabled theme has been set the default theme will be used.
import dearpygui.dearpygui as dpg
dpg.create_context()
dpg.create_viewport()
dpg.setup_dearpygui()
with dpg.theme() as disabled_theme:
with dpg.theme_component(dpg.mvInputFloat, enabled_state=False):
dpg.add_theme_color(dpg.mvThemeCol_Text, [255, 0, 0])
dpg.add_theme_color(dpg.mvThemeCol_Button, [255, 0, 0])
with dpg.theme_component(dpg.mvInputInt, enabled_state=False):
dpg.add_theme_color(dpg.mvThemeCol_Text, [255, 0, 0])
dpg.add_theme_color(dpg.mvThemeCol_Button, [255, 0, 0])
dpg.bind_theme(disabled_theme)
with dpg.window(label="tutorial"):
dpg.add_input_float(label="Input float", enabled=False)
dpg.add_input_int(label="Input int", enabled=False)
dpg.show_viewport()
dpg.start_dearpygui()
dpg.destroy_context()
Plot Markers¶
Plot Markers |
|
|---|---|
mvPlotMarker_None |
mvPlotMarker_Circle |
mvPlotMarker_Square |
mvPlotMarker_Diamond |
mvPlotMarker_Up |
mvPlotMarker_Down |
mvPlotMarker_Left |
mvPlotMarker_Right |
mvPlotMarker_Cross |
mvPlotMarker_Plus |
mvPlotMarker_Asterisk |
Core Colors¶
Core Colors |
||
|---|---|---|
mvThemeCol_Text |
mvThemeCol_TabActive |
mvThemeCol_SliderGrabActive |
mvThemeCol_TextDisabled |
mvThemeCol_TabUnfocused |
mvThemeCol_Button |
mvThemeCol_WindowBg |
mvThemeCol_TabUnfocusedActive |
mvThemeCol_ButtonHovered |
mvThemeCol_ChildBg |
mvThemeCol_DockingPreview |
mvThemeCol_ButtonActive |
mvThemeCol_Border |
mvThemeCol_DockingEmptyBg |
mvThemeCol_Header |
mvThemeCol_PopupBg |
mvThemeCol_PlotLines |
mvThemeCol_HeaderHovered |
mvThemeCol_BorderShadow |
mvThemeCol_PlotLinesHovered |
mvThemeCol_HeaderActive |
mvThemeCol_FrameBg |
mvThemeCol_PlotHistogram |
mvThemeCol_Separator |
mvThemeCol_FrameBgHovered |
mvThemeCol_PlotHistogramHovered |
mvThemeCol_SeparatorHovered |
mvThemeCol_FrameBgActive |
mvThemeCol_TableHeaderBg |
mvThemeCol_SeparatorActive |
mvThemeCol_TitleBg |
mvThemeCol_TableBorderStrong |
mvThemeCol_ResizeGrip |
mvThemeCol_TitleBgActive |
mvThemeCol_TableBorderLight |
mvThemeCol_ResizeGripHovered |
mvThemeCol_TitleBgCollapsed |
mvThemeCol_TableRowBg |
mvThemeCol_ResizeGripActive |
mvThemeCol_MenuBarBg |
mvThemeCol_TableRowBgAlt |
mvThemeCol_Tab |
mvThemeCol_ScrollbarBg |
mvThemeCol_TextSelectedBg |
mvThemeCol_TabHovered |
mvThemeCol_ScrollbarGrab |
mvThemeCol_DragDropTarget |
|
mvThemeCol_ScrollbarGrabHovered |
mvThemeCol_NavHighlight |
|
mvThemeCol_ScrollbarGrabActive |
mvThemeCol_NavWindowingHighlight |
|
mvThemeCol_CheckMark |
mvThemeCol_NavWindowingDimBg |
|
mvThemeCol_SliderGrab |
mvThemeCol_ModalWindowDimBg |
Plot Colors¶
Plot Colors |
||
|---|---|---|
mvPlotCol_Line |
mvPlotCol_LegendBg |
mvPlotCol_AxisBgHovered |
mvPlotCol_Fill |
mvPlotCol_LegendBorder |
mvPlotCol_AxisGrid |
mvPlotCol_MarkerOutline |
mvPlotCol_LegendText |
mvPlotCol_AxisText |
mvPlotCol_MarkerFill |
mvPlotCol_TitleText |
mvPlotCol_Selection |
mvPlotCol_ErrorBar |
mvPlotCol_InlayText |
|
mvPlotCol_FrameBg |
mvPlotCol_AxisBg |
|
mvPlotCol_PlotBg |
mvPlotCol_AxisBgActive |
|
mvPlotCol_PlotBorder |
mvPlotCol_Crosshairs |
Node Colors¶
Node Colors |
||
|---|---|---|
mvNodeCol_NodeBackground |
mvNodeCol_TitleBarSelected |
mvNodeCol_BoxSelector |
mvNodeCol_NodeBackgroundHovered |
mvNodeCol_Link |
mvNodeCol_BoxSelectorOutline |
mvNodeCol_NodeBackgroundSelected |
mvNodeCol_LinkHovered |
mvNodeCol_GridBackground |
mvNodeCol_NodeOutline |
mvNodeCol_LinkSelected |
mvNodeCol_GridLine |
mvNodeCol_TitleBar |
mvNodeCol_Pin |
mvNodeCol_PinHovered |
mvNodeCol_TitleBarHovered |
Core Styles¶
Constant |
Components |
|---|---|
mvStyleVar_Alpha |
1 |
mvStyleVar_DisabledAlpha |
1 |
mvStyleVar_WindowPadding |
2 |
mvStyleVar_WindowRounding |
1 |
mvStyleVar_WindowBorderSize |
1 |
mvStyleVar_WindowMinSize |
2 |
mvStyleVar_WindowTitleAlign |
2 |
mvStyleVar_ChildRounding |
1 |
mvStyleVar_ChildBorderSize |
1 |
mvStyleVar_PopupRounding |
1 |
mvStyleVar_PopupBorderSize |
1 |
mvStyleVar_FramePadding |
2 |
mvStyleVar_FrameRounding |
1 |
mvStyleVar_FrameBorderSize |
1 |
mvStyleVar_ItemSpacing |
2 |
mvStyleVar_ItemInnerSpacing |
2 |
mvStyleVar_IndentSpacing |
1 |
mvStyleVar_CellPadding |
2 |
mvStyleVar_ScrollbarSize |
1 |
mvStyleVar_ScrollbarRounding |
1 |
mvStyleVar_GrabMinSize |
1 |
mvStyleVar_GrabRounding |
1 |
mvStyleVar_TabRounding |
1 |
mvStyleVar_TabBorderSize |
1 |
mvStyleVar_TabBarBorderSize |
1 |
mvStyleVar_TableAngledHeadersAngle |
1 |
mvStyleVar_TableAngledHeadersTextAlign |
2 |
mvStyleVar_ButtonTextAlign |
2 |
mvStyleVar_SelectableTextAlign |
2 |
mvStyleVar_SeparatorTextBorderSize |
1 |
mvStyleVar_SeparatorTextAlign |
2 |
mvStyleVar_SeparatorTextPadding |
2 |
Plot Styles¶
Constant |
Components |
|---|---|
mvPlotStyleVar_LineWeight |
1 |
mvPlotStyleVar_Marker |
1 |
mvPlotStyleVar_MarkerSize |
1 |
mvPlotStyleVar_MarkerWeight |
1 |
mvPlotStyleVar_FillAlpha |
1 |
mvPlotStyleVar_ErrorBarSize |
1 |
mvPlotStyleVar_ErrorBarWeight |
1 |
mvPlotStyleVar_DigitalBitHeight |
1 |
mvPlotStyleVar_DigitalBitGap |
1 |
mvPlotStyleVar_PlotBorderSize |
1 |
mvPlotStyleVar_MinorAlpha |
1 |
mvPlotStyleVar_MajorTickLen |
2 |
mvPlotStyleVar_MinorTickLen |
2 |
mvPlotStyleVar_MajorTickSize |
2 |
mvPlotStyleVar_MinorTickSize |
2 |
mvPlotStyleVar_MajorGridSize |
2 |
mvPlotStyleVar_MinorGridSize |
2 |
mvPlotStyleVar_PlotPadding |
2 |
mvPlotStyleVar_LabelPadding |
2 |
mvPlotStyleVar_LegendPadding |
2 |
mvPlotStyleVar_LegendInnerPadding |
2 |
mvPlotStyleVar_LegendSpacing |
2 |
mvPlotStyleVar_MousePosPadding |
2 |
mvPlotStyleVar_AnnotationPadding |
2 |
mvPlotStyleVar_FitPadding |
2 |
mvPlotStyleVar_PlotDefaultSize |
2 |
mvPlotStyleVar_PlotMinSize |
2 |
Node Styles¶
Constant |
Components |
|---|---|
mvNodeStyleVar_GridSpacing |
1 |
mvNodeStyleVar_NodeCornerRounding |
1 |
mvNodeStyleVar_NodePaddingHorizontal |
1 |
mvNodeStyleVar_NodePaddingVertical |
1 |
mvNodeStyleVar_NodeBorderThickness |
1 |
mvNodeStyleVar_LinkThickness |
1 |
mvNodeStyleVar_LinkLineSegmentsPerLength |
1 |
mvNodeStyleVar_LinkHoverDistance |
1 |
mvNodeStyleVar_PinCircleRadius |
1 |
mvNodeStyleVar_PinQuadSideLength |
1 |
mvNodeStyleVar_PinTriangleSideLength |
1 |
mvNodeStyleVar_PinLineThickness |
1 |
mvNodeStyleVar_PinHoverRadius |
1 |
mvNodeStyleVar_PinOffset |
1 |