Styling

Styling

~/.config/mangobar/style.css supports a small, focused CSS subset.

Supported Properties

Property	Description
color	Foreground color
background / background-color	Background (solid color or linear-gradient)
padding / padding-left / padding-right	Inner spacing
margin / margin-top / margin-left / margin-right	Outer spacing
border-radius	Corner radius (-1 = pill, 0 = square)
min-width	Minimum module width
font-family / font-size / font-weight	Font settings (global only)

Colors

Colors can be written as #hex values (#RGB, #RRGGBB, #AARRGGBB), @define-color variables, or the keyword none (transparent).

@define-color color-workspace-button-bg #504945;
@define-color color-gradient-fade #fbf1c7;

#tags {
    background-color: @color-workspace-button-bg;
    color: #ebdbb2;
}

Gradients

Backgrounds accept real two-color linear-gradient:

background: linear-gradient(to top, #504945, mix(#504945, #fbf1c7, 0.3));

Directions: to top, to bottom, to left, to right (default to bottom). Color stops can use @vars and mix(color1, color2, ratio):

#workspaces button:hover {
    background: linear-gradient(to top, @color-workspace-button-hover-bg, mix(@color-workspace-button-hover-bg, @color-gradient-fade, 0.25));
    color: @color-workspace-button-hover-fg;
}

Selectors

Selector	Applies to
*	All modules (global defaults)
#module	A module, e.g. #cpu, #battery, #clock.date
#module.state	A module state, e.g. #tags.active, #tags.urgent
#custom-<name>	A custom module
#workspaces button	Alias for #tags
#workspaces button:hover	Alias for #tags:hover (real hover state)

CSS priority is $MANGOBAR_CSS > ~/.config/mangobar/style.css.

Tag states

State	Meaning
#tags.active	Focused tag
#tags.occupied	Tag with visible clients
#tags.urgent	Tag with an urgent client
#tags.empty	Empty tag
#tags:hover	Tag under the pointer

Full example

See the bundled style.css.example.