Skip to content

styles

Jump to bottom
CyanideX edited this page Aug 5, 2026 · 1 revision

Styles

Push/pop style helpers for consistent ImGui theming across CET mods.

The module is exposed as wu.Styles.

Quick Start

local wu = GetMod("WindowUtils")
local styles = wu.Styles

-- Green "active" button
styles.PushButtonActive()
if ImGui.Button("Save", 120, 0) then save() end
styles.PopButtonActive()

-- By name or custom table
styles.PushButton("danger")
ImGui.Button("Delete", 120, 0)
styles.PopButton("danger")

Color Palette

All colors are {r, g, b, a} tables with values 0-1, accessible via styles.colors.<key>.

Key RGBA Usage
green 0, 1, 0.7, 1 Active / success
greenHover 0, 0.8, 0.56, 1 Green hover state
greenActive 0.1, 0.8, 0.6, 1 Green active (pressed) state
blue 0.14, 0.27, 0.43, 1 Default / inactive
blueHover 0.26, 0.59, 0.98, 1 Blue hover state
blueActive 0.3, 0.3, 0.3, 1 Blue active (pressed) state
red 1, 0.3, 0.3, 1 Danger / delete
redHover 1, 0.45, 0.45, 1 Red hover state
redActive 1, 0.45, 0.45, 1 Red active (pressed) state
yellow 1, 0.8, 0, 0.8 Warning
yellowHover 1, 0.9, 0.2, 1 Yellow hover state
yellowActive 1, 0.9, 0.2, 1 Yellow active (pressed) state
orange 1, 0.6, 0, 1 Accent / highlight
orangeHover 1, 0.7, 0.1, 1 Orange hover state
orangeActive 0.9, 0.5, 0, 1 Orange active (pressed) state
grey 0.3, 0.3, 0.3, 1 Disabled
greyHover 0.35, 0.35, 0.35, 1 Grey hover state
greyActive 0.35, 0.35, 0.35, 1 Grey active (pressed) state
greyText 0.5, 0.5, 0.5, 1 Subdued text
greyLight 0.6, 0.6, 0.6, 1 Muted text
greyDim 0.7, 0.7, 0.7, 1 Dimmed text
textBlack 0, 0, 0, 1 Dark text on bright buttons
textWhite 1, 1, 1, 1 Light text on dark buttons
transparent 0, 0, 0, 0 Invisible
frameBg 0.12, 0.26, 0.42, 0.3 Outlined control background
frameBorder 0.24, 0.59, 1, 0.35 Outlined control border
outlinedDangerBg 0.78, 0.19, 0.19, 0.10 Danger outlined background
outlinedDangerBorder 0.78, 0.19, 0.19, 0.47 Danger outlined border
outlinedSuccessBg 0.13, 0.79, 0.60, 0.10 Success outlined background
outlinedSuccessBorder 0.13, 0.79, 0.59, 0.30 Success outlined border
sliderDisabledBg 0.65, 0.7, 1, 0.045 Disabled slider background
splitterHover 0.3, 0.5, 0.7, 0.5 Splitter bar hover background
splitterDrag 0, 1, 0.7, 0.6 Splitter bar drag background
splitterIcon 0.6, 0.6, 0.7, 1 Splitter bar icon (idle)
splitterIconHi 1, 1, 1, 1 Splitter bar icon (active)
scrollbarBg 0, 0, 0, 0 Scrollbar track background
scrollbarGrab 0.8, 0.8, 1, 0.4 Scrollbar thumb
scrollbarHover 0.8, 0.8, 1, 0.6 Scrollbar thumb hover
scrollbarActive 0.8, 0.8, 1, 0.8 Scrollbar thumb drag

API Reference

Button Styles

Each named style has a matched Push/Pop pair. Most push 4 colors (Button, ButtonHovered, ButtonActive, Text) plus centered text alignment, and Pop reverses them. Three differ:

  • PushButtonLabelOutlined pushes 5 colors (adds Border) and 2 vars (adds FrameBorderSize 2.0)
  • PushButtonTransparent pushes 3 colors (no Text override) and 2 vars (ItemInnerSpacing 0, ButtonTextAlign)
  • PushButtonFrameless pushes 3 colors (no Text override) and 1 var (FramePadding 0)
Push Pop Colors
PushButtonActive() PopButtonActive() Green bg, black text
PushButtonInactive() PopButtonInactive() Blue bg, white text
PushButtonDanger() PopButtonDanger() Red bg, black text
PushButtonWarning() PopButtonWarning() Yellow bg, black text
PushButtonUpdate() PopButtonUpdate() Green bg, dark text
PushButtonDisabled() PopButtonDisabled() Grey bg, grey text
PushButtonStatusbar() PopButtonStatusbar() Subtle blue bg, yellow text
PushButtonLabel() PopButtonLabel() Dark blue bg, white text
PushButtonLabelOutlined() PopButtonLabelOutlined() Dark blue bg, white text, blue border
PushButtonTransparent() PopButtonTransparent() Transparent bg, no inner spacing
PushButtonFrameless() PopButtonFrameless() Transparent bg, zero frame padding

PushButton(styleNameOrTable) / PopButton(styleNameOrTable)

Universal button style - accepts a name string or a custom color table.

-- By name:
styles.PushButton("active")
styles.PopButton("active")

-- By custom table:
styles.PushButton({
    bg = {0.2, 0, 0.5, 1},
    hover = {0.3, 0.1, 0.6, 1},
    active = {0.15, 0, 0.4, 1},
    text = {1, 1, 1, 1},
    border = true,  -- optional, adds blue border
})
styles.PopButton({ border = true })  -- pass same table type to pop

Valid names: "active", "inactive", "danger", "warning", "update", "disabled", "success", "statusbar", "label", "labelOutlined", "transparent", "frameless".

"success" is an alias that pushes and pops the active style.

Any other name is rejected: PushButton prints [WindowUtils] PushButton: unknown style '<name>' and pushes nothing, and PopButton does the same and pops nothing. The stack stays balanced, but the widget renders with the ambient theme rather than your intended style, so watch for that message when a button looks wrong.

Table form: bg, hover, active, text, and border are the keys read. Missing colors fall back to blue, blueHover, hover then blueActive, and textWhite respectively. The table form always pushes 4 colors and 1 var, plus Border and FrameBorderSize when border is truthy, so the table you hand to PopButton only needs a matching border field.

buttonDefaults

Pre-defined color tables for each named button style. Access via styles.buttonDefaults.<name>.

local danger = styles.buttonDefaults.danger
-- { bg = {1, 0.3, 0.3, 0.88}, hover = {1, 0.38, 0.38, 1}, ... }

Available keys: active, inactive, danger, warning, update, disabled, statusbar, label, labelOutlined, transparent, frameless.

There is no success entry here even though PushButton("success") works, so code that looks a style up in buttonDefaults should fall back (that is what the controls layer does, defaulting to inactive).

Outlined Styles

For sliders, progress bars, and other framed elements.

Push Pop Appearance
PushOutlined() PopOutlined() Blue border + dark frame
PushOutlinedDanger() PopOutlinedDanger() Red border + red histogram fill
PushOutlinedSuccess() PopOutlinedSuccess() Green border + green histogram fill

Drag Color Theming

dragBgBase

Base background color for drag controls: { 0.12, 0.26, 0.50 }.

dragColors

Preset axis colors for DragFloatRow/DragIntRow:

styles.dragColors = {
    x = { 0.8, 0.3, 0.3, 1.0 },   -- red
    y = { 0.3, 0.7, 0.3, 1.0 },   -- green
    z = { 0.3, 0.5, 0.9, 1.0 },   -- blue
}

PushDragColor(color) / PopDragColor()

Push colored drag style with faded blue FrameBg and axis-colored hover, active, and border. Returns true when it pushed (4 colors + 1 var), or false without pushing anything when color is nil, not a table, or does not have exactly 4 elements. Only call PopDragColor() when it returned true.

PushDragDisabled() / PopDragDisabled()

Faded blue disabled drag style. Pushes 8 colors + 1 var (FrameBorderSize 0).

PushDragStyle(el, dim, wasHovered) / PopDragStyle(styleType, trulyDisabled)

High-level drag style selection used by DragFloatRow/DragIntRow. Chooses between disabled, outlined, or colored styles based on element state.

Parameter Type Description
el table Element definition (needs .color, .disabled)
dim boolean|string true = fully disabled, "dimmed" = outlined on hover, "dimmedColor" = color on hover
wasHovered boolean Whether element was hovered last frame

Returns (Push): string, boolean - styleType ("disabled", "outlined", "color"), trulyDisabled

Text Styles

Push Pop Color
PushTextMuted() PopTextMuted() Grey (0.6)
PushTextSuccess() PopTextSuccess() Green
PushTextDanger() PopTextDanger() Red
PushTextWarning() PopTextWarning() Yellow

Other Styles

Push Pop Purpose
PushSliderDisabled() PopSliderDisabled() Grey slider grab + faded frame
PushCheckboxActive() PopCheckboxActive() Green checkmark

Scrollbar Styles

PushScrollbar(opts?) / PopScrollbar()

Themed scrollbar with transparent track and styled thumb.

Option Type Default Description
size number fontSize * 0.4 (min 6) Scrollbar thickness
rounding number 10 Thumb corner rounding
bg table scrollbarBg Track background color
grab table scrollbarGrab Thumb color
hover table scrollbarHover Thumb hover color
active table scrollbarActive Thumb drag color

getScrollbarSize()

Returns the default styled scrollbar width in pixels: max(6, floor(fontSize * 0.4)). Needs an active ImGui context.

External Window Styles

PushExternalWindow(overrideStyling, disableScrollbar) / PopExternalWindow(varCount, colorCount)

Push/pop style overrides for externally managed windows.

Returns (Push): number, number - varCount, colorCount (pass both to Pop)

ToColor(c)

Convert a {r, g, b, a} table to an ImGui U32 color value.

Spacing Defaults

styles.spacing = {
    framePaddingX = 6,
    framePaddingY = 6,
    itemSpacingX = 6,
    itemSpacingY = 8
}

Clone this wiki locally