Customizing_waybar
This guide explains how to customize Waybar, focusing on creating your own themes and styles.
Waybar configuration files are located in ~/.config/waybar.
The directory contains:
-
configs/: Predefined layout configurations. -
styles/: Predefined CSS styles. -
modules/: Shared widget definitions (e.g., clock, workspaces). -
configandstyle.css: Symbolic links to the currently active config and style.
Caution
Do NOT edit the symbolic links directly. Edit the files in the configs/ and styles/ directories instead.
Use your file manager to browse to the configs/ directory. Duplicate an existing config file (e.g., default_laptop_v3) and rename it.
Tip
Prefix your custom config name with a number (e.g., 01-my-config) to make it appear at the top of the selection list.
Waybar configs are divided into three major sections: modules-left, modules-center, and modules-right.
To remove a widget, simply delete its entry from the corresponding section. For example, to remove the weather or theme switcher from the left:
Before:
After:
You can also modify how modules behave. For example, you can switch from a workspace icon to a workspace number by removing the specific module identifier (e.g., changing hyprland/workspaces#kanji to hyprland/workspaces).
Before:
After:
Navigate to the styles/ directory and duplicate a style you like. To increase the font size, edit the CSS file and adjust the font percentage.
Before:
After:
Once you have saved your files, apply them using the following keybindings:
-
SUPER + ALT + B: Select your custom config. -
SUPER + CTRL + B: Select your custom style.
