I am taking my first steps using a tiling window manager and am working with Sway.
I am drawn to the beauty and possibilities of Catppuccin and their vast community. I have already themed my text editor, foot, and zsh via oh-my-posh using Catppuccin.
Next I am trying to apply the Catppuccin theme to Waybar. The installation instructions in the GitHub repo README.md look easy to follow but I am missing something. I have followed the 4 steps as closely as I can and have referred to the Q+A and I can’t succesfully apply the theme to my Waybar. I am not sure what I am doing wrong.
Here is exactly what I have done so far:
- Downloaded the source code from the repo.
- Copied the contents to
~/.config/waybar/ - Inside
style.cssat the @import line I have specifid the flavour. In my case I chose: “frappe.css”.
The next step is what throws me off. The README instructions suggest:
- Use the colors in your Waybar
style.cssin this way:
* {
/* reference the color by using @color-name */
color: @text;
}
window#waybar {
/* you can also GTK3 CSS functions! */
background-color: shade(@base, 0.9);
border: 2px solid alpha(@crust, 0.3);
}
What does that first the CSS comment mean? I tried adding color:@frappe; to the code block with the asterisk in my config. Didn’t work. I kept it as color:@ text; as well. Also didn’t work. Not sure what the author of that README.md is referring to when they say @color-name because I tried adding the theme name (frappe) as the value to the color property. It’s still not working. What else could I try?
Please note: After making each change, I exited Sway and restarted it.
I am hoping that someone on this message board who has experience with theming Sway and Waybar can show me what I am mising. Once it is clarified here, I would be happy to suggest an edit and make a PR on GitHub to make it help make it more clear to others.
In full, here are the relevant configurations files I am working with so far:
~/.config/waybar/config
{
"layer": "top", // Waybar at top layer
"position": "top", // Waybar position (top|bottom|left|right)
// "width": 1280, // Waybar width
// Choose the order of the modules
"modules-left": ["wlr/workspaces"],
"modules-center": ["custom/music"],
"modules-right": ["pulseaudio", "backlight", "battery", "clock", "tray", "custom/lock", "custom/power"],
"wlr/workspaces": {
"disable-scroll": true,
"sort-by-name": true,
"format": " {icon} ",
"format-icons": {
"default": "",
},
},
"tray": {
"icon-size": 21,
"spacing": 10
},
"custom/music": {
"format": " {}",
"escape": true,
"interval": 5,
"tooltip": false,
"exec": "playerctl metadata --format='{{ title }}'",
"on-click": "playerctl play-pause",
"max-length": 50
},
"clock": {
"timezone": "Asia/Dubai",
"tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
"format-alt": " {:%d/%m/%Y}",
"format": " {:%H:%M}"
},
"backlight": {
"device": "intel_backlight",
"format": "{icon}",
"format-icons": ["", "", "", "", "", "", "", "", ""]
},
"battery": {
"states": {
"warning": 30,
"critical": 15
},
"format": "{icon}",
"format-charging": "",
"format-plugged": "",
"format-alt": "{icon}",
"format-icons": ["", "", "", "", "", "", "", "", "", "", "", ""]
},
"pulseaudio": {
// "scroll-step": 1, // %, can be a float
"format": "{icon} {volume}%",
"format-muted": "",
"format-icons": {
"default": ["", "", " "]
},
"on-click": "pavucontrol"
},
"custom/lock": {
"tooltip": false,
"on-click": "sh -c '(sleep 0.5s; swaylock --grace 0)' & disown",
"format": "",
},
"custom/power": {
"tooltip": false,
"on-click": "wlogout &",
"format": "襤"
}
}
~/.config/waybar/style.css
@import "frappe.css";
* {
font-family: FantasqueSansMono Nerd Font;
font-size: 17px;
min-height: 0;
}
#waybar {
background: transparent;
color: @text;
margin: 5px 5px;
}
#workspaces {
border-radius: 1rem;
margin: 5px;
background-color: @surface0;
margin-left: 1rem;
}
#workspaces button {
color: @lavender;
border-radius: 1rem;
padding: 0.4rem;
}
#workspaces button.active {
color: @sky;
border-radius: 1rem;
}
#workspaces button:hover {
color: @sapphire;
border-radius: 1rem;
}
#custom-music,
#tray,
#backlight,
#clock,
#battery,
#pulseaudio,
#custom-lock,
#custom-power {
background-color: @surface0;
padding: 0.5rem 1rem;
margin: 5px 0;
}
#clock {
color: @blue;
border-radius: 0px 1rem 1rem 0px;
margin-right: 1rem;
}
#battery {
color: @green;
}
#battery.charging {
color: @green;
}
#battery.warning:not(.charging) {
color: @red;
}
#backlight {
color: @yellow;
}
#backlight, #battery {
border-radius: 0;
}
#pulseaudio {
color: @maroon;
border-radius: 1rem 0px 0px 1rem;
margin-left: 1rem;
}
#custom-music {
color: @mauve;
border-radius: 1rem;
}
#custom-lock {
border-radius: 1rem 0px 0px 1rem;
color: @lavender;
}
#custom-power {
margin-right: 1rem;
border-radius: 0px 1rem 1rem 0px;
color: @red;
}
#tray {
margin-right: 1rem;
border-radius: 1rem;
}
~/.config/waybar/frappe.css
/*
*
* Catppuccin Frappe palette
* Maintainer: rubyowo
*
*/
@define-color base #303446;
@define-color mantle #292c3c;
@define-color crust #232634;
@define-color text #c6d0f5;
@define-color subtext0 #a5adce;
@define-color subtext1 #b5bfe2;
@define-color surface0 #414559;
@define-color surface1 #51576d;
@define-color surface2 #626880;
@define-color overlay0 #737994;
@define-color overlay1 #838ba7;
@define-color overlay2 #949cbb;
@define-color blue #8caaee;
@define-color lavender #babbf1;
@define-color sapphire #85c1dc;
@define-color sky #99d1db;
@define-color teal #81c8be;
@define-color green #a6d189;
@define-color yellow #e5c890;
@define-color peach #ef9f76;
@define-color maroon #ea999c;
@define-color red #e78284;
@define-color mauve #ca9ee6;
@define-color pink #f4b8e4;
@define-color flamingo #eebebe;
@define-color rosewater #f2d5cf;