YASB Theme Manager

⚠️ Disclaimer — Manual Theme Installation Required

Themes must be added manually. This project does not currently support automatically pulling themes from GitHub repositories.
Automatic remote theme fetching is planned for a future release. Until then, add themes by editing the yasb-themes/ folder per the examples in this repo.

---

Table of Contents

1. Overview
2. Folder Structure
3. Installation
4. Quick Usage
5. Theme JSON Structure
6. Troubleshooting
7. Contributing
8. Credits

---

Overview

YASB Theme Manager is a lightweight system for managing and applying themes to YASB (Yet Another Status Bar).
It includes:

• A PowerShell script to list, cycle, and apply themes.
• An Electron GUI selector to preview and select themes.
• Theme definitions that modify YASB’s style.css root variables and optionally control Wallpaper Engine.

---

Folder Structure

theme/
├─ selector-app/         # Electron UI (index.html, renderer.js, main.js)
├─ themes/               # per-theme folders (neon-paradise, pastel-paradise, ...)
├─ theme.ps1             # PowerShell theme switcher script
├─ theme.json            # theme metadata + root variables
└─ README.md             # (this file)

---

Installation

---

YASB + Komorebi Installation Guide (Windows)

This guide walks you through installing YASB and Komorebi, setting up configuration folders, and creating system environment variables required for proper integration.

---

Step 1: Install YASB and Komorebi

You can use winget.

Install YASB First

winget install --id AmN.yasb

Now Install Komorebi + WHKD

winget install LGUG2Z.komorebi
winget install LGUG2Z.whkd

If winget packages are unavailable, download from the official project pages.

---

Step 2: Create Configuration Folders

Komorebi Config Folder

Standard location:

C:\Users\<username>\.config\komorebi

Create the folder via PowerShell:

$komorebiConfig = Join-Path $env:USERPROFILE ".config\komorebi"
New-Item -Path $komorebiConfig -ItemType Directory -Force | Out-Null

YASB Theme Manager Folder

Recommended location:

C:\Users\<username>\.config\yasb-theme-manager

Create folder:

$yasbThemeManager = Join-Path $env:USERPROFILE ".config\yasb-theme-manager"
New-Item -Path $yasbThemeManager -ItemType Directory -Force | Out-Null

---

Step 3: Move / Copy Configuration Files

Move your existing Komorebi config files:

$src = "C:\path\to\your\komorebi\files"  # adjust to your source (Typically located at 'C:/Users/<username>/')
Copy-Item -Path (Join-Path $src 'applications.json') -Destination $komorebiConfig -Force
Copy-Item -Path (Join-Path $src 'komorebi.bar.json') -Destination $komorebiConfig -Force
Copy-Item -Path (Join-Path $src 'komorebi.json') -Destination $komorebiConfig -Force

Verify files exist:

Get-ChildItem -Path $komorebiConfig

---

Step 4: Set System Environment Variables

These must be System / Machine environment variables, not PowerShell profile variables.

Points to your Komorebi and Yasb Theme Manager folders.

setx KOMOREBI_CONFIG_HOME "%USERPROFILE%\.config\komorebi" /M
setx YASB_THEME_MANAGER "%USERPROFILE%\.config\yasb-theme-manager" /M

Important: Sign out and sign back in (or reboot) so GUI apps and services can see the new variables.

---

Step 5: Verify 'komorebi.json' path

Start Komorebi using your usual command (adjust executable name if needed):

komorebic configuration

Check that it reads configs from:

C:\Users\<username>\.config\komorebi\komorebi.json

---

Step 6: Configure YASB to Call Komorebi

In C:\Users\<username>\.config\yasb\config.yaml:

# This should be set by default
komorebi:
  start_command: "komorebic start --whkd"
  stop_command: "komorebic stop --whkd"
  reload_command: "komorebic stop --whkd && komorebic start --whkd"

With KOMOREBI_CONFIG_HOME set, no explicit config path is needed.

---

Step 7: Add Theme Switcher Widget to YASB

Widget configuration for config.yaml:

theme_switcher:
  type: "yasb.custom.CustomWidget"
  options:
    label: "\ue7fe"
    label_alt: "Switch Theme"
    class_name: "theme-switcher-widget"
    exec_options:
      run_cmd: 'powershell -ExecutionPolicy Bypass -File "${env:YASB_THEME_MANAGER}/theme.ps1" --cycle'
      run_interval: 0
      hide_empty: false
    callbacks:
      on_left: 'exec powershell -ExecutionPolicy Bypass -File "${env:YASB_THEME_MANAGER}/theme.ps1" --cycle'
      on_middle: "toggle_label"
      on_right: 'exec npm.cmd --prefix "${env:YASB_THEME_MANAGER}/selector-app" start'

---

✅ After completing these steps, YASB and Komorebi should be fully integrated, using the correct configuration folders, and the theme switcher will work with your PowerShell and Electron-based UI.

---

Quick Usage

• Run the Electron GUI manually:

# Install dependencies
npm --prefix "C:\Users\<username>\.config\theme\selector-app" install

# Start the selector UI
npm --prefix "C:\Users\<username>\.config\theme\selector-app" start

---

theme.ps1 Notes

• Writes CSS root variable blocks to YASB’s style.css.
• Can optionally control Wallpaper Engine (wallpaper-engine entries in theme JSON).
• Ensure watch_stylesheet: true in config.yaml.

---

Theme JSON Structure

{
  "meta": {
    "name": "NOexistenceN",
    "version": "1.0.0"
  },
  "root-variables": {
    "--accent1": "#f76d7b", 
    "--accent2": "#ffffff",
    "--accent3": "#8fb5e1",

    "--text-light": "#e6e9ff",
    "--text-gray": "#a8adc9",
    "--text-dark": "#262d47",

    "--glow1": "#e0aaffd8",
    "--glow2": "#aafff4d8",
    "--glow3": "#ffb3e6d8",

    "--glow1-soft": "#e0aaff33",
    "--glow2-soft": "#aafff433",
    "--glow3-soft": "#ffb3e633",

    "--bg-dark": "#0d102e",
    "--bg-darker": "#06081a",

    "--bg-panel": "#0d102e",
    "--bg-surface": "#181636",
    "--bg-surface-hover": "#262d47",
    
    "--bg-widget": "#181636",
    "--bg-widget-hover": "#262d47",
    "--bg-widget-active": "#423f4f",

    "--text-accent1": "#f76d7b",
    "--text-accent2": "#ffffff",
    "--text-accent3": "#8fb5e1",

    "--border-soft": "#262d47",
    "--border-strong": "#423f4f",

    "--shadow-strong": "#06081a",
    "--shadow-glow1": "#f76d7b",
    "--shadow-glow2": "#ffffff",
    "--shadow-glow3": "#8fb5e1",

    "--glass-1": "#181636",
    "--glass-2": "#262d47",
    "--glass-3": "#423f4f",

    "--btn-hover": "#8fb5e1",
    "--btn-active": "#f76d7b"
  },
  "wallpaper-engine": {
    "enabled": true,
    "file": "3408439088",
    "link": "https://steamcommunity.com/sharedfiles/filedetails/?id=3408439088"
  }
}

root-variables maps CSS token names without the leading --.

---

Scrollbars, Visuals & Theme Assets

• Previews in yasb-themes/<theme>/preview/
• Provide images locally for the script & Electron UI
• Wallpaper Engine integration optional

---

Troubleshooting

• YASB not picking up themes: Check style.css path and watch_stylesheet: true.

• Komorebi loads wrong config: Verify KOMOREBI_CONFIG_HOME points to correct folder. Reboot if necessary.

• Wallpaper errors: Confirm Wallpaper Engine path and files.

---

Contributing

• Add themes manually via yasb-themes/
• PRs welcome for UI improvements, scripts, or new themes.

Credits

• Komorebi Repo
• YASB Repo