waybar

waybar copied to clipboard

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

💝 Thanks to

• rubyowo

Copyright © 2021-present Catppuccin Org