DOCSEARCHbyAlgolia
Submit Docs

Neobrutal Zebar Configuration

repository·main·Indexed 41 days ago

https://github.com/adriankarlen/neobrutal-zebar

A Zebar V2 configuration built with Svelte and Tailwind CSS, featuring a neobrutalist styled status bar with workspace icons, system info meters, and Spotify integration. Supports theme customization via CSS variables in config.css and UI shape adjustments through specific design recipes.

Tokens
940
Snippets
4
Records
4
Agent score
1%

What's inside Neobrutal

  1. Simple installation of Neobrutal Zebar

    main

    To install Neobrutal Zebar using the pre-built defaults:

    1. Download the neobrutal-zebar.zip from the latest release.
    2. Unzip the contents directly into your Zebar configuration directory.
    3. (Optional) Adjust config.css to customize appearance.

    Note on Windows Scaling: If you use Windows scaling, you may need to edit bar.zebar.json to set a correct height (the default is 60px).

    # No specific command, follow manual steps above

  2. Advanced installation (building from source)

    main

    If you want to build the project from source to make custom edits:

    1. Download the repository and unzip it inside your Zebar configuration directory.
    2. Update your Zebar settings.json to point to the neobrutal directory plus /build/index.html. Example path: neobrutal-zebar/build/index.html.
    3. Open a terminal in the root directory of neobrutal-zebar.
    4. Install dependencies using your preferred package manager (e.g., bun install).
    5. Make your desired edits to the source or CSS.
    6. Build the project using bun run build (or your package manager's build command).
    7. Launch Zebar.
    # Example using bun
bun install
bun run build

  3. Configure themes using CSS variables in config.css

    main

    Neobrutal Zebar is themed using CSS variables defined in config.css. You can switch between themes (Rosé Pine, Catppuccin, Nord, Material) or create your own by mapping variables to specific color palettes.

    Commonly used variables include:

    • --text, --bg, --border, --shadow for general UI.
    • --cpu, --memory, --battery-* for system information meters.
    • --ws-1 through --ws-5 for workspace colors.
    • --process and --focused-process for workspace icons.
    /* Example: Rosé Pine theme mapping */
--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);

  4. Customize UI shapes with Recipes

    main

    You can modify the 'brutal' aesthetic by adjusting border radius and shadows in config.css:

    • Soft Brutal: Increase the border radius.
    • Round bars without shadow: Set a high radius and zero out the shadow sizes.
    /* Soft Brutal */
--radius: 9999px;

/* Round bars without shadow */
--border-size: 1px;
--radius: 9999px;
--shadow-size-bar: 0px;
--shadow-size-button: 0px;