Neobrutal Zebar
🟦 Neobrutal Zebar
An Zebar configuration for Zebar V2 build in Svelte with Tailwind. If you are still using V1 of Zebar the old config is available in the V1 branch.
✨ Features
- Process icons for current workspace, with current focus indicator.
- System information meters, with dynamic coloring and animations.
- Spotify, currently playing song.
- Configuration using CSS-variables.
[!IMPORTANT]
This configuration is it's early development. Contributions are welcome, especially to the process icon map, as I only mapped the ones I use that could not be automapped.
🖼️ Showcase
Fullscreen
Workspaces
https://github.com/user-attachments/assets/38e4a09f-1583-4e2a-84e5-6da7156402b2
System info
https://github.com/user-attachments/assets/185f238c-03b8-4f63-87a2-2d36d6b31039
🚀 Getting started
Simple installation (using defaults)
Download the neobrutal-zebar.zip from the latest release. Unzip the contents
inside your zebar config directory. Adjust the config.css as needed.
[!NOTE] If you are using window scaling in windows, you might need to edit
bar.zebar.jsonto get a correct height (default is60px).
Advanced installation (building from source)
Prerequisites
- Package manager/runtime of your choice (
bun(recommended),npm,pnpm,yarn, etc). I am usingbunso onwards I will show how to use that.
Instructions
- Download the repo and unzip it inside you zebar configuration directory
- Edit your Zebar
settings.jsonto point to the neobrutal directory +/build/index.html. Example:neobrutal-zebar/build/index.html - Navigate to the root dir of neobrutal-zebar.
- Run a install command for your selected package manager.
bun install - Make any edits you want (see Themes and Recipies )
- Build the project
bun run build - Launch Zebar
In config.css there exists a lot of configuration available to tweak.
🎨 Themes
Neobrutal currently ships with 4 different themes, Rosé Pine, Catppuccin, Nord and Material. Below follows some examples.
🌷Rosé Pine (default)
Example config
config.css
/* colors */
--text: var(--rp-text);
--bg: var(--rp-overlay);
--border: var(--rp-highlight-low);
--shadow: var(--rp-highlight-low);
--icon: var(--rp-love);
--memory: var(--rp-iris);
--cpu: var(--rp-rose);
--cpu-high-usage: var(--rp-love);
--battery-good: var(--rp-pine);
--battery-mid: var(--rp-gold);
--battery-low: var(--rp-love);
--focused-process: var(--rp-text);
--process: var(--rp-muted);
--displayed: var(--rp-text);
--ws-1: var(--rp-gold);
--ws-2: var(--rp-love);
--ws-3: var(--rp-pine);
--ws-4: var(--rp-foam);
--ws-5: var(--rp-iris);
--tiling-direction: var(--rp-rose);
--not-playing: var(--rp-love);
--now-playing: var(--rp-pine);
--network: var(--rp-text);
--weather: var(--rp-text);
😸 Catppuccin
Utilizes Catppuccin Palette, configure css variables accoriding to your liking.
Config show in picture above
config.css
/* border */
--radius: 9999px;
/* shadow */
--shadow-size-bar: 0;
--shadow-size-button: 0;
/* colors */
--text: var(--ctp-mocha-text);
--bg: var(--ctp-mocha-surface0);
--border: var(--ctp-mocha-crust);
--border-button: var(--ctp-mocha-crust);
--shadow: var(--ctp-mocha-mantle);
--icon: var(--ctp-mocha-red);
--memory: var(--ctp-mocha-mauve);
--cpu: var(--ctp-mocha-pink);
--cpu-high-usage: var(--ctp-mocha-red);
--battery-good: var(--ctp-mocha-green);
--battery-mid: var(--ctp-mocha-peach);
--battery-low: var(--ctp-mocha-red);
--focused-process: var(--ctp-mocha-text);
--process: var(--ctp-mocha-surface2);
--displayed: var(--ctp-mocha-text);
--ws-1: var(--ctp-mocha-peach);
--ws-2: var(--ctp-mocha-red);
--ws-3: var(--ctp-mocha-green);
--ws-4: var(--ctp-mocha-blue);
--ws-5: var(--ctp-mocha-mauve);
--tiling-direction: var(--ctp-mocha-lavender);
--not-playing: var(--ctp-mocha-red);
--now-playing: var(--ctp-mocha-green);
--network: var(--ctp-mocha-text);
--weather: var(--ctp-mocha-text);
src/components/RightGroup.svelte
<!-- replace this line -->
<Button class="text-zb-icon" iconClass="heart-filled" />
<!-- with this line -->
<Button class="text-zb-icon" iconClass="cat" />
🍳 Recipies
Soft Brutal
--radius: 9999px;
Round bars without shadow
--border-size: 1px;
--radius: 9999px;
--shadow-size-bar: 0px;
--shadow-size-button: 0px;
📜 License
This project is licensed under the MIT License - see the LICENSE file
