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-success: #98c379;
    --color-state-warning: #d19a66;
    --color-state-urgent: #e06c75;
}

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-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

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-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. 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
--shadow-strong	Stronger shadow for elevated surfaces

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