Waybar

<h3 align="center"> <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/> <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/> Catppuccin for <a href="https://github.com/Alexays/Waybar">Waybar</a> <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/> </h3> <p align="center"> <a href="https://github.com/catppuccin/waybar/stargazers"><img src="https://img.shields.io/github/stars/catppuccin/waybar?colorA=363a4f&colorB=b7bdf8&style=for-the-badge"></a> <a href="https://github.com/catppuccin/waybar/issues"><img src="https://img.shields.io/github/issues/catppuccin/waybar?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a> <a href="https://github.com/catppuccin/waybar/contributors"><img src="https://img.shields.io/github/contributors/catppuccin/waybar?colorA=363a4f&colorB=a6da95&style=for-the-badge"></a> </p> <p align="center"> <img src="assets/preview.webp"/> </p>

Previews

<details> <summary>🌻 Latte</summary> <img src="assets/latte.webp"/> </details> <details> <summary>🪴 Frappé</summary> <img src="assets/frappe.webp"/> </details> <details> <summary>🌺 Macchiato</summary> <img src="assets/macchiato.webp"/> </details> <details> <summary>🌿 Mocha</summary> <img src="assets/mocha.webp"/> </details>

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

 

<p align="center"> <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" /> </p> <p align="center"> Copyright &copy; 2021-present <a href="https://github.com/catppuccin" target="_blank">Catppuccin Org</a> </p> <p align="center"> <a href="https://github.com/catppuccin/catppuccin/blob/main/LICENSE"><img src="https://img.shields.io/static/v1.svg?style=for-the-badge&label=License&message=MIT&logoColor=d9e0ee&colorA=363a4f&colorB=b7bdf8"/></a> </p>