Skip to content

catppuccin/waybar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

18 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Logo
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

ย 

Copyright ยฉ 2021-present Catppuccin Org