table of contents
- trixie 0.8.3-1
- testing 0.8.3-1+b1
- unstable 0.8.3-1+b1
- experimental 0.9.1-1
labwc-theme(5) | File Formats Manual | labwc-theme(5) |
NAME¶
labwc - theme files
THEME¶
The theme engine aims to be compatible with openbox and themes will be searched for in the following order:
- ${XDG_DATA_HOME:-$HOME/.local/share}/themes/<theme-name>/labwc/
- $HOME/.themes/<theme-name>/labwc/
- /usr/share/themes/<theme-name>/labwc/
- /usr/local/share/themes/<theme-name>/labwc/
- /opt/share/themes/<theme-name>/labwc/
- ${XDG_DATA_HOME:-$HOME/.local/share}/themes/<theme-name>/openbox-3/
- $HOME/.themes/<theme-name>/openbox-3/
- /usr/share/themes/<theme-name>/openbox-3/
- /usr/local/share/themes/<theme-name>/openbox-3/
- /opt/share/themes/<theme-name>/openbox-3/
When $XDG_DATA_HOME is defined, it replaces (rather than augments) $HOME/.local/share. The same is the case for $XDG_DATA_DIRS and /usr/share/.
Choosing a theme is done by editing the <name> key in the <theme> section of the rc.xml configuration file (labwc-config(5)).
A theme consists of a themerc file and optionally some titlebar icons (referred to as buttons).
Theme settings specified in themerc can be overridden by creating a 'themerc-override' file in the configuration directory, which is normally $HOME/.config/labwc/ but can be a few other locations as described in labwc-config(5).
DATA TYPES¶
color
color name refers to "X11 color name", for example: 'white', 'grey40', 'pink' and 'peach puff'. More information can be found here:
- http://en.wikipedia.org/wiki/Web_colors#X11_color_names
- http://en.wikipedia.org/wiki/X11_color_names
- https://github.com/labwc/labwc/blob/master/src/common/rgb.txt
RGB value
- #rrggbb (hexadecimal RGB values)
- #rrggbb aaa (same but with decimal alpha value percentage)
- #rrggbbaa (same but with inline alpha value in hex encoding)
- #rgb (hexadecimal RGB values where #fff is shorthand for #f0f0f0) (since 0.9.0)
Note: the #rrggbb aaa notation is deprecated starting from labwc 0.7.2 and may be removed in future releases.
justification
textures
(Solid | Gradient <type>)
- •
- Solid means that the background of the texture is filled with a single color. The texture must be accompanied by a single color field. For example:
window.*.title.bg: Solid window.*.title.bg.color: #f8f5f2
- •
- Gradient means that the background of the texture is filled with a gradient from one color to another. When Gradient is specified, it must be followed by the gradient's type. It must also be accompanied by the fields color and colorTo. Valid gradient types are: (1) Vertical where the gradient goes from the top edge to the bottom (2) SplitVertical where the gradient is split in the middle and goes out toward the top and bottom edges. SplitVertical gradients have two extra, optional color fields: color.splitTo and colorTo.splitTo. These colors are the light colors used on the far top and bottom of the SplitVertical gradient. When these are omitted, the default values for these are color x 5/4 and colorTo x 17/16. Examples:
# Vertical gradient window.*.title.bg: Gradient Vertical window.*.title.bg.color: #658fb5 window.*.title.bg.colorTo: #4d6982 # SplitVertical gradient window.*.title.bg: Gradient SplitVertical window.*.title.bg.color: #658fb5 window.*.title.bg.color.splitTo: #7595b9 window.*.title.bg.colorTo: #4d6982 window.*.title.bg.colorTo.splitTo: #557485
THEME ELEMENTS¶
border.width
window.titlebar.padding.width
window.titlebar.padding.height
window.active.border.color
window.inactive.border.color
window.active.indicator.toggled-keybind.color
window.active.title.bg
window.active.title.bg.color
window.inactive.title.bg
window.inactive.title.bg.color
window.active.label.text.color
window.inactive.label.text.color
window.label.text.justify
window.button.width
window.button.height
window.button.spacing
window.button.hover.bg.corner-radius
Note: for a circular hover effect, set window.button.width and window.button.height equal and window.button.hover.bg.corner-radius half of them.
window.active.button.unpressed.image.color
window.inactive.button.unpressed.image.color
Note: Button elements (i.e. window.[in]active.button.*) may be defined uniquely for each type of button ("menu", "iconify", "max", "shade", "desk" or "close") by appending the type after the "button" node. For example:
- •
- window.active.button.iconify.unpressed.image.color indicates the color of the iconify button for active windows; while
- •
- window.inactive.button.close.unpressed.image.color indicates the color of the close button for inactive windows.
This syntax is not documented by Openbox, but is supported and is used by many popular themes. For the sake of brevity, these elements are not listed here, but all are supported.
window.active.shadow.size
window.inactive.shadow.size
window.active.shadow.color
window.inactive.shadow.color
menu.overlap.x
menu.overlap.y
menu.width.min
menu.width.max
menu.border.width
menu.border.color
menu.items.padding.x
menu.items.padding.y
menu.items.bg.color
menu.items.text.color
menu.items.active.bg.color
menu.items.active.text.color
menu.separator.width
menu.separator.padding.width
menu.separator.padding.height
menu.separator.color
menu.title.bg.color
menu.title.text.justify
menu.title.text.color
osd.bg.color
osd.border.color
osd.border.width
osd.label.text.color
osd.window-switcher.width
osd.window-switcher.padding
osd.window-switcher.item.padding.x
osd.window-switcher.item.padding.y
osd.window-switcher.item.active.border.width
osd.window-switcher.item.icon.size
osd.window-switcher.preview.border.width
osd.window-switcher.preview.border.color
osd.workspace-switcher.boxes.width
osd.workspace-switcher.boxes.height
osd.workspace-switcher.boxes.border.width
snapping.overlay.region.bg.enabled [yes|no]
snapping.overlay.edge.bg.enabled [yes|no]
snapping.overlay.region.border.enabled [yes|no]
snapping.overlay.edge.border.enabled [yes|no]
snapping.overlay.region.bg.color
snapping.overlay.edge.bg.color
snapping.overlay.region.border.width
snapping.overlay.edge.border.width
snapping.overlay.region.border.color
snapping.overlay.edge.border.color
border.color
magnifier.border.width
magnifier.border.color
BUTTONS¶
The images used for the titlebar icons are referred to as buttons.
The image formats listed below are supported. They are listed in order of precedence, where the first format in the list is searched for first.
- png
- svg
- xbm
By default, buttons are 1-bit xbm (X Bitmaps). These are masks where 0=clear and 1=colored. The xbm image files are placed in the same directory as the themerc file within a particular theme. The following xbm buttons are supported:
- max.xbm
- iconify.xbm
- close.xbm
- menu.xbm
- max_toggled.xbm
- desk.xbm
- desk_toggled.xbm
- shade.xbm
- shade_toggled.xbm
Additional icons can be defined to be shown when the mouse pointer is hovering over the button in question:
- max_hover.xbm
- iconify_hover.xbm
- close_hover.xbm
- menu_hover.xbm
- max_toggled_hover.xbm
- desk_hover.xbm
- desk_toggle_hover.xbm
- shade_hover.xbm
- shade_toggle_hover.xbm
One advantage of xbm buttons over other formats is that they change color based on the theme. Other formats use the suffices "-active" and "-inactive" to align with the respective titlebar colors. For example: "close-active.png"
For compatibility reasons, the following alternative names are supported for xbm files:
- •
- max_hover_toggled.xbm for max_toggled_hover.xbm
When using png or svg icons, for a full theme experience all of the following icons should be added:
- close-active.[png|svg]
- close_hover-active.[png|svg]
- close_hover-inactive.[png|svg]
- close-inactive.[png|svg]
- iconify-active.[png|svg]
- iconify_hover-active.[png|svg]
- iconify_hover-inactive.[png|svg]
- iconify-inactive.[png|svg]
- max-active.[png|svg]
- max_hover-active.[png|svg]
- max_hover-inactive.[png|svg]
- max-inactive.[png|svg]
- max_toggled-active.[png|svg]
- max_toggled_hover-active.[png|svg]
- max_toggled_hover-inactive.[png|svg]
- max_toggled-inactive.[png|svg]
- menu-active.[png|svg]
- menu_hover-active.[png|svg]
- menu_hover-inactive.[png|svg]
- menu-inactive.[png|svg]
- shade-active.[png|svg]
- shade_hover-active.[png|svg]
- shade_hover-inactive.[png|svg]
- shade-inactive.[png|svg]
- shade_toggled-active.[png|svg]
- shade_toggled-inactive.[png|svg]
- shade_toggled_hover-active.[png|svg]
- shade_toggled_hover-inactive.[png|svg]
- desk-active.[png|svg]
- desk_hover-active.[png|svg]
- desk_hover-inactive.[png|svg]
- desk-inactive.[png|svg]
- desk_toggled-active.[png|svg]
- desk_toggled-inactive.[png|svg]
- desk_toggled_hover-active.[png|svg]
- desk_toggled_hover-inactive.[png|svg]
DEFINITIONS¶
The handle is the window edge decoration at the bottom of the window.
SEE ALSO¶
2025-08-24 |