Catppuccin for Waybar

Previews

🌻 Latte

🪴 Frappé

🌺 Macchiato

🌿 Mocha

Usage

1. Download the file with your desired flavor e.g. mocha.css (to be found in the release or after cloning the repository)
2. Copy it into your waybar config e.g. ~/.config/waybar/
3. Include the file at the top of your style.css

   @import "<flavor>.css";
   

4. Use the colors in your Waybar style.css. Waybar uses GTK3 CSS.

   * {
     /* 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);
   }
   

🙋 FAQ

• Q: "Waybar doesn't work with the colors"
  A: Make sure you included the file in the right place and you are using @COLOR
• Q: "How can I make the bar look like the preview image?"
  A: Here's the waybar config for the preview image.

💝 Thanks to

• rubyowo

 

Copyright © 2021-present Catppuccin Org