CSS Variables

All CSS variables are set on :root and can be overridden in your style.css.

Color Variables

Background

Variable	Description
--color-background-bar	Bar background. Config: [bar] background_color

Widget Styling

Per-widget background overrides. These combine via color-mix() for opacity support.

Variable	Description
--widget-background-color	Base widget background color (before opacity)
--widget-background-opacity	Widget background opacity as percentage (e.g., 80%)

Foreground

Variable	Description
--color-foreground-primary	Primary text and icons
--color-foreground-muted	Secondary text (70% opacity)
--color-foreground-faint	Tertiary text (40% opacity)
--color-foreground-disabled	Disabled controls

Accent

Variable	Description
--color-accent-primary	Primary accent (buttons, highlights). Config: [theme] accent
--color-accent-subtle	Hover backgrounds (20% accent)
--color-accent-hover-bg	Accent hover background (luminance-aware tint)
--color-accent-slider	Slider fill color
--color-accent-text	Text on accent backgrounds

State

Variable	Default	Description
--color-state-success	#4a7a4a	Success/positive. Config: [theme.states] success
--color-state-warning	#e5c07b	Warning/caution. Config: [theme.states] warning
--color-state-urgent	#ff6b6b	Error/critical. Config: [theme.states] urgent

Overlays & Borders

Variable	Description
--color-card-overlay	Base card overlay
--color-card-overlay-hover	Hover state
--color-card-overlay-subtle	Subtle highlight
--color-card-overlay-strong	Active/pressed state
--color-border-subtle	Subtle borders
--color-row-background	Row background
--color-row-background-hover	Row hover state
--color-slider-track	Unfilled slider track

Shadows

Shadows are applied to popovers and menus by default.

Variable	Description
--shadow-soft	Soft drop shadow applied to menus and popovers
--shadow-strong	Stronger shadow for elevated surfaces

---

Size Variables

All sizes scale proportionally from bar.size in your config.

Dimensions

Variable	Description
--bar-height	Bar height
--bar-padding-y	Vertical padding above widgets
--bar-padding-y-bottom	Vertical padding below widgets (0 in islands mode)
--widget-height	Widget height
--widget-padding-x	Widget horizontal padding
--widget-padding-y	Widget vertical padding
--widget-opacity	Widget background opacity. Config: [widgets] background_opacity

Spacing

Variable	Description
--spacing-internal	Internal element spacing
--spacing-widget-edge	Widget content edge padding
--spacing-widget-gap	Gap between widget children

Border Radii

Variable	Description
--radius-bar	Bar corner radius
--radius-widget	Widget corner radius
--radius-surface	Popover/menu corner radius
--radius-pill	Small pill shapes
--radius-factor	Scaling factor for fixed-size elements (0.0 at 0%, 1.0 at 50%+)

Sliders

Variable	Description
--slider-height	Standard slider trough height
--slider-height-thick	Thick slider trough height (OSD)
--slider-knob-size	Slider knob diameter
--slider-radius	Slider trough corner radius
--slider-radius-thick	Thick slider trough corner radius
--slider-knob-radius	Slider knob corner radius

---

Typography Variables

Variable	Description
--font-family	Font stack. Config: [theme.typography] font_family
--font-size	Base font size
--font-size-lg	Large (1.1em) - headings
--font-size-base	Base (1.0em) - primary content
--font-size-md	Medium (0.9em) - row titles
--font-size-sm	Small (0.85em) - secondary text
--font-size-xs	Extra small (0.7em) - timestamps

---

Icon Variables

Variable	Description
--icon-size	Standard icon size
--pixmap-icon-size	System tray icon size

---

Structural Classes

General classes for bar structure. Widget-specific classes are documented on each widget's page (see Widgets).

Bar

Class	Description
.bar	Main bar container
.bar-section--left	Left section
.bar-section--center	Center section
.bar-section--right	Right section

Widgets

Class	Description
.widget	Widget container
.content	Widget inner content box
.widget-group	Grouped widgets container

Hover States

Clickable widgets show a hover background:

Class	Description
.widget.clickable:hover	Hover state for standalone widgets
.widget-item.clickable:hover	Hover state for items within widget groups
.workspace-indicator.clickable:hover	Hover state for workspace indicators

To customize the hover color, override --color-card-overlay-hover.

Buttons

Class	Description
.vp-btn-reset	Reset button (strips GTK chrome)
.vp-btn-compact	Compact button (icon-only)
.vp-btn-accent	Accent button (filled)
.vp-btn-card	Card button (subtle background)
.vp-btn-link	Link button (text only)
.vp-btn-ghost	Ghost button (transparent)

Cards & Rows

Class	Description
.vp-card	Card container
.vp-row	Row container

Text Colors

Class	Description
.vp-primary	Primary foreground
.vp-muted	Muted foreground
.vp-accent	Accent color
.vp-error	Error/urgent color

State

Class	Description
.service-unavailable	Unavailable/disabled service state (uses --color-foreground-disabled)

Surfaces

Class	Description
.vp-surface-popover	Popover surface
.widget-menu	Widget menu popover

Animations & Ripple

Class	Description
.popover-animate	Popover with open/close transition
.popover-hidden	Popover in hidden state (scaled down, transparent)
.vp-ripple-overlay	Ripple effect drawing surface
.vp-ripple-wrap	Ripple overlay wrapper (clips to border-radius)
.vp-has-ripple	Applied to elements with ripple enabled