VibePanel's appearance is built up in 3 layers, each overriding the previous one:

1. Theme: General theme settings live in config.toml under [theme]. theme.mode picks the base theme:

   • dark is a fixed dark theme (default).
   • auto derives a palette from your wallpaper (similar to Matugen).
   • gtk follows your GTK theme.
   • light is a fixed light theme.

2. Theme overrides: options in [theme], [bar], [widgets], and [widgets.<name>] adjust colors, opacity and outlines.

3. CSS: variables exposed on :root and CSS classes can be overridden in style.css for fine control.

Layer 2 should suffice for most basic theming. Go to layer 3 when something is missing in TOML or if you just prefer CSS.

See Configuration and CSS for the full option reference.

With mode = "auto", VibePanel extracts a Material You color palette from your wallpaper image. When you change wallpapers, the panel rebuilds automatically with the new colors.

Wallpaper detection works with:

• hyprpaper (< 0.8.0 or >= 0.8.4)
• swww / awww
• wpaperd
• waypaper

[theme]
mode = "auto"
# scheme = "dark"           # "dark", "light", or "gtk" (follow GTK/system preference)
# popover = "light"  # Opposite-polarity popovers for hybrid look
# accent = "#adabe0"        # Override wallpaper-derived accent
# wallpaper = "/path/to/image.png"  # Explicit wallpaper (default: auto-detect)

When scheme is not set, light/dark is auto-derived from the wallpaper's average luminance. Bright wallpapers produce a light theme, dark wallpapers produce a dark theme. Set scheme to "dark" or "light" to override, or "gtk" to follow the GTK/system color-scheme preference in auto mode.

The accent color is derived from the wallpaper by default. Set accent to any hex color to override, "none" for monochrome, or "gtk" to use GTK's accent color.

The base palette comes from theme.mode but most colors can be overridden in TOML without the need for CSS:

[theme]
accent = "#adabe0"
popover = "light"  # Dark bar, light popovers

[bar]
background_color = "#11111b"
background_opacity = 0.8

[widgets]
background_color = "#1e1e2e"
background_opacity = 0.7

[widgets.clock]
background_color = "#313244"

[bar] controls the bar background. [widgets] controls the default widget background. [widgets.<name>] overrides a single widget and its popover.

A 1-4px CSS border applied to the bar, widgets, and popover surfaces. Useful for aesthetics or to hide blur artifacts around rounded corners.

[theme]
outline = true           # Enable outlines globally
outline_width = 1        # Width in pixels (1-4)
outline_color = "accent" # "subtle" | "accent" | "foreground" | hex color
outline_opacity = 1.0    # 0.0 (transparent) to 1.0 (opaque)

Toggle outlines on/off independently for the bar and widgets:

[bar]
outline = true    # Force outline on bar (omit = inherit theme.outline)

[widgets]
outline = false   # Suppress outline on widgets (omit = inherit theme.outline)

Individual widgets can override the outline color. This applies to both the widget on the bar and its popover surface:

[widgets.clock]
outline_color = "accent"   # "subtle" | "accent" | "foreground" | "#rrggbb"

In merge groups (widgets sharing a popover), the group uses the first widget's outline color.

CSS overrides everything and gives the ultimate control. See CSS for variables, classes and styling examples.