https://github.com/catppuccin/waybar
📏 Soothing pastel theme for Waybar
https://github.com/catppuccin/waybar
catppuccin catppuccin-theme hacktoberfest theme waybar
Last synced: 11 months ago
JSON representation
📏 Soothing pastel theme for Waybar
- Host: GitHub
- URL: https://github.com/catppuccin/waybar
- Owner: catppuccin
- License: mit
- Created: 2022-09-05T12:45:29.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-07-13T11:32:17.000Z (almost 2 years ago)
- Last Synced: 2024-11-12T00:42:19.838Z (over 1 year ago)
- Topics: catppuccin, catppuccin-theme, hacktoberfest, theme, waybar
- Language: CSS
- Homepage:
- Size: 71.3 KB
- Stars: 329
- Watchers: 5
- Forks: 11
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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](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)
Copyright © 2021-present Catppuccin Org
