catppuccin / waybar

📏 Soothing pastel theme for Waybar

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

waybar's Issues

How do i set this exactly like the screenshots?

These are just the colors... and they aren't even working, how do i even use @color?

Could you please also give the styles in the screenshots?

As the title says

Problem had with instructions.

Referring to 'Usage', the line:
@import "$HOME/.config/waybar/<flavour>.css";
has to be included in style.css.
But since waybar checks for files in it's config folder by default, <string> in @import "<string>"; counts as file name and thus creates this error when launched:
[error] style.css:7:42Failed to import: Error opening file ~/.config/waybar/$HOME/.config/waybar/<flavour>.css: No such file or directory

Suggestion: Edit @import "$HOME/.config/waybar/<flavour>.css"; to just @import "<flavour>.css";

There may be other ways to resolve this but I only know the slightest bit of how the program work.

Config file in screenshots?

Hey! This is awesome however I was wondering could you post the config used in the screenshots I love the rounded corners and dots and such.