A personal modified version of the Neobrutal Zebar configuration for Zebar, built in Svelte with Tailwind. Since the original creator did an amazing job, I wanted to continue developing it with new Zebar features and ideas!

• Process icons for current workspace, with current focus indicator.
• System information meters, with shutdown and restart buttons.
• Media display for browser and music player.
• Animations like process focus, workspace switching, and marquee scrolling.
• Dynamic coloring.
• Configuration using CSS-variables.

• Zebar - The desktop widget framework this configuration is built for
• GlazeWM - The tiling window manager (required for workspace and window management features)
• Package manager/runtime of your choice (npm (recommended), pnpm, yarn, etc). This fork uses npm for package management.

1. Download or clone this repo into your zebar configuration directory
2. Edit your Zebar settings.json to point to the neobrutal directory + /build/index.html. Example: neobrutal-zebar/build/index.html
3. Navigate to the root dir of neobrutal-zebar.
4. Run a install command for your selected package manager.

   npm install

5. Make any edits you want (see Themes and Recipies )
6. Build the project

   npm run build

7. Launch Zebar

In config.css there exists a lot of configuration available to tweak.

Add the following to your GlazeWM config.yaml file:

general:
  # ...existing config...
  shell_exec:
    # Allow shell execution for power controls
    enabled: true

Or alternatively, you can add custom keybindings to your GlazeWM config:

keybindings:
  # ...existing keybindings...
  
  # Power controls
  - command: "shell-exec shutdown /s /t 0"
    bindings: ["Alt+F4"]
  - command: "shell-exec shutdown /r /t 0"  
    bindings: ["Alt+Shift+F4"]

Without this configuration, the power buttons in the bar will not function.

Neobrutal currently ships with 4 different themes, Rosé Pine, Catppuccin, Nord and Material. Below follows some examples.

Utilizes Rosé Pine Palette, a soothing and elegant color scheme.

/* colors */
  --text: var(--rp-text);
  --bg: var(--rp-overlay);
  --border: var(--rp-highlight-low);
  --shadow: var(--rp-highlight-low);
  --power: var(--rp-love);
  --restart: var(--rp-foam);
  --memory: var(--rp-iris);
  --memory-medium: var(--rp-gold);
  --memory-high: var(--rp-love);
  --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);
  --volume-muted: var(--rp-foam);
  --volume-low: var(--rp-iris);
  --volume-medium: var(--rp-pine);
  --volume-high: var(--rp-rose);
  --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);
  --add-workspace: var(--rp-foam);
  --not-playing: var(--rp-love);
  --now-playing: var(--rp-pine);

Utilizes Catppuccin Palette, configure css variables accoriding to your liking.

Utilizes Nord Theme color palette, providing a cool arctic aesthetic.

Based on Material Design Color System, offering vibrant and accessible colors.

Soft Brutal

--radius: 9999px;

Round bars without shadow

--border-size: 1px;
--radius: 9999px;
--shadow-size-bar: 0px;
--shadow-size-button: 0px;

This project is licensed under the MIT License - see the LICENSE file