[create-theme]: Catppuccin Glass

[PraBuDDha1x1]

Name

Catppuccin Glass

Description

A sleek, glassy YASB status bar theme built on Catppuccin Mocha — featuring Komorebi workspace integration, live media controls, CPU temperature, while keeping it minimal with a pill based design.

Homepage

https://github.com/PraBuDDha1x1/Catppucin-Glass

Image

https://i.imgur.com/KRRoCua.png

Theme Styles

:root {
    --rosewater: #f5e0dc;
    --flamingo: #f2cdcd;
    --pink: #f5c2e7;
    --mauve: #cba6f7;
    --red: #f38ba8;
    --maroon: #eba0ac;
    --peach: #fab387;
    --yellow: #f9e2af;
    --green: #a6e3a1;
    --teal: #94e2d5;
    --sky: #89dceb;
    --sapphire: #74c7ec;
    --blue: #89b4fa;
    --lavender: #b4befe;
    --text: #cdd6f4;
    --subtext1: #bac2de;
    --subtext0: #a6adc8;
    --overlay2: #9399b2;
    --overlay1: #7f849c;
    --overlay0: #6c7086;
    --surface2: #585b70;
    --surface1: #45475a;
    --surface0: #282936;
    --base: #1e1e2e;
    --mantle: rgba(24, 24, 37, 0.5);
    --crust: rgba(17, 17, 27, 0.5);
}
* {
    font-size: 12px;
    color: var(--subtext1);
    font-weight: 600;
    font-family: "JetBrainsMono NFP";
    margin: 0;
    padding: 0;
}
.yasb-bar {
    padding: 0;
    margin: 0;
    background-color: var(--crust);
}
.widget {
    padding: 0 3px;
    margin: 0;
}
.icon {
    font-size: 16px;
}
.widget .label {
    padding: 0px 2px;
}
.widget .label-alt {
    padding: 0px 2px;
}
/* POWER MENU */
.power-menu-widget .label {
    color: white;
    font-size: 16px;
    padding-left: 11px;
    padding-right: 0px;
    padding-bottom: 2px;
}
.power-menu-widget .label:hover {
    color: var(--text);
}
.power-menu-popup {
    background-color: transparent;
}
.power-menu-popup .button {
    padding: 0;
    width: 180px;
    height: 230px;
    border-radius: 8px;
    background-color: rgba(30, 30, 46, 0.35);
    margin: 5px;
}
.power-menu-popup .button.hover {
    background-color: rgba(30, 30, 46, 0.95);
}
.power-menu-popup .button .label {
    margin-top: 35px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
}
.power-menu-popup .button .icon {
    font-size: 64px;
    font-family: "JetBrainsMono NFP";
    padding-top: 5px;
}
.power-menu-popup .button.shutdown .icon {
    color: var(--red);
}
.power-menu-popup .button.restart .icon {
    color: var(--blue);
}
.power-menu-popup .button.lock .icon {
    color: var(--green);
}
.power-menu-popup .button.signout .icon {
    color: var(--surface2);
}
.power-menu-popup .button.hibernate .icon {
    color: var(--mauve);
}
.power-menu-popup .button.sleep .icon {
    color: var(--yellow);
}
.power-menu-popup .button.cancel .icon {
    padding: 0;
    margin: 0;
}
.power-menu-popup .button.cancel .label {
    color: var(--red);
    margin: 0;
}
.power-menu-popup .button.cancel {
    height: 32px;
    width: 560px;
    border-radius: 4px;
}
.uptime {
    font-size: 15px;
    margin-bottom: 20px;
    color: var(--text);
    font-weight: 600;
}
/* KOMOREBI WORKSPACES */
.komorebi-workspaces .widget-container {
    background-color: var(--crust);
    margin: 4px 0 4px 0;
    border-radius: 12px;
    border: 0px solid var(--surface1);
    padding: 0 8px;
}
.komorebi-workspaces {
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
    padding: 0 4px 0 8px;
}
.komorebi-workspaces .offline-status {
    color: var(--surface2);
    font-size: 12px;
    padding: 0 0 0 4px;
    font-weight: 600;
}
.komorebi-workspaces .ws-btn {
    border: none;
    background-color: transparent;
    margin: 0;
    font-size: 11px;
    color: var(--subtext1);
    height: 28px;
    width: 18px;
}
.komorebi-workspaces .ws-btn:hover {
    color: var(--text);
}
.komorebi-workspaces .ws-btn.populated {
    color: transparent;
    width: 10px;
    height: 10px;
    background-color: rgba(205, 214, 244, 0.7);
    border-radius: 5px;
    margin: 0 4px;
    font-size: 1px;
}
.komorebi-workspaces .ws-btn.active {
    color: transparent;
    background-color: var(--text);
    width: 36px;
    height: 10px;
    margin: 0 4px;
    border-radius: 5px;
}
/* ACTIVE WINDOW */
.active-window-widget .icon {
    font-size: 14px;
    margin-bottom: 1px;
    color: var(--subtext0);
    padding-left: 6px;
}
.active-window-widget .label {
    padding-top: 0px;
    color: var(--text);
}
.active-window-widget .label:hover {
    color: white;
}
/* CLOCK AND CALENDAR */
.clock-widget .label {
    color: var(--subtext1);
}
.clock-widget .label:hover {
    color: var(--text);
}
.clock-widget {
    padding: 0 4px;
}
.calendar {
    background-color: var(--mantle);
}
.calendar .calendar-table,
.calendar .calendar-table::item {
    background-color: transparent;
    color: rgba(162, 177, 196, 0.85);
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
.calendar .calendar-table::item:selected {
    color: var(--crust);
    background-color: var(--yellow);
    border-radius: 5px;
}
.calendar .day-label {
    margin-top: 20px;
    color: var(--peach);
}
.calendar .month-label {
    color: var(--flamingo);
    font-weight: normal;
}
.calendar .day_label,
.calendar .month-label,
.calendar .date-label {
    font-size: 16px;
    font-weight: 700;
    min-width: 180px;
    max-width: 180px;
}
.calendar .date-label {
    font-size: 88px;
    font-weight: 900;
    color: var(--yellow);
    margin-top: -20px;
}
/* MEDIA WIDGET AND MEDIA MENU */
.media-widget {
    margin: 4px 4px;
    padding: 0 6px 0 6px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.06);
}
.media-widget .label {
    color: var(--text);
    padding: 2px 6px;
    font-family: "JetBrainsMono NFP";
    font-size: 11px;
    font-weight: 500;
}
.media-widget .label:hover {
    color: wheat;
}
.media-widget .btn {
    color: rgba(255, 255, 255, 0.6);
    padding: 0 4px;
    margin: 0;
    font-size: 18px;
}
.media-widget .btn:hover {
    color: wheat;
}
.media-widget .btn.play {
    font-size: 18px;
}
.media-widget .btn.prev_track {
    font-size: 18px;
}
.media-menu {
    min-width: 450px;
    background-color: rgba(17, 17, 27, 0.5);
}
.media-menu .title,
.media-menu .source {
    font-size: 17px;
    font-weight: 800;
    margin-left: 15px;
    font-family: "Segoe UI", "JetBrainsMono NFP";
}
.media-menu .title {
    padding-right: 10px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.media-menu .artist {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.54);
    margin-top: 0px;
    margin-left: 16px;
    font-family: "Segoe UI", "JetBrainsMono NFP";
}
.media-menu .source {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.54);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.08);
    padding: 4px 8px;
    font-weight: 400;
    font-family: "Segoe UI", "JetBrainsMono NFP";
    margin-top: 10px;
}
.media-menu .btn {
    font-family: "Segoe Fluent Icons";
    font-size: 16px;
    font-weight: 400;
    margin: 0px 2px 0px 2px;
    min-width: 40px;
    max-width: 40px;
    min-height: 40px;
    max-height: 40px;
    border-radius: 20px;
}
.media-menu .btn.prev {
    margin-left: 10px;
}
.media-menu .btn:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
}
.media-menu .btn.play {
    background-color: rgba(255, 255, 255, 0.08);
    font-size: 20px;
}
.media-menu .btn.play:hover {
    background-color: rgba(255, 255, 255, 0.12);
}
.media-menu .btn.disabled:hover,
.media-menu .btn.disabled {
    color: rgba(186, 187, 202, 0.3);
    background-color: transparent;
}
.media-menu .playback-time {
    font-size: 13px;
    font-family: "Segoe UI";
    color: var(--subtext0);
    margin-top: 6px;
    min-width: 100px;
}
.media-menu .progress-slider {
    height: 20px;
    margin: 0 4px 1px 4px;
    border-radius: 3px;
}
.media-menu .progress-slider::groove {
    background: rgba(255, 255, 255, 0.1);
    height: 2px;
    border-radius: 3px;
}
.media-menu .progress-slider::groove:hover {
    background: rgba(255, 255, 255, 0.2);
    height: 6px;
    border-radius: 3px;
}
.media-menu .progress-slider::sub-page {
    background: var(--text);
    border-radius: 3px;
    height: 4px;
}
.media-menu .source.spotify {
    background-color: #199143;
    color: #ffffff;
    font-size: 12px;
}
.media-menu .source.zen {
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}
.media-menu .app-volume-container {
    background-color: rgba(255, 255, 255, 0.08);
    padding: 8px 6px;
    border-radius: 16px;
    margin-left: 10px;
}
.media-menu .app-volume-container .volume-slider::groove {
    background: rgba(255, 255, 255, 0.08);
    width: 4px;
    border-radius: 2px;
}
.media-menu .app-volume-container .volume-slider::add-page {
    background: #61ad7e;
    border-radius: 2px;
}
.media-menu .app-volume-container .volume-slider::groove:hover {
    background: rgba(255, 255, 255, 0.08);
    width: 6px;
    border-radius: 3px;
}
.media-menu .app-volume-container .volume-slider::sub-page {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}
.media-menu .app-volume-container .mute-button,
.media-menu .app-volume-container .unmute-button {
    font-size: 16px;
    color: #ffffff;
    font-family: "Segoe Fluent Icons";
    margin-top: 4px;
}
.media-menu .app-volume-container .unmute-button {
    color: rgba(255, 255, 255, 0.54);
}
/* APPS WIDGET AND CENTER GROUPER */
.center-grouper {
    padding: 0 4px 0 4px;
}
.center-grouper .container {
    background-color: var(--crust);
    margin: 4px 0 4px 0;
    border-radius: 12px;
    border: 0px solid var(--surface1);
    padding: 0 6px;
}
.center-grouper .grouper-button {
    font-size: 13px;
    color: var(--subtext0);
    background-color: transparent;
    border: none;
    padding-bottom: 2px;
}
.center-grouper .grouper-button:hover {
    color: var(--text);
}
.apps-widget .label {
    font-size: 14px;
    padding: 0 2px;
    color: var(--subtext0);
}
.apps-widget .label:hover {
    color: var(--text);
}
/* KOMOREBI CONTROL */
.komorebi-control-widget .label {
    font-size: 12px;
    color: var(--text);
    font-weight: 600;
}
.komorebi-control-widget .icon {
    font-size: 16px;
    color: var(--subtext0);
    padding-left: 0px;
}
.komorebi-control-widget .icon:hover {
    color: var(--text);
}
.komorebi-control-menu {
    background-color: rgba(17, 17, 27, 0.2);
}
.komorebi-control-menu .button {
    color: rgba(102, 102, 102, 0.4);
    padding: 8px 16px;
    font-size: 32px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.04);
}
.komorebi-control-menu .button.active {
    color: rgb(228, 228, 228);
    background-color: rgba(255, 255, 255, 0.04);
}
.komorebi-control-menu .button.start:hover {
    background-color: rgba(166, 227, 161, 0.3);
    color: var(--green);
}
.komorebi-control-menu .button.stop:hover {
    background-color: rgba(241, 138, 168, 0.3);
    color: var(--red);
}
.komorebi-control-menu .button.reload:hover {
    background-color: rgba(116, 199, 236, 0.3);
    color: var(--sapphire);
}
.komorebi-control-menu .button:disabled,
.komorebi-control-menu .button.active:disabled {
    background-color: rgba(255, 255, 255, 0.01);
    color: rgba(255, 255, 255, 0.2);
}
.komorebi-control-menu .footer .text {
    font-size: 12px;
    color: var(--subtext0);
}
/* WALLPAPERS WIDGET */
.wallpapers-widget .icon {
    font-size: 14px;
    color: var(--subtext0);
    padding-left: 0px;
}
.wallpapers-widget .icon:hover {
    color: var(--text);
}
.wallpapers-gallery-window {
    background-color: rgba(17, 17, 27, 0.3);
    border: 0;
    margin: 0;
}
.wallpapers-gallery-image {
    border: 4px solid transparent;
    border-radius: 12px;
}
.wallpapers-gallery-image:hover {
    border: 4px solid var(--sapphire);
}
.wallpapers-gallery-image.focused {
    border: 4px solid var(--sapphire);
}
/* MEMORY WIDGET */
.memory-widget .icon {
    font-size: 18px;
    color: #f38ba8;
    padding: 0 2px;
}
.memory-widget .label {
    padding: 0 3px;
    color: var(--subtext0);
    font-size: 11px;
}
.memory-widget .widget-container {
    background-color: rgba(17, 17, 27, 0.5);
    margin: 4px 0 4px 0;
    border-radius: 12px;
    border: 0px solid var(--surface1);
    padding: 0 6px;
}
/* CPU TEMP WIDGET — requires LibreHardwareMonitor running */
.cpu-temp-widget .icon {
    font-size: 16px;
    color: var(--peach);
    padding: 0 2px;
}
.cpu-temp-widget .widget-container {
    background-color: rgba(17, 17, 27, 0.5);
    margin: 4px 0 4px 0;
    border-radius: 12px;
    border: 0px solid var(--surface1);
    padding: 0 8px;
}
.cpu-temp-widget .label {
    padding: 0 5px;
    color: var(--subtext1);
    font-size: 11px;
}
/* WIFI WIDGET */
.wifi-widget .icon {
    font-size: 17px;
    color: var(--yellow);
    padding: 0 2px;
}
.wifi-widget .widget-container {
    background-color: rgba(17, 17, 27, 0.5);
    margin: 4px 0 4px 0;
    border-radius: 12px;
    border: 0px solid var(--surface1);
    padding: 0 6px;
}
.wifi-widget .label {
    padding: 0 5px;
    color: var(--subtext1);
    font-size: 11px;
}
.wifi-menu {
    background-color: rgba(17, 17, 27, 0.25);
    min-width: 320px;
    max-height: 340px;
    min-height: 340px;
    border-radius: 10px;
    padding: 8px 0;
}
.wifi-menu .header,
.wifi-menu .footer {
    font-size: 13px;
    padding: 10px;
    background-color: rgba(17, 17, 27, 0.11);
}
.wifi-menu .wifi-item {
    padding: 6px 12px;
    margin: 4px 6px;
    border-radius: 6px;
    min-height: 40px;
}
.wifi-menu .wifi-item:hover {
    background-color: rgba(205, 214, 244, 0.05);
}
.wifi-menu .wifi-item[active=true] {
    background-color: rgba(205, 214, 244, 0.07);
    font-size: 13.5px;
    min-height: 70px;
}
.wifi-menu .wifi-item .icon {
    font-family: "Segoe Fluent Icons";
    font-size: 22px;
    color: var(--subtext1);
    margin-right: 8px;
}
.wifi-menu .wifi-item .name,
.wifi-menu .wifi-item .status,
.wifi-menu .wifi-item .strength {
    font-size: 13px;
    color: var(--subtext1);
    margin-right: 8px;
}
.wifi-menu .wifi-item[active=true] .name {
    color: var(--text);
    font-weight: 700;
}
.wifi-menu .wifi-item[active=true] .status {
    color: var(--green);
    font-size: 11px;
}
.wifi-menu .wifi-item .connect {
    padding: 3px 24px;
    font-size: 13px;
    border-radius: 4px;
    background-color: rgba(205, 214, 244, 0.06);
    color: var(--subtext0);
    border: none;
}
.wifi-menu .wifi-item .connect:hover {
    background-color: rgba(205, 214, 244, 0.12);
    color: var(--text);
}
.wifi-menu .footer {
    padding: 6px 12px;
    background-color: rgba(24, 24, 37, 0.35);
    border-top: 1px solid var(--surface0);
    font-size: 12px;
    font-weight: 600;
    border-radius: 0 0 8px 8px;
}
.wifi-menu .footer .settings-button {
    background-color: rgba(205, 214, 244, 0.06);
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 4px;
    border: none;
    color: var(--subtext0);
}
.wifi-menu .footer .settings-button:hover {
    background-color: rgba(205, 214, 244, 0.12);
    color: var(--text);
}
.wifi-menu .footer .refresh-icon {
    background-color: rgba(205, 214, 244, 0.06);
    font-family: "Segoe Fluent Icons";
    font-size: 16px;
    padding: 5px;
    min-width: 24px;
    min-height: 24px;
    border-radius: 4px;
    border: none;
    color: var(--subtext1);
}
.wifi-menu .footer .refresh-icon:hover {
    background-color: rgba(205, 214, 244, 0.12);
    color: var(--text);
}
/* VOLUME WIDGET */
.volume-widget .icon {
    color: var(--blue);
    margin: 1px 2px 0 0;
}
.volume-widget .widget-container {
    background-color: var(--crust);
    margin: 4px 0 4px 0;
    border-radius: 12px;
    border: 0px solid var(--surface1);
    padding: 0 8px;
}
.volume-widget .label {
    padding: 0 3px;
    color: var(--subtext1);
    font-size: 11px;
}
.audio-menu {
    background-color: var(--crust);
}
.audio-container .device {
    background-color: transparent;
    border: none;
    padding: 6px 8px 6px 4px;
    margin: 2px 0;
    font-size: 12px;
    border-radius: 4px;
}
.audio-container .device.selected {
    background-color: rgba(255, 255, 255, 0.09);
    border-radius: 6px;
}
.audio-container .device:hover {
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
}
/* BATTERY WIDGET */
.battery-widget .icon {
    font-size: 16px;
    color: var(--flamingo);
    padding: 0 2px;
}
.battery-widget .charging_icon {
    color: var(--green);
}
.battery-widget .widget-container {
    background-color: var(--crust);
    margin: 4px 0 4px 0;
    border-radius: 12px;
    border: 0px solid var(--surface1);
    padding: 0 8px;
}
.battery-widget .label {
    padding: 0 6px;
    color: var(--subtext1);
    font-size: 11px;
}
/* NOTIFICATIONS WIDGET */
.notification-widget .icon {
    font-size: 14px;
    color: var(--text);
    padding-left: 2px;
}
.notification-widget .widget-container {
    background-color: var(--crust);
    margin: 4px 0 4px 0;
    border-radius: 12px;
    border: 0px solid var(--surface1);
    padding: 0 8px;
}
.notification-widget .icon.new-notification {
    color: #f07178;
}

Theme Config

watch_stylesheet: true
watch_config: true
debug: false

komorebi:
  start_command: "komorebic start --whkd"
  stop_command: "komorebic stop --whkd"
  reload_command: "komorebic stop --whkd && komorebic start --whkd"

bars:
  primary-bar:
    enabled: true
    screens: ["*"]
    class_name: "yasb-bar"
    alignment:
      position: "top"
      center: true
    blur_effect:
      enabled: true
      acrylic: false
      dark_mode: true
      round_corners: true
      border_color: None
    window_flags:
      always_on_top: false
      windows_app_bar: true
    dimensions:
      width: "100%"
      height: 32
    padding:
      top: 4
      left: 4
      bottom: 4
      right: 4
    widgets:
      left: ["power_menu", "komorebi_workspaces", "active_window"]
      center: ["clock", "media", "center-grouper"]
      right: ["memory", "cpu_temp", "wifi", "volume", "battery", "notifications"]

widgets:
  power_menu:
    type: "yasb.power_menu.PowerMenuWidget"
    options:
      label: "\ue62a"
      uptime: true
      blur: false
      blur_background: true
      animation_duration: 170
      button_row: 6
      buttons:
        shutdown: ["\uf011", "Shut Down"]
        restart: ["\uead2", "Restart"]
        lock: ["\udb80\udf3e", "Lock"]
        signout: ["\uf08b", "Sign out"]
        hibernate: ["\uf28e", "Hibernate"]
        sleep: ["\udb82\udd04", "Sleep"]
        cancel: ["", "Cancel"]
  komorebi_workspaces:
    type: "komorebi.workspaces.WorkspaceWidget"
    options:
      label_offline: "\u23fc Offline"
      label_workspace_btn: "\udb81\udc3d"
      label_workspace_active_btn: ""
      label_workspace_populated_btn: "\udb81\udc3e"
      label_default_name: "{index}"
      label_zero_index: false
      hide_empty_workspaces: false
      hide_if_offline: true
      animation: true
  komorebi_control:
    type: "komorebi.control.KomorebiControlWidget"
    options:
      label: "<span>\udb85\uddfc</span>"
      icons:
        start: "\uead3"
        stop: "\uead7"
        reload: "\uead2"
      run_ahk: false
      run_whkd: true
      show_version: true
      komorebi_menu:
        blur: true
        round_corners: true
        round_corners_type: "normal"
        border_color: None
        alignment: "left"
        direction: "down"
        offset_top: 10
        offset_left: -120
  active_window:
    type: "yasb.active_window.ActiveWindowWidget"
    options:
      label: "{win[title]}"
      label_no_window: ""
      label_alt: "{win[app_name]}"
      label_icon: true
      label_icon_size: 14
      max_length: 22
      max_length_ellipsis: "..."
      monitor_exclusive: false
      rewrite:
        - pattern: "^(.+?)\\.exe$"
          replacement: "\\1"
          case: title
        - pattern: "\\bui\\b"
          replacement: "UI"
        - pattern: "^(.*) — Zen Browser$"
          replacement: "Zen Browser"
        - pattern: "^IntelliJ IDEA Community Edition$"
          replacement: "IntelliJ IDE"
        - pattern: "^.* - (.+)$"
          replacement: "\\1"
  clock:
    type: "yasb.clock.ClockWidget"
    options:
      label: "{%a, %d %b %H:%M}"
      label_alt: "{%A, %d %B %Y %H:%M:%S}"
      timezones: []
      calendar:
        alignment: "center"
        border_color: "None"
        offset_top: 6
  apps:
    type: "yasb.applications.ApplicationsWidget"
    options:
      label: "{data}"
      app_list:
        - { icon: "\uf0a2", launch: "notification_center" }
        - { icon: "\uf422", launch: "start ms-settings:Findasetting" }
  appsd:
    type: "yasb.applications.ApplicationsWidget"
    options:
      label: "{data}"
      app_list:
        - { icon: "\uf489", launch: "wt.exe" }
        - { icon: "\ue690", launch: "quick_settings" }
  appse:
    type: "yasb.applications.ApplicationsWidget"
    options:
      label: "{data}"
      app_list:
        - { icon: "\ueb03", launch: "cmd /c Taskmgr" }
  center-grouper:
    type: "yasb.grouper.GrouperWidget"
    options:
      class_name: "center-grouper"
      widgets: ["apps", "komorebi_control", "appse", "wallpapers", "appsd"]
      collapse_options:
        enabled: false
  wallpapers:
    type: "yasb.wallpapers.WallpapersWidget"
    options:
      label: "<span>\uf00f</span>"
      # Set this to the folder where your wallpapers are stored
      # Example: "C:\\Users\\YourName\\Pictures\\Wallpapers"
      image_path: "C:\\Users\\{username}\\Walls"
      change_automatically: false
      update_interval: 60
      gallery:
        enabled: true
        blur: true
        image_width: 240
        image_per_page: 6
        show_buttons: false
        orientation: "landscape"
        image_spacing: 10
        lazy_load: true
        lazy_load_delay: 5
        lazy_load_fadein: 100
        image_corner_radius: 8
        enable_cache: true
  media:
    type: "yasb.media.MediaWidget"
    options:
      label: "{title} - {artist}"
      label_alt: "{artist} - {title}"
      hide_empty: true
      callbacks:
        on_left: "toggle_media_menu"
        on_middle: "do_nothing"
        on_right: "toggle_label"
      max_field_size:
        label: 27
        label_alt: 42
      show_thumbnail: false
      controls_only: false
      controls_left: true
      controls_hide: false
      thumbnail_alpha: 80
      thumbnail_padding: 8
      thumbnail_corner_radius: 16
      icons:
        prev_track: "\udb81\udcae"
        next_track: "\udb81\udcad"
        play: "\uf144"
        pause: "\uf28b"
      media_menu:
        blur: true
        round_corners: true
        round_corners_type: "normal"
        border_color: "None"
        alignment: "center"
        direction: "down"
        offset_top: 6
        offset_left: 0
        thumbnail_corner_radius: 10
        thumbnail_size: 120
        max_title_size: 28
        max_artist_size: 20
        show_source: true
      media_menu_icons:
        play: "\ue768"
        pause: "\ue769"
        prev_track: "\ue892"
        next_track: "\ue893"
  memory:
    type: "yasb.memory.MemoryWidget"
    options:
      label: "<span>\uebe4</span> {virtual_mem_outof}"
      label_alt: "<span>\uf4bc</span> {virtual_mem_outof}%"
      update_interval: 5000
      callbacks:
        on_right: "exec cmd /c Taskmgr"
        on_left: "exec cmd /c Taskmgr"
  cpu_temp:
    type: "yasb.libre_monitor.LibreHardwareMonitorWidget"
    options:
      label: "<span>\uefa7</span>{info[value]}{info[unit]}"
      label_alt: "<span>\uefa7</span>{info[value]}{info[unit]}"
      # To find your sensor_id: open LibreHardwareMonitor, go to
      # http://localhost:8085 in your browser, find your CPU temperature
      # sensor and copy its path. Replace the value below with your sensor_id.
      # Common examples:
      # Intel: /intelcpu/0/temperature/12
      # AMD:   /amdcpu/0/temperature/0
      sensor_id: "/intelcpu/0/temperature/12"
      update_interval: 2000
      precision: 0
      server_host: "localhost"
      server_port: 8085
      connection_error_label: "LHM offline"
      sensor_id_error_label: "N/A"
      class_name: "cpu-temp-widget"
    callbacks:
      on_left: "do_nothing"
      on_middle: "do_nothing"
      on_right: "do_nothing"
  wifi:
    type: "yasb.wifi.WifiWidget"
    options:
      label: "<span>{wifi_icon}</span> {wifi_strength}%"
      label_alt: "<span>{wifi_icon}</span> {wifi_name}"
      update_interval: 5000
      animation:
        enabled: true
        duration: 100
        type: "fadeInOut"
      menu_config:
        blur: true
        round_corners: true
        round_corners_type: "normal"
        border_color: None
        alignment: "right"
        direction: "down"
        offset_top: 6
        offset_left: 0
        wifi_icons_unsecured:
          - "\uec3c"
          - "\uec3d"
          - "\uec3e"
          - "\uec3f"
      wifi_icons:
        - "\udb82\udd2d"
        - "\udb82\udd1f"
        - "\udb82\udd22"
        - "\udb82\udd25"
        - "\udb82\udd28"
      callbacks:
        on_left: "toggle_menu"
        on_middle: "exec quick_settings"
        on_right: "toggle_label"
  volume:
    type: "yasb.volume.VolumeWidget"
    options:
      label: "<span>{icon}</span> {level}"
      label_alt: "{volume}"
      volume_icons:
        - "\ueee8"
        - "\uf026"
        - "\uf027"
        - "\uf027"
        - "\uf028"
      audio_menu:
        blur: true
        round_corners: true
        round_corners_type: "normal"
        border_color: "None"
        alignment: "center"
        direction: "down"
        offset_top: 6
      callbacks:
        on_right: "exec cmd.exe /c start ms-settings:sound"
  battery:
    type: "yasb.battery.BatteryWidget"
    options:
      label: "<span>{icon}</span>{percent}%"
      label_alt: "<span>{icon}</span> {percent}% | time: {time_remaining}"
      charging_options:
        icon_format: "{charging_icon}"
      status_icons:
        icon_charging: "\udb85\udc0b"
        icon_critical: "\udb80\udc7a"
        icon_low: "\udb80\udc7b"
        icon_medium: "\udb80\udc7e"
        icon_high: "\udb80\udc80"
        icon_full: "\udb80\udc79"
  notifications:
    type: "yasb.notifications.NotificationsWidget"
    options:
      label: "<span>\ueaa2</span>"
      label_alt: "<span>\ueb9a {count} </span>"
      hide_empty: true
      tooltip: true
      callbacks:
        on_left: "toggle_notification"
        on_right: "toggle_label"

Readme

# Catppuccin-Glass

> A sleek, glassy YASB status bar theme built on Catppuccin Mocha — featuring Komorebi workspace integration, live media controls, CPU temperature, while keeping it minimal with a pill based design.

![Preview](https://i.imgur.com/KRRoCua.png)

---

## ⚠️ IMPORTANT — CPU Temp Widget Setup

This widget requires **LibreHardwareMonitor** running in the background. If you don't want it, skip to the [Removing CPU Temp](#removing-cpu-temp) section below.

**First time setup:**

1. Download [LibreHardwareMonitor](https://github.com/LibreHardwareMonitor/LibreHardwareMonitor/releases) from the official GitHub releases page
2. Extract and run `LibreHardwareMonitor.exe` as **Administrator**
3. Go to **Options → Web Server → Run**
4. Verify it works by opening `http://localhost:8085` in your browser
5. To make it start minimized to tray on every boot:
   - **Options → Start Minimized** ✓
   - **Options → Minimize To Tray** ✓
   - **Options → Run On Windows Startup** ✓

**Finding your sensor ID:**

Open `http://localhost:8085` in your browser and find your CPU temperature sensor path. Common examples:

Intel: /intelcpu/0/temperature/12
AMD:   /amdcpu/0/temperature/0


Update it in `config.yaml`:

cpu_temp:
  options:
    sensor_id: "/intelcpu/0/temperature/12"  # replace with your sensor path


### Removing CPU Temp

If you don't want the CPU temp widget, remove `"cpu_temp"` from the right widgets list in `config.yaml`:

right: ["memory", "wifi", "volume", "battery", "notifications"]

Then delete the entire `cpu_temp:` widget block from the widgets section.

---

## Bar Layout


[ ⊞  ○ ━━━ ○ ○ ○  App Name ]   [ Date · Media Controls · Apps ]   [  RAM ·  Temp  ·  WiFi  · Vol · Bat · 🔔 ]
  ↑        ↑          ↑             ↑          ↑            ↑         ↑        ↑       ↑
Power   Workspaces  Active         Clock      Media        Center     Memory  CPU     WiFi
Menu               Window                     Player       Grouper    Widget  Temp    Menu


---

## Widgets — What Each Does

### ⊞ Power Menu (Left)
Click the Windows icon on the far left to open the power menu.

<img width="1919" height="1069" alt="Power Menu" src="https://github.com/user-attachments/assets/cbdec2d2-c0d8-4392-bc8d-33cbfe9d4007" />

<br><br>
Options: Shut Down · Restart · Lock · Sign Out · Hibernate · Sleep · Cancel

Uptime is shown at the bottom of the power menu.

---

### ○ ━━━ ○ ○ ○ Komorebi Workspaces (Left)
Shows your active Komorebi tiling window manager workspaces. The active workspace appears as a wider filled pill. Populated workspaces show a small dot.

**Don't use Komorebi?** Remove it from your config:

In `config.yaml`, find this line under `widgets > left`:

left: ["power_menu", "komorebi_workspaces", "active_window"]

Change it to:

left: ["power_menu", "active_window"]

Then remove the `komorebi_workspaces` widget block entirely from the widgets section. It will look something like this:

<img width="1920" height="58" alt="No Komorebi" src="https://github.com/user-attachments/assets/e9d69533-ccaf-43c1-9351-c6908720e35d" />

---

### Media Controls (Center)
Shows currently playing track from Spotify, Apple Music, or any media source. Note: Apple Music does not support playback progress — everything else works fine.

- **Left click** — opens media popup with album art, progress bar and volume
- **Right click** — toggles between `Song - Artist` and `Artist - Song` display
<br><br>
<img width="1919" height="1021" alt="Media Player" src="https://github.com/user-attachments/assets/d7448717-df06-46ef-8f88-15e5079ae647" />

---

### Center Grouper — App Shortcuts (Center)
The pill-shaped group in the center contains quick launch icons:

| Icon | Action |
|------|--------|
| 🔔 | Opens Windows Notification Center |
| 🔍 | Opens Windows Settings search — I personally use [Flow Launcher](https://www.flowlauncher.com/) instead of Windows Search, which is why this opens Settings search rather than the default |
| ⋮⋮⋮ | Opens Komorebi Control menu — start, stop, or reload Komorebi |
| 🏞️ | Opens Wallpaper Gallery — browse and set wallpapers from your folder |
| 📊 | Opens Task Manager 
| `>_` | Opens Windows Terminal as **Administrator** — use with caution |
| 🎚️ | Opens Windows Quick Settings |

**Komorebi Control popup:**

<img width="1919" height="1010" alt="Komorebi Control" src="https://github.com/user-attachments/assets/31220426-895a-401a-9cc8-1c0773dca3a3" />
<br><br>
Komorebi starts automatically on boot via `komorebic start --whkd`. Use this menu if you need to manually restart or stop it or pause it.

---

### Wallpaper Gallery
Click the wallpaper icon in the center grouper to browse your wallpaper collection in a glassy gallery popup.

**Setting your wallpaper folder:**

In `config.yaml`, find the wallpapers widget and update the path:

wallpapers:
  options:
    image_path: "C:\\Users\\YourName\\YourWallpaperFolder"

Replace `YourName` with your Windows username and `YourWallpaperFolder` with the name of your wallpaper folder.

---

### WiFi Widget (Right)
Shows WiFi signal strength percentage. **Left click** opens the WiFi network menu.
<br><br>
<img width="1919" height="1011" alt="WiFi Menu" src="https://github.com/user-attachments/assets/73648a9c-183e-4223-a6d4-575c01b6e92c" />
<br><br>
**Right click** toggles between signal percentage and network name.

---

## Final Note

You can use this however you like, but I personally use it without a Windows taskbar. Everything you need like app switching, system stats, media, workspaces  is right here at the top. For launching apps, [Flow Launcher](https://www.flowlauncher.com/) is recommended as a fast keyboard-driven launcher.



<img width="1919" height="1077" alt="Full Setup" src="https://github.com/user-attachments/assets/282259d8-5af2-4d63-b54c-0b5330446c04" />  
<br><br> 

For a complete setup, I personally use [Windhawk](https://windhawk.net/) with the Squircle taskbar mod for a minimal-style taskbar at the bottom, keeping the YASB bar clean and distraction-free at the top.


<br><br>
<img width="1919" height="1079" alt="Screenshot 2026-04-25 152203" src="https://github.com/user-attachments/assets/504c0bd0-b6ef-4bcc-bc9b-a5833a0b6718" />


---

## Requirements

| Tool | Purpose | Link |
|------|---------|------|
| YASB | Status bar | [github.com/amnweb/yasb](https://github.com/amnweb/yasb) |
| Komorebi | Tiling window manager | [github.com/LGUG2Z/komorebi](https://github.com/LGUG2Z/komorebi) |
| whkd | Hotkey daemon for Komorebi | [github.com/LGUG2Z/whkd](https://github.com/LGUG2Z/whkd) |
| JetBrainsMono NFP | Nerd Font for icons | [nerdfonts.com](https://www.nerdfonts.com/font-downloads) |
| Segoe UI Variable | System UI font | Included with Windows 11 |
| LibreHardwareMonitor | CPU temp readings | [GitHub Releases](https://github.com/LibreHardwareMonitor/LibreHardwareMonitor/releases) |


**Liked the theme? Dont forget to give me a ⭐ on this github repo | [Repository link](https://github.com/PraBuDDha1x1/Catppucin-Glass) |**

**Thanks for reading this much Here's a Cookie for the road: 🍪**

---

## Credits

Built with [YASB](https://github.com/amnweb/yasb) by amnweb. Inspired by the design of yasb-004.
Catppuccin color palette by [catppuccin](https://github.com/catppuccin/catppuccin).
Theme by [PRABUDDHA1x1](https://github.com/PRABUDDHA1x1).

[github-actions]

Thank you for your contribution! 🎉

Your theme has been successfully submitted. The maintainers will review it and get back to you soon.

Here are some details about your submission:

• Your theme has been requested into this PR.
• It has been created into the create-theme-299 branch.

If you have any questions or need help, feel free to ask in the comments below or in the PR.