🌻 Latte

🪴 Frappé

🌺 Macchiato

🌿 Mocha

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);
   }

• 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.

• rubyowo

Copyright © 2021-present Catppuccin Org