0
# Styling and Theming
1

2
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.
3

4
## Capabilities
5

6
### Style and IO Access
7

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

10
```python { .api }
11
def get_style():
12
    """Get current style object for customization."""
13

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

17
def get_style_color_name(index: int) -> str:
18
    """Get name of style color by index."""
19
```
20

21
### Style Variables
22

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

25
```python { .api }
26
def push_style_var(variable: int, value: float) -> None:
27
    """Push style variable onto stack. Value can be float or Vec2."""
28

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

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

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

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

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

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

47
def pop_text_wrap_pos() -> None:
48
    """Pop text wrap position from stack."""
49
```
50

51
### Style Colors
52

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

55
```python { .api }
56
def push_style_color(variable: int, r: float, g: float, b: float, a: float = 1.0) -> None:
57
    """Push style color onto stack."""
58

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

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

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

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

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

74
def style_colors_light() -> None:
75
    """Apply light color theme."""
76
```
77

78
### Font Management
79

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

82
```python { .api }
83
def push_font(font) -> None:
84
    """Push font onto stack."""
85

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

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

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

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

99
### Input and Focus Control
100

101
Functions for controlling keyboard focus and button repeat behavior.
102

103
```python { .api }
104
def push_allow_keyboard_focus(allow_focus: bool) -> None:
105
    """Push keyboard focus flag onto stack."""
106

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

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

113
def pop_button_repeat() -> None:
114
    """Pop button repeat flag from stack."""
115
```
116

117
### Style Variable Constants
118

119
Constants for modifying various style properties.
120

121
```python { .api }
122
# Basic style variables
123
STYLE_ALPHA: int                    # Global alpha (float)
124
STYLE_WINDOW_PADDING: int           # Window padding (Vec2)
125
STYLE_WINDOW_ROUNDING: int          # Window corner rounding (float)
126
STYLE_WINDOW_BORDERSIZE: int        # Window border size (float)
127
STYLE_WINDOW_MIN_SIZE: int          # Minimum window size (Vec2)
128
STYLE_WINDOW_TITLE_ALIGN: int       # Window title alignment (Vec2)
129
STYLE_CHILD_ROUNDING: int           # Child window rounding (float)
130
STYLE_CHILD_BORDERSIZE: int         # Child window border size (float)
131
STYLE_POPUP_ROUNDING: int           # Popup rounding (float)
132
STYLE_POPUP_BORDERSIZE: int         # Popup border size (float)
133
STYLE_FRAME_PADDING: int            # Frame padding (Vec2)
134
STYLE_FRAME_ROUNDING: int           # Frame rounding (float)
135
STYLE_FRAME_BORDERSIZE: int         # Frame border size (float)
136
STYLE_ITEM_SPACING: int             # Item spacing (Vec2)
137
STYLE_ITEM_INNER_SPACING: int       # Inner item spacing (Vec2)
138
STYLE_INDENT_SPACING: int           # Indentation spacing (float)
139
STYLE_CELL_PADDING: int             # Table cell padding (Vec2)
140
STYLE_SCROLLBAR_SIZE: int           # Scrollbar size (float)
141
STYLE_SCROLLBAR_ROUNDING: int       # Scrollbar rounding (float)
142
STYLE_GRAB_MIN_SIZE: int            # Minimum grab size (float)
143
STYLE_GRAB_ROUNDING: int            # Grab rounding (float)
144
STYLE_TAB_ROUNDING: int             # Tab rounding (float)
145
STYLE_BUTTON_TEXT_ALIGN: int        # Button text alignment (Vec2)
146
STYLE_SELECTABLE_TEXT_ALIGN: int    # Selectable text alignment (Vec2)
147
```
148

149
### Color Constants
150

151
Constants for all customizable UI colors.
152

153
```python { .api }
154
# Text colors
155
COLOR_TEXT: int
156
COLOR_TEXT_DISABLED: int
157
COLOR_TEXT_SELECTED_BACKGROUND: int
158

159
# Window colors
160
COLOR_WINDOW_BACKGROUND: int
161
COLOR_CHILD_BACKGROUND: int
162
COLOR_POPUP_BACKGROUND: int
163
COLOR_BORDER: int
164
COLOR_BORDER_SHADOW: int
165

166
# Frame colors
167
COLOR_FRAME_BACKGROUND: int
168
COLOR_FRAME_BACKGROUND_HOVERED: int
169
COLOR_FRAME_BACKGROUND_ACTIVE: int
170

171
# Title colors
172
COLOR_TITLE_BACKGROUND: int
173
COLOR_TITLE_BACKGROUND_ACTIVE: int
174
COLOR_TITLE_BACKGROUND_COLLAPSED: int
175

176
# Menu colors
177
COLOR_MENUBAR_BACKGROUND: int
178

179
# Scrollbar colors
180
COLOR_SCROLLBAR_BACKGROUND: int
181
COLOR_SCROLLBAR_GRAB: int
182
COLOR_SCROLLBAR_GRAB_HOVERED: int
183
COLOR_SCROLLBAR_GRAB_ACTIVE: int
184

185
# Widget colors
186
COLOR_CHECK_MARK: int
187
COLOR_SLIDER_GRAB: int
188
COLOR_SLIDER_GRAB_ACTIVE: int
189
COLOR_BUTTON: int
190
COLOR_BUTTON_HOVERED: int
191
COLOR_BUTTON_ACTIVE: int
192
COLOR_HEADER: int
193
COLOR_HEADER_HOVERED: int
194
COLOR_HEADER_ACTIVE: int
195
COLOR_SEPARATOR: int
196
COLOR_SEPARATOR_HOVERED: int
197
COLOR_SEPARATOR_ACTIVE: int
198
COLOR_RESIZE_GRIP: int
199
COLOR_RESIZE_GRIP_HOVERED: int
200
COLOR_RESIZE_GRIP_ACTIVE: int
201

202
# Tab colors
203
COLOR_TAB: int
204
COLOR_TAB_HOVERED: int
205
COLOR_TAB_ACTIVE: int
206
COLOR_TAB_UNFOCUSED: int
207
COLOR_TAB_UNFOCUSED_ACTIVE: int
208

209
# Plot colors
210
COLOR_PLOT_LINES: int
211
COLOR_PLOT_LINES_HOVERED: int
212
COLOR_PLOT_HISTOGRAM: int
213
COLOR_PLOT_HISTOGRAM_HOVERED: int
214

215
# Table colors
216
COLOR_TABLE_HEADER_BACKGROUND: int
217
COLOR_TABLE_BORDER_STRONG: int
218
COLOR_TABLE_BORDER_LIGHT: int
219
COLOR_TABLE_ROW_BACKGROUND: int
220
COLOR_TABLE_ROW_BACKGROUND_ALT: int
221

222
# Other colors
223
COLOR_DRAG_DROP_TARGET: int
224
COLOR_NAV_HIGHLIGHT: int
225
COLOR_NAV_WINDOWING_HIGHLIGHT: int
226
COLOR_NAV_WINDOWING_DIM_BACKGROUND: int
227
COLOR_MODAL_WINDOW_DIM_BACKGROUND: int
228
```
229

230
### Style Context Manager (Extra Module)
231

232
Convenience context managers for temporary style changes.
233

234
```python { .api }
235
def styled(variable: int, value: float):
236
    """Context manager for temporarily changing a style variable."""
237

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

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

245
## Usage Examples
246

247
### Basic Style Customization
248

249
```python
250
import imgui
251

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

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

260
imgui.pop_style_color(3)  # Pop all 3 colors
261

262
# Normal button
263
if imgui.button("Normal Button"):
264
    print("Normal button clicked!")
265
```
266

267
### Style Variables
268

269
```python
270
# Increase frame padding for larger buttons
271
imgui.push_style_var(imgui.STYLE_FRAME_PADDING, (20, 10))
272

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

276
imgui.pop_style_var()
277

278
# Change window rounding
279
imgui.push_style_var(imgui.STYLE_WINDOW_ROUNDING, 15.0)
280
if imgui.begin("Rounded Window"):
281
    imgui.text("This window has rounded corners")
282
imgui.end()
283
imgui.pop_style_var()
284
```
285

286
### Using Context Managers (Extra Module)
287

288
```python
289
import imgui.extra as extra
290

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

296
# Multiple style changes
297
with extra.istyled(
298
    imgui.STYLE_FRAME_PADDING, (15, 8),
299
    imgui.STYLE_FRAME_ROUNDING, 5.0,
300
    imgui.STYLE_ITEM_SPACING, (10, 5)
301
):
302
    if imgui.button("Styled Button 1"):
303
        pass
304
    if imgui.button("Styled Button 2"):
305
        pass
306

307
# Temporary color changes
308
with extra.colored(imgui.COLOR_BUTTON, 0.0, 1.0, 0.0):  # Green button
309
    if imgui.button("Green Button"):
310
        print("Green button clicked!")
311
```
312

313
### Theme Application
314

315
```python
316
# Apply different themes
317
if imgui.button("Dark Theme"):
318
    imgui.style_colors_dark()
319

320
imgui.same_line()
321
if imgui.button("Light Theme"):
322
    imgui.style_colors_light()
323

324
imgui.same_line()
325
if imgui.button("Classic Theme"):
326
    imgui.style_colors_classic()
327
```
328

329
### Custom Color Scheme
330

331
```python
332
def apply_custom_theme():
333
    # Custom dark blue theme
334
    imgui.push_style_color(imgui.COLOR_WINDOW_BACKGROUND, 0.1, 0.1, 0.2, 1.0)
335
    imgui.push_style_color(imgui.COLOR_FRAME_BACKGROUND, 0.2, 0.2, 0.3, 1.0)
336
    imgui.push_style_color(imgui.COLOR_FRAME_BACKGROUND_HOVERED, 0.3, 0.3, 0.4, 1.0)
337
    imgui.push_style_color(imgui.COLOR_FRAME_BACKGROUND_ACTIVE, 0.4, 0.4, 0.5, 1.0)
338
    imgui.push_style_color(imgui.COLOR_BUTTON, 0.2, 0.3, 0.6, 1.0)
339
    imgui.push_style_color(imgui.COLOR_BUTTON_HOVERED, 0.3, 0.4, 0.7, 1.0)
340
    imgui.push_style_color(imgui.COLOR_BUTTON_ACTIVE, 0.4, 0.5, 0.8, 1.0)
341
    imgui.push_style_color(imgui.COLOR_HEADER, 0.2, 0.3, 0.6, 1.0)
342
    imgui.push_style_color(imgui.COLOR_HEADER_HOVERED, 0.3, 0.4, 0.7, 1.0)
343
    imgui.push_style_color(imgui.COLOR_HEADER_ACTIVE, 0.4, 0.5, 0.8, 1.0)
344

345
# Apply custom theme
346
apply_custom_theme()
347

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

355
# Clean up
356
imgui.pop_style_color(10)
357
```
358

359
### Font Management
360

361
```python
362
# Load custom font (assuming you have a font loaded)
363
# custom_font = load_custom_font()
364

365
# Use custom font temporarily
366
# imgui.push_font(custom_font)
367
# imgui.text("This text uses custom font")
368
# imgui.pop_font()
369

370
# Calculate text size
371
text = "Sample text for measurement"
372
text_size = imgui.calc_text_size(text)
373
imgui.text(f"Text size: {text_size[0]:.1f} x {text_size[1]:.1f}")
374
```
375

376
### Advanced Styling
377

378
```python
379
# Create a styled section
380
imgui.push_style_var(imgui.STYLE_CHILD_ROUNDING, 8.0)
381
imgui.push_style_var(imgui.STYLE_CHILD_BORDERSIZE, 1.0)
382
imgui.push_style_color(imgui.COLOR_CHILD_BACKGROUND, 0.1, 0.1, 0.1, 0.5)
383

384
if imgui.begin_child("StyledSection", 0, 150, True):
385
    imgui.push_style_var(imgui.STYLE_ITEM_SPACING, (10, 8))
386
    
387
    imgui.text("Styled Section Content")
388
    
389
    if imgui.button("Button 1"):
390
        pass
391
    if imgui.button("Button 2"):
392
        pass
393
    
394
    imgui.pop_style_var()  # Item spacing
395
    
396
imgui.end_child()
397

398
imgui.pop_style_color()   # Child background
399
imgui.pop_style_var(2)    # Child rounding and border size
400
```
401

402
### Responsive Styling
403

404
```python
405
# Adjust styling based on window size
406
window_width = imgui.get_window_width()
407

408
if window_width < 400:
409
    # Compact layout for small windows
410
    imgui.push_style_var(imgui.STYLE_FRAME_PADDING, (2, 2))
411
    imgui.push_style_var(imgui.STYLE_ITEM_SPACING, (2, 2))
412
    button_size = (window_width - 20, 25)
413
else:
414
    # Normal layout for larger windows
415
    imgui.push_style_var(imgui.STYLE_FRAME_PADDING, (8, 4))
416
    imgui.push_style_var(imgui.STYLE_ITEM_SPACING, (8, 4))
417
    button_size = (150, 30)
418

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

422
imgui.pop_style_var(2)
423
```