CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/pypi-imgui

Cython-based Python bindings for dear imgui - a bloat-free immediate mode graphical user interface library

Pending
Overview
Eval results
Files

styling.mddocs/

Styling and Theming

Comprehensive styling system for customizing colors, spacing, fonts, and visual appearance. ImGui provides a flexible theming system that supports style stacks, predefined color themes, and fine-grained control over every visual aspect of the interface.

Capabilities

Style and IO Access

Core functions for accessing ImGui's style and input/output configuration objects.

def get_style():
    """Get current style object for customization."""

def get_io():
    """Get current IO object for input configuration."""

def get_style_color_name(index: int) -> str:
    """Get name of style color by index."""

Style Variables

Functions for modifying spacing, sizing, and layout properties with stack-based management.

def push_style_var(variable: int, value: float) -> None:
    """Push style variable onto stack. Value can be float or Vec2."""

def pop_style_var(count: int = 1) -> None:
    """Pop style variables from stack."""

def push_item_width(item_width: float) -> None:
    """Push item width onto stack."""

def pop_item_width() -> None:
    """Pop item width from stack."""

def set_next_item_width(item_width: float) -> None:
    """Set width for next item only."""

def calculate_item_width() -> float:
    """Calculate current item width."""

def push_text_wrap_pos(wrap_pos_x: float = 0.0) -> None:
    """Push text wrap position onto stack."""

def pop_text_wrap_pos() -> None:
    """Pop text wrap position from stack."""

Style Colors

Functions for customizing colors with stack-based management and theme presets.

def push_style_color(variable: int, r: float, g: float, b: float, a: float = 1.0) -> None:
    """Push style color onto stack."""

def pop_style_color(count: int = 1) -> None:
    """Pop style colors from stack."""

def get_style_color_vec_4(idx: int) -> tuple[float, float, float, float]:
    """Get style color as RGBA tuple."""

def get_style_color_name(index: int) -> str:
    """Get style color name by index."""

def style_colors_dark() -> None:
    """Apply dark color theme."""

def style_colors_classic() -> None:
    """Apply classic color theme."""

def style_colors_light() -> None:
    """Apply light color theme."""

Font Management

Functions for font selection and sizing with stack-based management.

def push_font(font) -> None:
    """Push font onto stack."""

def pop_font() -> None:
    """Pop font from stack."""

def get_font_size() -> float:
    """Get current font size."""

def get_font_tex_uv_white_pixel() -> tuple[float, float]:
    """Get font texture white pixel UV coordinates."""

def calc_text_size(text: str, hide_text_after_double_hash: bool = False, wrap_width: float = -1.0) -> tuple[float, float]:
    """Calculate text size for given string."""

Input and Focus Control

Functions for controlling keyboard focus and button repeat behavior.

def push_allow_keyboard_focus(allow_focus: bool) -> None:
    """Push keyboard focus flag onto stack."""

def pop_allow_keyboard_focus() -> None:
    """Pop keyboard focus flag from stack."""

def push_button_repeat(repeat: bool) -> None:
    """Push button repeat flag onto stack."""

def pop_button_repeat() -> None:
    """Pop button repeat flag from stack."""

Style Variable Constants

Constants for modifying various style properties.

# Basic style variables
STYLE_ALPHA: int                    # Global alpha (float)
STYLE_WINDOW_PADDING: int           # Window padding (Vec2)
STYLE_WINDOW_ROUNDING: int          # Window corner rounding (float)
STYLE_WINDOW_BORDERSIZE: int        # Window border size (float)
STYLE_WINDOW_MIN_SIZE: int          # Minimum window size (Vec2)
STYLE_WINDOW_TITLE_ALIGN: int       # Window title alignment (Vec2)
STYLE_CHILD_ROUNDING: int           # Child window rounding (float)
STYLE_CHILD_BORDERSIZE: int         # Child window border size (float)
STYLE_POPUP_ROUNDING: int           # Popup rounding (float)
STYLE_POPUP_BORDERSIZE: int         # Popup border size (float)
STYLE_FRAME_PADDING: int            # Frame padding (Vec2)
STYLE_FRAME_ROUNDING: int           # Frame rounding (float)
STYLE_FRAME_BORDERSIZE: int         # Frame border size (float)
STYLE_ITEM_SPACING: int             # Item spacing (Vec2)
STYLE_ITEM_INNER_SPACING: int       # Inner item spacing (Vec2)
STYLE_INDENT_SPACING: int           # Indentation spacing (float)
STYLE_CELL_PADDING: int             # Table cell padding (Vec2)
STYLE_SCROLLBAR_SIZE: int           # Scrollbar size (float)
STYLE_SCROLLBAR_ROUNDING: int       # Scrollbar rounding (float)
STYLE_GRAB_MIN_SIZE: int            # Minimum grab size (float)
STYLE_GRAB_ROUNDING: int            # Grab rounding (float)
STYLE_TAB_ROUNDING: int             # Tab rounding (float)
STYLE_BUTTON_TEXT_ALIGN: int        # Button text alignment (Vec2)
STYLE_SELECTABLE_TEXT_ALIGN: int    # Selectable text alignment (Vec2)

Color Constants

Constants for all customizable UI colors.

# Text colors
COLOR_TEXT: int
COLOR_TEXT_DISABLED: int
COLOR_TEXT_SELECTED_BACKGROUND: int

# Window colors
COLOR_WINDOW_BACKGROUND: int
COLOR_CHILD_BACKGROUND: int
COLOR_POPUP_BACKGROUND: int
COLOR_BORDER: int
COLOR_BORDER_SHADOW: int

# Frame colors
COLOR_FRAME_BACKGROUND: int
COLOR_FRAME_BACKGROUND_HOVERED: int
COLOR_FRAME_BACKGROUND_ACTIVE: int

# Title colors
COLOR_TITLE_BACKGROUND: int
COLOR_TITLE_BACKGROUND_ACTIVE: int
COLOR_TITLE_BACKGROUND_COLLAPSED: int

# Menu colors
COLOR_MENUBAR_BACKGROUND: int

# Scrollbar colors
COLOR_SCROLLBAR_BACKGROUND: int
COLOR_SCROLLBAR_GRAB: int
COLOR_SCROLLBAR_GRAB_HOVERED: int
COLOR_SCROLLBAR_GRAB_ACTIVE: int

# Widget colors
COLOR_CHECK_MARK: int
COLOR_SLIDER_GRAB: int
COLOR_SLIDER_GRAB_ACTIVE: int
COLOR_BUTTON: int
COLOR_BUTTON_HOVERED: int
COLOR_BUTTON_ACTIVE: int
COLOR_HEADER: int
COLOR_HEADER_HOVERED: int
COLOR_HEADER_ACTIVE: int
COLOR_SEPARATOR: int
COLOR_SEPARATOR_HOVERED: int
COLOR_SEPARATOR_ACTIVE: int
COLOR_RESIZE_GRIP: int
COLOR_RESIZE_GRIP_HOVERED: int
COLOR_RESIZE_GRIP_ACTIVE: int

# Tab colors
COLOR_TAB: int
COLOR_TAB_HOVERED: int
COLOR_TAB_ACTIVE: int
COLOR_TAB_UNFOCUSED: int
COLOR_TAB_UNFOCUSED_ACTIVE: int

# Plot colors
COLOR_PLOT_LINES: int
COLOR_PLOT_LINES_HOVERED: int
COLOR_PLOT_HISTOGRAM: int
COLOR_PLOT_HISTOGRAM_HOVERED: int

# Table colors
COLOR_TABLE_HEADER_BACKGROUND: int
COLOR_TABLE_BORDER_STRONG: int
COLOR_TABLE_BORDER_LIGHT: int
COLOR_TABLE_ROW_BACKGROUND: int
COLOR_TABLE_ROW_BACKGROUND_ALT: int

# Other colors
COLOR_DRAG_DROP_TARGET: int
COLOR_NAV_HIGHLIGHT: int
COLOR_NAV_WINDOWING_HIGHLIGHT: int
COLOR_NAV_WINDOWING_DIM_BACKGROUND: int
COLOR_MODAL_WINDOW_DIM_BACKGROUND: int

Style Context Manager (Extra Module)

Convenience context managers for temporary style changes.

def styled(variable: int, value: float):
    """Context manager for temporarily changing a style variable."""

def istyled(*variables_and_values):
    """Context manager for temporarily changing multiple style variables."""

def colored(variable: int, r: float, g: float, b: float, a: float = 1.0):
    """Context manager for temporarily changing a style color."""

Usage Examples

Basic Style Customization

import imgui

# Temporarily change button colors
imgui.push_style_color(imgui.COLOR_BUTTON, 1.0, 0.0, 0.0, 1.0)  # Red button
imgui.push_style_color(imgui.COLOR_BUTTON_HOVERED, 1.0, 0.5, 0.5, 1.0)  # Light red on hover
imgui.push_style_color(imgui.COLOR_BUTTON_ACTIVE, 0.8, 0.0, 0.0, 1.0)   # Dark red when pressed

if imgui.button("Red Button"):
    print("Red button clicked!")

imgui.pop_style_color(3)  # Pop all 3 colors

# Normal button
if imgui.button("Normal Button"):
    print("Normal button clicked!")

Style Variables

# Increase frame padding for larger buttons
imgui.push_style_var(imgui.STYLE_FRAME_PADDING, (20, 10))

if imgui.button("Large Padded Button"):
    print("Large button clicked!")

imgui.pop_style_var()

# Change window rounding
imgui.push_style_var(imgui.STYLE_WINDOW_ROUNDING, 15.0)
if imgui.begin("Rounded Window"):
    imgui.text("This window has rounded corners")
imgui.end()
imgui.pop_style_var()

Using Context Managers (Extra Module)

import imgui.extra as extra

# Temporary style changes using context managers
with extra.styled(imgui.STYLE_FRAME_ROUNDING, 10.0):
    if imgui.button("Rounded Button"):
        print("Rounded button clicked!")

# Multiple style changes
with extra.istyled(
    imgui.STYLE_FRAME_PADDING, (15, 8),
    imgui.STYLE_FRAME_ROUNDING, 5.0,
    imgui.STYLE_ITEM_SPACING, (10, 5)
):
    if imgui.button("Styled Button 1"):
        pass
    if imgui.button("Styled Button 2"):
        pass

# Temporary color changes
with extra.colored(imgui.COLOR_BUTTON, 0.0, 1.0, 0.0):  # Green button
    if imgui.button("Green Button"):
        print("Green button clicked!")

Theme Application

# Apply different themes
if imgui.button("Dark Theme"):
    imgui.style_colors_dark()

imgui.same_line()
if imgui.button("Light Theme"):
    imgui.style_colors_light()

imgui.same_line()
if imgui.button("Classic Theme"):
    imgui.style_colors_classic()

Custom Color Scheme

def apply_custom_theme():
    # Custom dark blue theme
    imgui.push_style_color(imgui.COLOR_WINDOW_BACKGROUND, 0.1, 0.1, 0.2, 1.0)
    imgui.push_style_color(imgui.COLOR_FRAME_BACKGROUND, 0.2, 0.2, 0.3, 1.0)
    imgui.push_style_color(imgui.COLOR_FRAME_BACKGROUND_HOVERED, 0.3, 0.3, 0.4, 1.0)
    imgui.push_style_color(imgui.COLOR_FRAME_BACKGROUND_ACTIVE, 0.4, 0.4, 0.5, 1.0)
    imgui.push_style_color(imgui.COLOR_BUTTON, 0.2, 0.3, 0.6, 1.0)
    imgui.push_style_color(imgui.COLOR_BUTTON_HOVERED, 0.3, 0.4, 0.7, 1.0)
    imgui.push_style_color(imgui.COLOR_BUTTON_ACTIVE, 0.4, 0.5, 0.8, 1.0)
    imgui.push_style_color(imgui.COLOR_HEADER, 0.2, 0.3, 0.6, 1.0)
    imgui.push_style_color(imgui.COLOR_HEADER_HOVERED, 0.3, 0.4, 0.7, 1.0)
    imgui.push_style_color(imgui.COLOR_HEADER_ACTIVE, 0.4, 0.5, 0.8, 1.0)

# Apply custom theme
apply_custom_theme()

# Your UI code here
if imgui.begin("Custom Themed Window"):
    imgui.text("This window uses a custom blue theme")
    if imgui.button("Custom Button"):
        print("Custom themed button clicked!")
imgui.end()

# Clean up
imgui.pop_style_color(10)

Font Management

# Load custom font (assuming you have a font loaded)
# custom_font = load_custom_font()

# Use custom font temporarily
# imgui.push_font(custom_font)
# imgui.text("This text uses custom font")
# imgui.pop_font()

# Calculate text size
text = "Sample text for measurement"
text_size = imgui.calc_text_size(text)
imgui.text(f"Text size: {text_size[0]:.1f} x {text_size[1]:.1f}")

Advanced Styling

# Create a styled section
imgui.push_style_var(imgui.STYLE_CHILD_ROUNDING, 8.0)
imgui.push_style_var(imgui.STYLE_CHILD_BORDERSIZE, 1.0)
imgui.push_style_color(imgui.COLOR_CHILD_BACKGROUND, 0.1, 0.1, 0.1, 0.5)

if imgui.begin_child("StyledSection", 0, 150, True):
    imgui.push_style_var(imgui.STYLE_ITEM_SPACING, (10, 8))
    
    imgui.text("Styled Section Content")
    
    if imgui.button("Button 1"):
        pass
    if imgui.button("Button 2"):
        pass
    
    imgui.pop_style_var()  # Item spacing
    
imgui.end_child()

imgui.pop_style_color()   # Child background
imgui.pop_style_var(2)    # Child rounding and border size

Responsive Styling

# Adjust styling based on window size
window_width = imgui.get_window_width()

if window_width < 400:
    # Compact layout for small windows
    imgui.push_style_var(imgui.STYLE_FRAME_PADDING, (2, 2))
    imgui.push_style_var(imgui.STYLE_ITEM_SPACING, (2, 2))
    button_size = (window_width - 20, 25)
else:
    # Normal layout for larger windows
    imgui.push_style_var(imgui.STYLE_FRAME_PADDING, (8, 4))
    imgui.push_style_var(imgui.STYLE_ITEM_SPACING, (8, 4))
    button_size = (150, 30)

if imgui.button("Responsive Button", *button_size):
    print("Responsive button clicked!")

imgui.pop_style_var(2)

Install with Tessl CLI

npx tessl i tessl/pypi-imgui

docs

drawing.md

index.md

input.md

integrations.md

layout.md

menus.md

styling.md

tables.md

tabs.md

widgets.md

windows.md

tile.json