Customizing

Background

The background of the bar is configured using the bar_background config key. Its value is a markup element. See the markup reference for more details.

Examples

A solid color (default)

<Rect
    Width="{bar_width}"
    Height="{bar_height}"
    Color="{bg_color}"
/>

A background image

<Pattern Height="{bar_height}" Width="{bar_width}">
    <Image 
        Path="background.png"
        Height="{bar_height}"
        Width="5"
    />
</Pattern>

Modules separator / background

Modules in a <ModuleRow> are wrapped by the markup defined in the module config key. The module is injected into the element with ref="Content" (see examples). See the markup reference for more details.

Examples

Square separator (default)

The variables made available by <Row> are available inside module and represent the index of the module in the bar part (left, center, right). Here we use it to hide the separator before the first module. Since we also use a <Row> that would override these variables, we alias it to keep its value using ctx:mfirst="{is_first_visible}".

<Row ctx:mfirst="{is_first_visible}">
	<Sizer
		Visible="{!mfirst}"
		PaddingLeft="10"
		PaddingRight="10"
	>
		<Rect
			Width="5"
			Height="5"
			Color="{neutral_color}"
		/>
	</Sizer>
	<Sizer ref="Content" />
</Row>

Background for each module

Here we use a <Rect> to give each module a background. Since this reduces the available space for the modules, we update bar_height with ctx:bar_height="{bar_height - 4}" so that modules that might use this variable still fit in the background.

<Sizer PaddingLeft="{is_first_visible ? 0 : h_padding}">
	<Rect Color="#111111">
		<Sizer
			ref="Content"

			ctx:bar_height="{bar_height - 4}"

			Height="{bar_height - 2}"
			PaddingTop="2"
			PaddingRight="{h_padding}"
			PaddingBottom="2"
			PaddingLeft="{h_padding}"
		/>
	</Rect>
</Sizer>