## Previews
๐ป Latte๐ชด Frappรฉ๐บ Macchiato๐ฟ Mocha
## Usage
1. Download the file with your desired flavor e.g. `mocha.css` (to be found in the [release](https://github.com/catppuccin/waybar/releases/latest) 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`
```css
@import ".css";
```
4. Use the colors in your Waybar `style.css`. Waybar uses [GTK3 CSS](https://docs.gtk.org/gtk3/css-overview.html#colors).
```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](https://github.com/rubyowo/dotfiles/tree/f925cf8e3461420a21b6dc8b8ad1190107b0cc56/config/waybar) for the preview image.
## ๐ Thanks to
- [rubyowo](https://github.com/rubyowo)
Catppuccin for Waybar
