CSS

Most theme values are exposed as CSS variables on :root, and VibePanel also provides structural classes for targeting bars, widgets, popovers, and common UI elements. Override them in your style.css. For example:

:root {
    --color-accent-primary: #e06c75;
    --color-state-warning: #d19a66;
    --color-state-urgent: #e06c75;
}

Files, Imports, and Hot Reload

VibePanel loads style.css from the active config directory, $XDG_CONFIG_HOME/vibepanel, ~/.config/vibepanel, or the current directory.

Stylesheets can be split with @import. Relative paths resolve from the stylesheet containing the import and changes to imported files hot reload automatically:

/* ~/.config/vibepanel/style.css */
@import "../../.cache/wal/vibepanel.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%)
--popover-background-opacity	Popover background opacity (max of bar and widget opacity)

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-hover-bg	Accent hover background (luminance-aware tint)
--color-accent-slider	Slider fill color
--color-accent-text	Text on accent backgrounds

Semantic Hover Backgrounds

Hover colors derived from each widget's background (automatically adjusts for custom background_color).

Variable	Description
--color-widget-hover-bg	Widget and group hover background
--widget-hover-tint	Tint direction: white for dark themes, black for light
--color-accent-hover-bg	Accent-colored hover background (luminance-aware)
--color-workspace-indicator-hover-bg	Default workspace indicator hover
--color-workspace-indicator-active-hover-bg	Active workspace indicator hover
--color-taskbar-button-hover-bg	Taskbar button hover background
--color-taskbar-button-active-hover-bg	Active taskbar button hover background

State

Variable	Default	Description
--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-border-subtle	Subtle borders
--color-slider-track	Unfilled slider track

Shadows

Shadows are applied to popovers and menus by default. Disable with shadows = false in [theme] to prevent blur artifacts when compositor blur is active.

Variable	Description
--shadow-soft	Soft drop shadow applied to menus and popovers

Outline

Configurable CSS border on bar, widgets, and surfaces. Configured via [theme] outline_* options.

Variable	Description
--outline-width	Global outline width (e.g., 1px)
--outline-color	Global outline color
--outline-opacity	Global outline opacity as percentage
--bar-outline-width	Bar outline width (0px when disabled)
--bar-outline-color	Bar outline color
--bar-outline-opacity	Bar outline opacity
--widget-outline-width	Widget outline width (0px when disabled)
--widget-outline-color	Widget outline color (per-widget override possible)
--widget-outline-opacity	Widget outline opacity
--surface-outline-width	Popover/tooltip surface outline width (0px when disabled)
--surface-outline-color	Surface outline color (per-widget override possible)
--surface-outline-opacity	Surface outline opacity

---

Size Variables

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

Dimensions

Variable	Description
--bar-height	Bar height
--widget-height	Widget height
--widget-padding-cross	Widget cross-axis padding (e.g. vertical padding in a horizontal bar)

Spacing

Variable	Description
--widget-padding-adjust	Additive widget content padding offset
--widget-gap-adjust	Additive widget content gap offset

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

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

---

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

Override bar padding with normal CSS properties on .bar, for example .bar { padding-top: 8px; }.

Widgets

Class	Description
.widget	Widget visual surface (background, border-radius)
.widget-group	Grouped widgets container

Hover States

Clickable widgets show a hover background derived from their own background color:

Class	Description
.widget.clickable:hover	Hover state for standalone widgets
.widget-item.clickable:hover	Hover state for items in widget groups
.workspace-indicator.clickable:hover	Hover state for workspace indicators
.taskbar-button.clickable:hover	Hover state for taskbar buttons
.taskbar-button.active.clickable:hover	Hover state for the active taskbar button

To customize the hover color, override the semantic hover variables (e.g., --color-widget-hover-bg).

Surfaces

Class	Description
.popover	Popover surface (canonical class for all popovers)
.notification-toast	Notification toast surface
.osd	On-screen display surface
.vp-surface-popover	Deprecated -- use .popover
.widget-menu	Deprecated -- use .popover

Animations & Ripple

Class	Description
.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

---

Utility Classes

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)

---

Styling Widgets

All widgets have CSS classes for their containers and labels that you can target:

.clock {
    background-color: #1e1e2e;
    padding: 0px 40px;
}

.clock-label {
    font-size: 20px;
    font-family: "JetBrains Mono";
    color: yellow;
}

See Widgets for each widget's available CSS classes.

Styling Popovers

Each widget's popover can be styled with the .<widget>-popover class:

.clock-popover {
    background-color: #1e1e2e;
}

To style all popovers at once, use .popover:

.popover {
    background-color: #1e1e2e;
    border-radius: 12px;
}

Popover background opacity can also be set in the config with popover_background_opacity under [widgets]. See Configuration for details.