### Install Schemer2 Backend

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Wallpapers.md

Install the schemer2 backend using go. This backend requires Go to be installed.

```bash
go install github.com/thefryscorer/schemer2@latest
```

--------------------------------

### Install YASB via Package Managers

Source: https://context7.com/amnweb/yasb/llms.txt

Install YASB using WinGet, Scoop, or Chocolatey for quick setup.

```powershell
# WinGet (user scope)
winget install AmN.yasb
```

```powershell
# Machine-wide scope
winget install --scope machine AmN.yasb
```

```powershell
# Scoop
scoop bucket add extras
scoop install extras/yasb
```

```powershell
# Chocolatey
choco install yasb
```

--------------------------------

### YASB Configuration File Example

Source: https://context7.com/amnweb/yasb/llms.txt

Example structure for the `config.yaml` file, defining global settings and window manager integrations.

```yaml
# ~/.config/yasb/config.yaml

# ── Global settings ──────────────────────────────────────────────────────────
watch_stylesheet: true       # Hot-reload styles.css on change
watch_config: true           # Hot-reload config.yaml on change
debug: false
update_check: true
show_systray: true

# Tray-menu WM integrations
komorebi:
  start_command: "komorebic start --whkd"
  stop_command: "komorebic stop --whkd"
  reload_command: "komorebic reload-configuration"
glazewm:
  start_command: "glazewm.exe start"
  stop_command: "glazewm.exe command wm-exit"
  reload_command: "glazewm.exe command wm-exit && glazewm.exe start"

```

--------------------------------

### ObsWidget Keybinding Example

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Obs.md

Example configuration for setting up hotkeys to trigger OBS actions using the ObsWidget. This demonstrates how to map key combinations to specific OBS control callbacks.

```yaml
obs:
  type: "yasb.obs.ObsWidget"
  options:
    # ... other options
    keybindings:
      - keys: "ctrl+shift+r"
        action: "toggle_record"
      - keys: "ctrl+shift+p"
        action: "toggle_record_pause"
      - keys: "ctrl+shift+v"
        action: "toggle_virtual_cam"
      - keys: "ctrl+shift+b"
        action: "toggle_stream"
```

--------------------------------

### ObsWidget Configuration Example

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Obs.md

This is a complete configuration example for the ObsWidget, demonstrating how to set up connection details, custom icons for various states, and enable/disable different display and control features.

```yaml
obs:
  type: "yasb.obs.ObsWidget"
  options:
    connection:
      host: "localhost"
      port: 4455
      password: "your_password"
    icons:
      recording: "\ueba7"
      stopped: "\ueba7"
      paused: "\ueba7"
      virtual_cam_on: "\udb81\udda0"
      virtual_cam_off: "\udb81\udda0"
      studio_mode_on: "\udb84\uddd8"
      studio_mode_off: "\udb84\uddd8"
      streaming: "\udb82\udd02"
      streaming_stopped: "\udb82\udd02"
    hide_when_not_recording: false
    blinking_icon: true
    show_record_time: true
    show_virtual_cam: true
    show_studio_mode: true
    show_stream: true
    show_stream_time: true
    show_scene_name: true
    show_stream_stats: true
    tooltip: true
```

--------------------------------

### Glazewm Tray Menu Start Command

Source: https://github.com/amnweb/yasb/blob/main/docs/Configuration.md

The default command to start Glazewm.

```shell
"glazewm.exe start"
```

--------------------------------

### Home Widget Example Configuration

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Home.md

This is a complete example configuration for the Home Widget, demonstrating how to set various options including custom menu items, system/power menu toggles, visual styles, and alignment.

```yaml
home:
  type: "yasb.home.HomeWidget"
  options:
    label: "<span>
      
    </span>"
    menu_list:
    - { title: "User Home", path: "~" }
    - { title: "Download", path: "D:\\Downloads" }
    - { title: "Documents", path: "C:\\Users\\amn\\Documents" }
    - { title: "Pictures", path: "C:\\Users\\amn\\Pictures" }
    - { title: "Sound Settings", command: "cmd.exe /c start ms-settings:sound" }
    - { title: "Windows Settings", uri: "ms-settings:" }
    - { separator: true }
    - { title: "PowerShell", command: "powershell.exe", show_window: true }
    - { title: "Winget Update", command: "powershell.exe", args: ["-NoProfile", "-NoExit", "-Command", "winget upgrade"], show_window: true }
    system_menu: true
    power_menu: true
    blur: true
    round_corners: true
    round_corners_type: "normal"
    border_color: "System"
    offset_top: 6
    offset_left: 0
    alignment: "left"
    direction: "down"
    menu_labels:
      shutdown: "Shutdown"
      restart: "Restart"
      hibernate: "Hibernate"
      logout: "Logout"
      lock: "Lock"
      sleep: "Sleep"
      system: "System Settings"
      about: "About This PC"
      task_manager: "Task Manager"

```

--------------------------------

### Disk Widget Example Configuration

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Disk.md

This is a complete example of how to configure the Disk widget, demonstrating various options like custom labels, multiple volume grouping, mouse event callbacks, and disk usage thresholds.

```yaml
disk:
  type: "yasb.disk.DiskWidget"
  options:
      label: "{volume_label} {space[used][percent]}"
      label_alt: "{volume_label} {space[used][gb]} / {space[total][gb]}"
      volume_label: "C"
      update_interval: 60
      group_label:
        volume_labels: ["C", "D", "E", "F"]
        show_label_name: true
        blur: True
        round_corners: True
        round_corners_type: "small"
        border_color: "System"
        alignment: "right"
        direction: "down"
      callbacks:
        on_left: "toggle_group"
        on_middle: "toggle_label"
        on_right: "exec explorer C:\\" # Open disk C in file explorer
      disk_thresholds:
          low: 25
          medium: 50
          high: 90

```

--------------------------------

### CPU Widget Example Configuration

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-CPU.md

An example YAML configuration for the CPU widget, demonstrating how to set labels, update intervals, histogram icons, callbacks, and menu options.

```yaml
cpu:
  type: "yasb.cpu.CpuWidget"
  options:
    label: "<span>\uf4bc</span> {info[percent][total]}%"
    label_alt: "<span>\uf437</span> {info[freq][current]} MHz"
    update_interval: 2000
    cpu_thresholds:
      low: 25
      medium: 50
      high: 90
    histogram_icons:
      - "\u2581" # 0%
      - "\u2581" # 10%
      - "\u2582" # 20%
      - "\u2583" # 30%
      - "\u2584" # 40%
      - "\u2585" # 50%
      - "\u2586" # 60%
      - "\u2587" # 70%
      - "\u2588" # 80%+
    histogram_num_columns: 8
    callbacks:
      on_left: "toggle_label"
      on_right: "toggle_menu"
    menu:
      enabled: true
      show_graph: true
      show_graph_grid: true
      graph_history_size: 60

```

--------------------------------

### Install Haishoku Backend

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Wallpapers.md

Install the haishoku library using pip. This backend is used for color extraction.

```bash
pip install haishoku
```

--------------------------------

### Media Widget Example Style

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Media.md

Provides a practical example of CSS for the media widget, demonstrating how to style elements like labels, buttons, and progress bars. This example sets padding, margins, colors, and font sizes.

```css
.media-widget {
    padding: 0;
    margin: 0;
}
.media-widget .label {
    color: #d2d6e2;
    padding: 0px;
    padding-right: 4px;
    font-size: 12px;
}
.media-widget .btn {
    color: #9498a8;
    padding: 0 4px;
    margin: 0;
    font-family: "Segoe Fluent Icons";
    font-weight: 400;
}
.media-widget .btn:hover {
    color: #babfd3;
}
.media-widget .btn.play {
    font-size: 16px;
}
.media-widget .btn.disabled:hover,
.media-widget .btn.disabled {
    color: #4e525c;
    font-size: 12px;
    background-color: rgba(0, 0, 0, 0);
}
.media-widget .progress-bar {
    max-height: 2px;
    background-color: transparent;
    margin-left: 5px;
    border: none;
}

.media-widget .progress-bar::chunk {
    background-color: #0078D4ee;
    border-radius: 2px;
}
```

--------------------------------

### Brightness Widget Configuration Example

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Brightness.md

This is a comprehensive example of how to configure the Brightness widget. It demonstrates setting various options such as labels, icons, toggle levels, auto-light behavior, menu settings, and callbacks.

```yaml
brightness:
  type: "yasb.brightness.BrightnessWidget"
  options:
    label: "<span>{icon}</span>"
    label_alt: "Brightness {percent}%"
    tooltip: true
    hide_unsupported: true
    brightness_toggle_level: [0, 50, 100]
    auto_light: false
    auto_light_icon: "\udb80\udce1"
    auto_light_night_level: 35
    auto_light_night_start_time: "19:00"
    auto_light_night_end_time: "06:45"
    auto_light_day_level: 75
    brightness_icons: [
      "\udb80\udcde",  # Icon for 0-25% brightness
      "\udb80\udcdd",  # Icon for 26-50% brightness
      "\udb80\udcdf",  # Icon for 51-75% brightness
      "\udb80\udce0"   # Icon for 76-100% brightness
    ]
    brightness_menu:
      blur: true
      round_corners: true
      round_corners_type: "normal"
      border_color: "System"
      alignment: "right"
      direction: "down"
    callbacks:
        on_left: "toggle_label"
```

--------------------------------

### Install Colorz Backend

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Wallpapers.md

Install the colorz library using pip. This backend is used for color extraction.

```bash
pip install colorz
```

--------------------------------

### Battery Widget Full Configuration Example

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Battery.md

This example demonstrates a complete configuration for the Battery Widget, showcasing various options for labels, update intervals, charging indicators, status thresholds, and custom icons. It also includes extended information placeholders like power and time remaining.

```yaml
battery:
  type: "yasb.battery.BatteryWidget"
  options:
    label: "<span>{icon}</span> {percent}%"
    label_alt: "<span>{icon}</span> {percent}% | {power}W | {time_remaining}"
    update_interval: 5000
    time_remaining_natural: False
    hide_unsupported: True
    charging_options:
      icon_format: "{charging_icon}"
      blink_charging_icon: true
      blink_interval: 500
    status_thresholds:
      critical: 10
      low: 25
      medium: 75
      high: 95
      full: 100
    status_icons:
      icon_charging: "\uf0e7"
      icon_critical: "\uf244"
      icon_low: "\uf243"
      icon_medium: "\uf242"
      icon_high: "\uf241"
      icon_full: "\uf240"
```

--------------------------------

### Memory Widget Example Configuration

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Memory.md

This example demonstrates a complete configuration for the Memory Widget, including custom labels, update intervals, callbacks, memory thresholds, histogram icons, and menu settings.

```yaml
memory:
  type: "yasb.memory.MemoryWidget"
  options:
    label: "<span>\uf4bc</span> {virtual_mem_free}/{virtual_mem_total}"
    label_alt: "<span>\uf4bc</span> VIRT: {virtual_mem_percent}% SWAP: {swap_mem_percent}%"
    update_interval: 5000
    callbacks:
      on_left: "toggle_label"
      on_right: "toggle_menu"
    memory_thresholds:
      low: 25
      medium: 50
      high: 90
    histogram_icons:
      - "\u2581" # 0%
      - "\u2581" # 10%
      - "\u2582" # 20%
      - "\u2583" # 30%
      - "\u2584" # 40%
      - "\u2585" # 50%
      - "\u2586" # 60%
      - "\u2587" # 70%
      - "\u2588" # 80%+
    menu:
      enabled: true
      show_graph: true
      show_graph_grid: true
      graph_history_size: 60

```

--------------------------------

### Install Pywal using pip

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Wallpapers.md

Installs the Pywal library, which allows for dynamic color theming from wallpapers.

```python
pip install pywal16
```

--------------------------------

### Komorebi Tray Menu Start Command

Source: https://github.com/amnweb/yasb/blob/main/docs/Configuration.md

The default command to start Komorebi with the `--whkd` flag and its default configuration.

```shell
"komorebic start --whkd"
```

--------------------------------

### WHKD Widget Example Styling

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Whkd.md

Example CSS demonstrating how to style the WHKD widget and its popup, including padding, font sizes, colors, and borders for various elements.

```css
.whkd-widget {
    padding: 0 6px 0 6px;
}
.whkd-widget .icon {
    font-size: 18px;
}
.whkd-popup .edit-config-button {
    background-color:#1743a1;
    color: #ffffff;
    padding: 4px 8px 6px 8px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    font-family: 'Segoe UI', sans-serif;
}

.whkd-popup .keybind-buttons-container {
    min-width: 240px;
}
.whkd-popup .keybind-button {
    background-color: #343538;
    color: white;
    padding: 4px 8px 6px 8px;
    font-size: 14px;
    font-weight: 600;
    border: 1px inset #4f5055;
    border-bottom: 2px inset #4f5055;
    border-radius: 4px;
    font-family: 'JetBrainsMono NFP';
}
.whkd-popup .keybind-button.special {
    background-color: #343538;
}
.whkd-popup .keybind-row:hover{
    background-color: rgba(136, 138, 155, 0.2);
    border-radius: 8px;
}
.whkd-popup .plus-separator {
    padding: 0 0px;
    border:none;
    font-size: 16px;
    font-weight: bold;
    background-color:transparent
}
.whkd-popup .filter-input {
    padding: 0 8px 2px 8px;
    font-size: 14px;
    font-family: 'Segoe UI', sans-serif;
    border: 1px solid #2e2e2e;
    border-radius: 4px;
    outline: none;
    color: white;
    background-color: #2e2e2e;
    min-height: 32px;
}
.whkd-popup .filter-input:focus {
    border: 1px solid #0078D4;
}
.whkd-popup .keybind-command {
    font-size: 14px;
}
.whkd-popup .keybind-header {
    font-size: 16px;
    font-weight: 600;
    color: white;
    padding: 8px 0;
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}
```

--------------------------------

### Todo Widget Configuration Example

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Todo.md

This example demonstrates a comprehensive configuration for the Todo widget, including custom labels, menu styling, icons, categories, and mouse callbacks. Adjust these options to tailor the widget's appearance and behavior to your needs.

```yaml
todo:
  type: "yasb.todo.TodoWidget"
  options:
    label: "\uf0ae {count}/{completed}"
    label_alt: "\uf0ae Tasks: {count}"
    # data_path: "~/Documents/my-todos.json"  # Optional: custom JSON file path
    menu:
      blur: true
      round_corners: true
      round_corners_type: "normal"
      border_color: "system"
      alignment: "center"
      direction: "down"
      offset_top: 6
      offset_left: 0
    icons:
      add: "\uf501 New Task"
      edit: "Edit"
      delete: "Delete"
      date: "\ue641"
      category: "\uf412"
      checked: "\udb80\udd34"
      unchecked: "\udb80\udd30"
      sort: "\ueab4"
      no_tasks: "\uf4a0"
    categories:
      default:
        label: "General"
      soon:
        label: "Complete soon"
      today:
        label: "End of day"
      urgent:
        label: "Urgent"
      important:
        label: "Important"
    callbacks:
      on_left: "toggle_menu"
      on_middle: "do_nothing"
      on_right: "toggle_label"
```

--------------------------------

### Install YASB from Source

Source: https://context7.com/amnweb/yasb/llms.txt

Install YASB from source for development or direct execution. Requires Python 3.14+.

```powershell
git clone https://github.com/amnweb/yasb
cd yasb

# Regular install
pip install .

# Development install
pip install -e .[dev]

# Run directly
python src/main.py

# Build MSI installer
pip install -e .[packaging]
cd src
python build.py build
python build.py bdist_msi
```

--------------------------------

### Install YASB using WinGet (Machine Scope)

Source: https://github.com/amnweb/yasb/blob/main/README.md

Installs YASB for all users on the machine using the WinGet package manager. Requires administrative privileges.

```powershell
winget install --scope machine AmN.yasb
```

--------------------------------

### Traffic Widget Configuration Example

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Traffic.md

This is an example configuration for the Traffic widget. It demonstrates how to set labels, update intervals, menu options, and callbacks.

```yaml
traffic:
  type: "yasb.traffic.TrafficWidget"
  options:
    label: "\ueb01 \ueab4 {download_speed} | \ueab7 {upload_speed}"
    label_alt: "Download {download_speed} | Upload {upload_speed}"
    update_interval: 1000
    menu:
      blur: true
      round_corners: true
      round_corners_type: "normal"
      border_color: "system"
      alignment: "left"
      direction: "down"
      offset_top: 6
      offset_left: 0
    callbacks:
      on_left: "toggle_menu"
      on_right: "toggle_label"
```

--------------------------------

### Custom Binding Mode Names Example

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-GlazeWM-Binding-Mode.md

Example demonstrating how to use 'display_name' to provide custom names for binding modes, which takes priority over the 'name' field.

```yaml
binding_modes:
  - name: "resize"
    display_name: "Resize mode"
    keybindings:
        # ...
  - name: "pause"
    display_name: "Paused mode"
    keybindings:
      # ...
  # and so on...

```

--------------------------------

### Example CSS for GlazeWM Tiling Direction Widget

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-GlazeWM-Tiling-Direction.md

Provides an example of how to style the GlazeWM Tiling Direction widget and its buttons, including background, padding, margin, font size, and hover effects.

```css
.glazewm-tiling-direction {
    background-color: transparent;
    padding: 0;
    margin: 0;
}

.glazewm-tiling-direction .btn {
    font-size: 18px;
    width: 14px;
    padding: 0 4px 0 4px;
    color: #CDD6F4;
    border: none;
}

.glazewm-tiling-direction .btn:hover {
    background-color: #727272;
}
```

--------------------------------

### Taskbar Widget Style Example

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Taskbar.md

Provides a detailed CSS example for styling the taskbar widget, including application containers, focused states, flashing indicators, and the preview popup.

```css
.taskbar-widget .app-container {
    margin: 4px 2px;
    border-radius: 4px;
    padding: 0 4px;
}
.taskbar-widget .app-container.foreground {
    background-color: rgba(255, 255, 255, 0.1);
}
.taskbar-widget .app-container.flashing {
    background-color: rgba(255, 106, 106, 0.63);
}
.taskbar-widget .app-container.running {
    background-color: rgba(255, 255, 255, 0.25);
}
.taskbar-widget .app-container:hover {
    background-color: rgba(255, 255, 255, 0.15);
}
.taskbar-widget .app-container .app-title {
    padding-left: 4px;
}
/* Taskbar preview popup is very limited in styling options, do not use margins/paddings here */
.taskbar-preview {
    border-radius: 8px; 
    background-color: #2b2c2d; 
}
.taskbar-preview.flashing {
    background-color: #7f434a;
}
.taskbar-preview .header {
    padding-bottom: 12px;
    padding-top: 4px;
}
.taskbar-preview .header .title {
    color: #d6d6d6;
    font-family: "Segoe UI";
    font-weight: 600;
    font-size: 13px;
}
.taskbar-preview .close-button {
    color: #999;
    font-size: 20px;
    background-color: transparent;
    border: none;
    min-width: 20px;
    border-radius: 4px;
    min-height: 20px;
}
.taskbar-preview .close-button:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(226, 0, 0);
}
```

--------------------------------

### CPU Widget Full CSS Example

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-CPU.md

A comprehensive example demonstrating the styling for the CPU widget, including padding, label and icon colors, and status-specific color overrides for low, medium, high, and critical states.

```css
.cpu-widget {
    padding: 0 8px;
}

.cpu-widget .widget-container .label {
    font-size: 13px;
    color: #cdd6f4;
}

.cpu-widget .widget-container .icon {
    font-size: 14px;
    color: #89b4fa;
}

.cpu-widget .widget-container .label.status-low {
    color: #a6e3a1; /* Green */
}

.cpu-widget .widget-container .label.status-medium {
    color: #f9e2af; /* Yellow */
}

.cpu-widget .widget-container .label.status-high {
    color: #fab387; /* Orange */
}

.cpu-widget .widget-container .label.status-critical {
    color: #f38ba8; /* Red */
}

/* Progress bar customization */
.cpu-widget .progress-circle {
    margin-right: 6px;
}
```

--------------------------------

### Cava Widget Example Configuration

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Cava.md

This is an example of how to configure the Cava widget in YASB. Ensure Cava is installed and accessible in your system's PATH.

```yaml
cava:
  type: "yasb.cava.CavaWidget"
  options:
    bar_height: 12
    min_bar_height: 0
    gradient: 1
    foreground: "#89b4fa"
    gradient_color_1: '#74c7ec'
    gradient_color_2: '#89b4fa'
    gradient_color_3: '#cba6f7'
    bars_number: 8
    bar_spacing: 2
    bar_width: 4
    bar_type: "bars"
    framerate: 60
    hide_empty: true
```

--------------------------------

### Start YASB Application

Source: https://github.com/amnweb/yasb/blob/main/docs/Installation.md

Run the YASB application after installation using the Python interpreter.

```python
python src/main.py
```

--------------------------------

### Install YASB Python Package

Source: https://github.com/amnweb/yasb/blob/main/docs/Installation.md

Install YASB and its dependencies using pip. Use the development flags for development or packaging-related installations.

```python
pip install .
```

```python
pip install -e .[dev]
```

```python
pip install -e .[dev,packaging]
```

--------------------------------

### WHKD Widget Configuration Example

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Whkd.md

This YAML configuration demonstrates how to set up the WHKD widget, including its type and options for the label and special keys.

```yaml
  whkd:
    type: "yasb.whkd.WhkdWidget"
    options:
      label: "<span>\uf11c</span>"
      special_keys:
        - key: "win"
          key_replace: "\ue70f"
        - key: "ctrl"
          key_replace: "Ctrl"
        - key: "alt" 
          key_replace: "Alt"
        - key: "shift" 
          key_replace: "Shift"
        - key: "left"
          key_replace: "\u2190"
        - key: "right"
          key_replace: "\u2192"
        - key: "up"
          key_replace: "\u2191"
        - key: "down"
          key_replace: "\u2193"
```

--------------------------------

### Install YASB using Winget

Source: https://github.com/amnweb/yasb/blob/main/docs/Installation.md

Use Winget to install the stable release of YASB. Ensure you have Winget installed and configured on your system.

```powershell
winget install --id AmN.yasb
```

--------------------------------

### Volume Widget Configuration Example

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Volume.md

Demonstrates a complete configuration for the Volume Widget, including custom labels, volume icons, audio menu settings, and callback functions.

```yaml
volume:
  type: "yasb.volume.VolumeWidget"
  options:
    label: "<span>{icon}</span> {level}"
    label_alt: "{volume}"
    volume_icons:
      - "\ueee8"  # Icon for muted
      - "\uf026"  # Icon for 0-10% volume
      - "\uf027"  # Icon for 11-30% volume
      - "\uf027"  # Icon for 31-60% volume
      - "\uf028"  # Icon for 61-100% volume
    audio_menu:
      blur: true
      round_corners: true
      round_corners_type: "normal"
      border_color: "system"
      alignment: "right"
      direction: "down"
    callbacks:
      on_left: "toggle_volume_menu"
      on_right: "toggle_mute"
```

--------------------------------

### Install YASB using Chocolatey

Source: https://github.com/amnweb/yasb/blob/main/docs/Installation.md

Install YASB using the Chocolatey package manager. This command assumes Chocolatey is already installed and configured.

```powershell
choco install yasb
```

--------------------------------

### Install YASB using WinGet (User Scope)

Source: https://github.com/amnweb/yasb/blob/main/README.md

Installs YASB for the current user using the WinGet package manager. This is the default installation scope.

```powershell
winget install AmN.yasb
```

--------------------------------

### Install Development Dependencies

Source: https://github.com/amnweb/yasb/blob/main/docs/Contributing.md

Install the project's development dependencies using pip. This command installs the package in editable mode with development extras.

```bash
pip install -e .[dev]
```

--------------------------------

### Taskbar Widget Example Configuration

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Taskbar.md

This YAML configuration demonstrates how to set up the Taskbar widget with various options, including animation, preview, and title label settings.

```yaml
taskbar:
  type: "yasb.taskbar.TaskbarWidget"
  options:
    icon_size: 16
    tooltip: true
    show_only_visible: false
    strict_filtering: true
    monitor_exclusive: false
    animation:
      enabled: true
      duration: 200
    preview:
      enabled: false
      width: 240
      delay: 400
      padding: 8
      margin: 8
    title_label:
      enabled: false
      show: "always"
      min_length: 10
      max_length: 30
    ignore_apps:
      processes: []
      titles: []
      classes: []
```

--------------------------------

### Build YASB Installer

Source: https://github.com/amnweb/yasb/blob/main/docs/Installation.md

Build the YASB installer package using the build script. This involves two steps: initiating the build and then creating the MSI installer.

```powershell
python build.py build
python build.py bdist_msi
```

--------------------------------

### Install YASB using Scoop

Source: https://github.com/amnweb/yasb/blob/main/docs/Installation.md

Install YASB via Scoop by first adding the 'extras' bucket and then installing the package. This method is suitable for users who prefer Scoop for package management.

```powershell
scoop bucket add extras
scoop install extras/yasb
```

--------------------------------

### Microphone Widget Example Configuration

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Microphone.md

This YAML configuration demonstrates how to set up the Microphone Widget with custom labels, icons, and callback functions for mouse events.

```yaml
microphone:
  type: "yasb.microphone.MicrophoneWidget"
  options:
    label: "<span>{icon}</span>"
    label_alt: "<span>{icon}</span> {level}"
    mute_text: "mute"
    icons:
      normal: "\uf130"
      muted: "\uf131"
    mic_menu:
      blur: true
      round_corners: true
      round_corners_type: "normal"
      border_color: "system"
      alignment: "right"
      direction: "down"
    callbacks:
      on_left: "toggle_mic_menu"
      on_middle: "toggle_label"
      on_right: "toggle_mute"
```

--------------------------------

### Notes Widget Example Configuration

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Notes.md

This YAML configuration demonstrates how to set up the Notes widget, including options for the menu, icons, and callbacks. The data_path can be uncommented to specify a custom JSON file for notes.

```yaml
notes:
  type: "yasb.notes.NotesWidget"
  options:
    label: "<span>󰤌</span> {count}"
    label_alt: "{count} notes"
    # data_path: "~/Documents/my-notes.json"  # Optional: custom JSON file path
    menu:
      blur: true
      round_corners: true
      round_corners_type: "normal"
      border_color: "System"
      alignment: "right"
      direction: "down"
      offset_top: 6
      offset_left: 0
      max_title_size: 150
      show_date_time: true
    icons:
      note: "󰤌"
      delete: ""
      copy: ""
    callbacks:
      on_left: "toggle_menu"
      on_middle: "do_nothing"
      on_right: "toggle_label"
```

--------------------------------

### Install ColorThief Backend

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Wallpapers.md

Install the colorthief library using pip. This backend is used for color extraction.

```bash
pip install colorthief
```

--------------------------------

### Bluetooth Widget Example Configuration

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Bluetooth.md

This YAML configuration demonstrates how to set up the Bluetooth widget with custom labels, icons, device aliases, and callbacks.

```yaml
bluetooth:
  type: "yasb.bluetooth.BluetoothWidget"
  options:
    label: "<span>{icon}</span> {device_count}"
    label_alt: "{device_name}"
    label_no_device: "No devices connected"
    label_device_separator: ", "
    max_length: 10
    max_length_ellipsis: "..."
    icons: 
      bluetooth_on: "\udb80\udcaf"
      bluetooth_off: "\udb80\udcb2"
      bluetooth_connected: "\udb80\udcb1"
    device_aliases:
      - name: "T5.0"
        alias: "\uf025"
    callbacks:
      on_left: "toggle_label"
      on_right: "exec cmd.exe /c start ms-settings:bluetooth"
```

--------------------------------

### VSCode Widget Configuration Example

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-VSCode.md

This YAML configuration demonstrates how to set up the VSCode widget, including options for labels, icons, truncation, and menu behavior.

```yaml
vscode:
    type: "yasb.vscode.VSCodeWidget"
    options:
      label: "<span>
      label_alt: "<span>
      menu_title: "<span style='font-weight:bold'>VScode</span> recents"
      max_field_size: 50
      folder_icon: "\uf114"
      file_icon: "\uf016"
      truncate_to_root_dir: false
      hide_folder_icon: false
      hide_file_icon: false
      max_number_of_folders: 30
      max_number_of_files: 30 # set to 0 if you only want folders
      modified_date_format: "Date modified: %Y-%m-%d %H:%M"
      cli_command: "code" # or "codium" or "windsurf" or any other CLI command to open the workspace
      menu:
        blur: true
        round_corners: true
        round_corners_type: "small"
        alignment: 'center'
        offset_top: 0

```

--------------------------------

### Install ImageMagick using winget

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Wallpapers.md

Installs ImageMagick, a prerequisite for using the default 'wal' backend with Pywal.

```powershell
winget install ImageMagick.ImageMagick
```

--------------------------------

### GlazeWM Workspace Configuration Example

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-GlazeWM-Workspaces.md

Configure workspace names and optional display names. Using numerical names ensures proper sorting.

```yaml
workspaces:
  - name: "1"
    display_name: "Work" # Optional
  - name: "2"
    display_name: "Browser" # Optional
  - name: "3"
    display_name: "Music" # Optional
  # and so on...
```

--------------------------------

### Example Configuration for Windows Workspaces Widget

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Windows-Desktops.md

This configuration sets up the Windows Workspaces widget with custom labels and callbacks. Ensure the 'type' is correctly specified for the widget.

```yaml
windows_workspaces:
  type: "yasb.windows_desktops.WorkspaceWidget"
  options:
    label_workspace_btn: "󰐽"
    label_workspace_active_btn: "󰐾"
    callbacks:
      on_left: "activate_workspace"
      on_middle: "do_nothing"
      on_right: "toggle_context_menu"
```

--------------------------------

### GPU Widget Example Configuration

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-GPU.md

This YAML configuration demonstrates how to set up the GPU widget with custom labels, update intervals, histogram icons, and menu options. It includes settings for GPU thresholds and callback functions.

```yaml
gpu:
  type: "yasb.gpu.GpuWidget"
  options:
    label: "<span>\uf4bc</span> {info[utilization]}%"
    label_alt: "<span>\uf4bc</span> {info[temp]}°C | {info[mem_used]} / {info[mem_total]}"
    update_interval: 2000
    gpu_thresholds:
      low: 25
      medium: 50
      high: 90
    histogram_icons:
      - "\u2581" # 0%
      - "\u2581" # 10%
      - "\u2582" # 20%
      - "\u2583" # 30%
      - "\u2584" # 40%
      - "\u2585" # 50%
      - "\u2586" # 60%
      - "\u2587" # 70%
      - "\u2588" # 80%+
    histogram_num_columns: 8
    callbacks:
      on_left: "toggle_label"
      on_right: "toggle_menu"
    menu:
      enabled: true
      show_graph: true
      show_graph_grid: true
      graph_history_size: 60

```

--------------------------------

### Install Packaging Dependencies

Source: https://github.com/amnweb/yasb/blob/main/docs/Installation.md

Install the necessary Python dependencies for packaging development. This command should be run within the cloned YASB repository directory.

```python
pip install -e .[packaging]
```

--------------------------------

### Configure Applications Widget

Source: https://github.com/amnweb/yasb/blob/main/docs/widgets/(Widget)-Applications.md

Example configuration for the Applications Widget, demonstrating how to define application entries with icons and launch commands. Supports Unicode icons, image paths, and direct executable paths with arguments.

```yaml
apps:
  type: "yasb.applications.ApplicationsWidget"
  options:
    label: "{data}"
    app_list:
      - {icon: "\uf0a2", launch: "notification_center", name: "Notification Center"} # launch notification center
      - {icon: "\ueb51", launch: "quick_settings"} # launch quick settings
      - {icon: "\uf422", launch: "search"} # launch search
      - {icon: "\uf489", launch: "wt", name: "Windows Terminal"} # launch terminal
      - {icon: "C:\\Users\\marko\\icons\\vscode.png", launch: "C:\\Users\\Username\\AppData\\Local\\Programs\\Microsoft VS Code\\Code.exe"} # open vscode
      - {icon: "\udb81\udc4d",launch: "\"C:\\Program Files\\Mozilla Firefox\\firefox.exe\" -new-tab www.reddit.com"} # open reddit in new tab in firefox
      - {icon: "\udb81\udc4d",launch: "\"C:\\Program Files\\Mozilla Firefox\\firefox.exe\" -new-window www.reddit.com"} # open reddit in new window in firefox
      - {icon: "\udb81\udc4d",launch: "\"C:\\Program Files\\Mozilla Firefox\\firefox.exe\" -private-window www.reddit.com"} # open reddit in private window in firefox
```