Skip to content

[create-theme]: KomoFade #301

Open
Open
[create-theme]: KomoFade#301
@bonecrull

Description

@bonecrull
bonecrull
opened on May 5, 2026

Name

KomoFade

Description

A minimalistic YASB Komorebi focused theme for the casual user

Homepage

No response

Image

https://i.postimg.cc/SQzhNBsS/yasb-bar-primary-bar-20260505-181204.png

Theme Styles

:root {
    --mauve: #cba6f7;
    --red: #f38ba8;
    --yellow: #f9e2af;
    --orange: #fab387;
    --blue: #89b4fa;
    --green: #94e2d5;
    --lavender: #b4befe;
    --text: #ece8ff;
    --subtext1: #d0c8e6;
    --subtext0: #aeb2c5;
    --overlay2: #a49db4;
    --overlay1: #9c97af;
    --overlay0: #7d7f91;
    --surface2: #767483;
    --surface1: #5b5e68;
    --surface0: #3c3941;
    --base: rgb(17, 18, 19);
    --crust: rgba(26, 26, 26, 0.8);
    --bar: rgba(14, 14, 14, 0.664);
}
* {
    font-size: 12px;
    color: var(--text);
    font-weight: 600;
    font-family: "JetBrainsMono NFP";
    margin: 0;
    padding: 0;
}
.yasb-bar {
    background: linear-gradient(to bottom, var(--crust), rgba(26, 26, 26, 0.555), rgba(177, 177, 177, 0));
    padding:4px 0px;
    border-radius:6px;
}
/* Global styles for ToolTip */
.tooltip {
    background-color: var(--crust);
    border: 1px solid var(--surface0);
    border-radius: 4px;
    color: var(--text);
    padding: 4px 8px 5px 8px;
    font-size: 12px;
    font-family: 'JetBrainsMono NFP';
    font-weight: 600;
    margin-top: 4px;
}
/* Global styles for Progress Circle */
.progress-circle {
    padding-right: 4px;
}
/* Global context menu style */
.context-menu,
.context-menu .menu-checkbox {
    background-color: var(--crust);
    border: 1px solid var(--overlay1);
    border-radius: 10px;
    padding: 4px 0px;
    font-family: 'JetBrainsMono NFP';
    font-size: 12px;
    color: var(--overlay1);
}
.context-menu::right-arrow {
    width: 8px;
    height: 8px;
    padding-right: 24px;
}
.context-menu::item,
.context-menu .menu-checkbox {
    background-color: transparent;
    padding: 6px 12px;
    margin: 2px 6px;
    border-radius: 4px;
    min-width: 100px;
}
.context-menu::item:selected,
.context-menu .menu-checkbox:hover {
    background-color: #313131;
    color: #FFFFFF;
}
.context-menu::separator {
    height: 1px;
    background-color: #404040;
    margin: 4px 8px;
}
.context-menu::item:disabled {
    color: #666666;
    background-color: transparent;
}
.context-menu .menu-checkbox .checkbox {
    border: none;
    padding: 8px 16px;
    font-size: 12px;
    margin: 0;
    color: #FFFFFF;
    font-family: 'JetBrainsMono NFP'
}
.context-menu .submenu::item:disabled {
    margin: 0;
    padding-left: 16px;
}
.context-menu .menu-checkbox .checkbox:unchecked {
    color: #999
}
.context-menu .menu-checkbox .checkbox::indicator {
    width: 12px;
    height: 12px;
    margin-left: 0px;
    margin-right: 8px;
}
.context-menu .menu-checkbox .checkbox::indicator:unchecked {
    background: #444444;
    border-radius: 2px;
}
.context-menu .menu-checkbox .checkbox::indicator:checked {
    background: #c1c2ff;
    border-radius: 2px;
}
.context-menu .menu-checkbox .checkbox:focus {
    outline: none;
}
.widget {
    padding: 0 8px;
    margin: 0;
    transition: all 200ms ease-out;
}
.icon {
    font-size: 11px;
    padding-right: 4px;
}
.widget .label {
    padding: 0px 2px;
}
.grouped-widgets .container {
    background-color: var(--base);
    margin: 4px 0 4px 0;
    border-radius: 12px;
    border: 1px solid var(--surface1);
}

.komorebi-workspaces .offline-status {
    color: var(--surface2);
    font-size: 12px;
    padding: 0 0 0 4px;
    font-weight: 600;
}
.komorebi-workspaces .ws-btn {
    border: 1px solid;
    border-color: var(--surface1);
    border-radius: 4px;
    background-color: var(--crust);
    margin: 0 2px;
    padding: 0 6px;
    font-size: 14px;
    color: var(--surface1);
    transition: all 200ms ease-out;
}
.komorebi-workspaces .ws-btn:hover {
    color: var(--overlay2);
    border-color: var(--overlay2);
}
.komorebi-workspaces .ws-btn.populated {
    color: var(--overlay0);
    background-color:var(--surface0);
    border-color: var(--overlay0);
}
.komorebi-workspaces .ws-btn.active {
    color: var(--crust);
    font-weight: 900;
    background-color: var(--text);
    border-color: var(--text);
}
.cpu-widget .icon {
    color: var(--orange);
}
.memory-widget .label,
.cpu-widget .label {
    padding-right: 8px;
}
.clock-widget{
    padding-left: -1px;
    transition: all 200ms ease-out;
}
.clock-widget .label {
    background-color: var(--crust);
    margin: 0px 0px;
    padding: 0px 12px;
    color: var(--overlay0);
    border: 1px solid var(--overlay0);
    border-radius: 4px;
    font-weight: 500;
    font-size: 14px;
    transition: all 200ms ease-out;
}
.clock-widget .label:hover{
    background-color: var(--surface0);
    color: var(--overlay1);
    border-color: var(--overlay1);
}
.calendar {
    background-color: var(--crust);
    border: 1px solid var(--surface1);
    border-radius: 4px;
}
.calendar .calendar-table,
.calendar .calendar-table::item {
    background-color: rgba(17, 17, 27, 0);
    color: var(--overlay2);
    font-family: 'JetBrainsMono NFP';
    margin: 2px 2px;
    padding: 0px 0px;
    border: none;
    outline: none;
    transition: all 200ms ease-out;
}
.calendar .calendar-table::item:selected {
    color: var(--text);
    background-color: var(--surface2);
    border-radius: 4px;
}
.calendar .calendar-table::item:hover {
    background-color: var(--surface1);
    border-radius: 4px;
}
.calendar .day-label {
    margin-top: 20px;
}
.calendar .day-label,
.calendar .month-label,
.calendar .date-label,
.calendar .week-label,
.calendar .holiday-label {
    font-family: 'JetBrainsMono NFP';
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    min-width: 180px;
    max-width: 180px;
}
.calendar .month-label {
    font-weight: normal;
}
.calendar .week-label,
.calendar .holiday-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(162, 177, 196, 0.85);
}
.calendar .holiday-label {
    color: var(--red);
    font-weight: 700;
}
.calendar .date-label {
    font-family: 'JetBrainsMono NFP';
    font-size: 88px;
    font-weight: 900;
    color: rgb(255, 255, 255);
    margin-top: -20px;
    margin-bottom: -10px;
}
.power-menu-widget .label {
    color: var(--red);
    font-size: 14px;
    padding: 2px 6px;
    background-color: #3a1c1c;
    border: 1px solid var(--red);
    border-radius: 4px;
    transition: all 200ms ease-out;
}
.power-menu-widget .label:hover {
    color: #ffbfbf;
    background-color:rgb(97, 41, 41);
    border-color: #ffbfbf;
    font-size: 14px;
}
.power-menu-popup {
    background-color: transparent;
}
.power-menu-popup .button {
    padding: 0px;
    width: 200px;
    height: 200px;
    border-radius: 12px;
    background-color: var(--crust);
    color: var(--overlay1);
    border: 4px solid rgba(58, 83, 80, 0);
    margin: 2px;
}
.power-menu-popup .button.hover {
    border: 4px solid var(--overlay2);
    background-color: #232327;
}
.power-menu-popup .button.cancel.hover {
    border: 4px solid #e29494;
    background-color: #201717;
}
.power-menu-popup .button .label {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--overlay2)
}
.power-menu-popup .button .icon {
    font-size: 64px;
    padding-top: 32px;
    color: var(--overlay2)
}
.power-menu-popup .button.cancel .icon,
.power-menu-popup .button.cancel .label {
    color: var(--red);
}
.uptime {
    font-size: 14px;
    margin-bottom: 10px;
    color: var(--text);
    font-weight: 600;
}
.audio-menu {
    background-color: var(--crust);
    border: 1px solid var(--overlay0);
    border-radius:4px;
    padding: 2px 12px;
}

.volume-widget{
    background-color: var(--crust);
    border: 1px solid var(--overlay0);
    border-radius: 4px;
    transition: all 200ms ease-out;
}
.volume-widget .label{
    color:var(--overlay0);
    margin-bottom: 0px;
    margin-right: -2px;
    font-size: 14px;
}
.volume-widget .label-alt{
    margin-right: -6px;
}
.volume-widget .icon {
    font-size: 14px;
    margin-top:-1px;
    color: var(--overlay0);
}

.volume-widget:hover{
    background-color: var(--surface0);
    border-color: var(--overlay1);
}
.volume-widget .icon:hover, .volume-widget .label:hover{
    color:var(--overlay1);
}
.language-widget .icon {
    color: var(--green);
}
.language-menu {
    background-color: var(--crust);
    min-width: 300px;
}
.language-menu .header {
    font-family: 'Segoe UI';
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
    padding: 12px;
}
.language-menu .footer {
    font-family: 'Segoe UI';
    font-size: 12px;
    font-weight: 600;
    padding: 12px;
    margin-top: 2px;
    color: #9399b2;
}
.language-menu .footer:hover {
    background-color: rgba(255, 255, 255, 0.05);
}
.language-menu .language-item {
    padding: 6px 12px;
    margin: 2px 4px;
}
.language-menu .language-item.active {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}
.language-menu .language-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}
.language-menu .language-item.active:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}
.language-menu .language-item .code {
    font-weight: 900;
    font-size: 14px;
    min-width: 40px;
    text-transform: uppercase;
}
.language-menu .language-item .icon {
    font-size: 16px;
    margin-right: 8px;
    color: #fff;
}
.language-menu .language-item .name {
    font-weight: 600;
    font-family: 'Segoe UI';
    font-size: 14px;
}
.language-menu .language-item .layout {
    font-weight: 600;
    font-family: 'Segoe UI';
    font-size: 12px;
}
.systray {
    background: var(--crust);
    border: 1px solid var(--surface2);
    border-radius: 4px;
    margin: 0;
    padding: 0;
}
.systray .button {
    border-radius: 4px;
    padding: 2px 4px;
    background-color: transparent;
    transition: all 200ms ease-out;
}
.systray .button:hover,
.systray .unpinned-visibility-btn:hover {
    background-color: var(--surface0);
    color: var(--overlay1);
    border-color: var(--overlay1);
}
.systray .unpinned-visibility-btn {
    height: 20px;
    width: 32px;
    background-color: transparent;
    border: none;
    font-size: 14px;
    color: var(--overlay2);
}
.systray .unpinned-visibility-btn:hover {
    border-radius: 4px;
}
.home-widget {
    padding-right: 0;
}
.home-widget .icon {
    color: var(--lavender);
    font-size: 17px;
}
.home-widget .icon:hover {
    color: var(--text);
}
.home-menu {
    background-color: var(--crust);
    border-radius: 8px;
}
.home-menu .menu-item {
    padding: 8px 48px 9px 16px;
    font-size: 12px;
    font-family: 'Segoe UI';
    color: var(--text);
    font-weight: 600;
}
.home-menu .menu-item:hover {
    background-color: rgba(128, 130, 158, 0.15);
    color: #fff;
}
.home-menu .separator {
    max-height: 1px;
    background-color: rgba(128, 130, 158, 0.3);
}
.notification-widget .widget-container {
    background-color: var(--crust);
    padding: 0px 4px;
    border: 1px solid var(--overlay0);
    border-radius: 4px;
}
.notification-widget .widget-container:hover{
    background-color: var(--surface0);
    border-color: var(--overlay1);
}
.notification-widget .icon.new-notification {
    color: var(--overlay0);
    font-size: 12px;
    margin-top: 0cqw;
}
.notification-widget .label.new-notification {
    color: var(--overlay0);
    font-size: 14px;
}
.notification-widget .icon.new-notification:hover, .notification-widget .label.new-notification:hover{
    color: var(--overlay1);
}
.media-widget {
    padding: 0px 6px;
    margin: 0;
    background: var(--crust);
    border: 1px solid var(--overlay0);
    border-radius: 4px;
    
}
.media-widget:hover{
    background:var(--surface0);
    border-color:var(--overlay1);
    color: var(--overlay1);
}
.media-widget .label {
    padding: 0px;
    padding-right: 6px;
    padding-left: 6px;
    color: var(--overlay0);
}
.media-widget .btn {
    color: var(--overlay0);
    padding: 0 4px;
    margin: 0;
    font-family: "JetBrainsMono NFP";
    font-size:14px;
}
.media-widget .btn:hover {
    color: var(--overlay1);
}
.media-menu {
    min-width: 360px;
    max-width: 360px;
    background-color: var(--crust);
    font-family: 'JetBrainsMono NFP';
    border: 1px solid var(--overlay0);
    border-radius: 4px;
}
.media-menu .title,
.media-menu .artist,
.media-menu .source {
    font-size: 14px;
    font-weight: 600;
    margin-left: 10px;
    font-family: 'JetBrainsMono NFP';
    font-style:italic;
}
.media-menu .title,
.media-menu .artist{
    font-style:normal;
    font-weight:900;
}
.media-menu .artist {
    font-size: 13px;
    color: var(--overlay1);
    margin-top: 0px;
    margin-bottom: 8px;
}
.media-menu .source {
    font-size: 11px;
    color: #000;
    font-weight: normal;
    border-radius: 3px;
    background-color: #ffffff;
    padding: 2px 4px;
}
.media-menu .source.firefox {
    background-color: #ff583b;
    color: #ffffff;
}
.media-menu .source.spotify {
    background-color: #428d5c;
    color: #ffffff;
}
.media-menu .source.edge {
    background-color: #0078d4;
    color: #ffffff;
}
.media-menu .source.windows-media {
    background-color: #0078d4;
    color: #ffffff;
}
.media-menu .btn {
    font-family: 'JetBrainsMono NFP';
    font-size: 20px;
    font-weight: 400;
    margin: 10px 2px 0px 2px;
    min-width: 30px;
    max-width: 30px;
    min-height: 30px;
    max-height: 30px;
    border-radius: 20px;
    color: var(--subtext0);
}
.media-menu .btn.prev {
    margin-left: 20px;
}
.media-menu .btn:hover {
    color: var(--subtext1);
    background-color: rgba(255, 255, 255, 0.1);
}
.media-menu .btn.play {
    background-color: rgba(255, 255, 255, 0.1);
    font-size: 20px
}
.media-menu .btn.disabled:hover,
.media-menu .btn.disabled {
    color: #4e525c;
    background-color: rgba(0, 0, 0, 0);
}
.media-menu .playback-time {
    font-size: 13px;
    font-family: 'JetBrainsMono NFP';
    color: var(--surface1);
    margin-top: 0px;
    min-width: 100px;
}
.media-menu .progress-slider {
    height: 20px;
    margin: 0 4px 5px 4px;
    border-radius: 3px;
    color:#ffffff;
}
.media-menu .progress-slider::groove {
    background: transparent;
    height: 2px;
    border-radius: 3px;
    background: var(--surface0);

}
.media-menu .progress-slider::groove:hover {
    background: transparent;
    height: 6px;
    border-radius: 3px;
    background: var(--surface1);
}
.media-menu .progress-slider::sub-page {
    background: var(--subtext1);
    border-radius: 3px;
    height: 4px;
}
.weather-widget .icon {
    font-size: 14px;
    color: var(--yellow);
}
.weather-card {
    background-color: var(--crust);
}
.weather-card-today .label {
    font-size: 13px;
    font-weight: 600;
}
.weather-card-today .label.location {
    font-size: 32px;
    font-weight: 600;
}
.weather-card-today .label.alert {
    font-size: 13px;
    font-weight: 600;
    background-color: rgba(247, 175, 42, 0.05);
    border: 1px solid rgba(247, 209, 42, 0.1);
    color: rgba(196, 181, 162, 0.85);
    border-radius: 6px;
    padding: 5px 0;
}
.weather-card-day {
    border-radius: 6px;
    background-color: var(--crust)
}
.weather-card-day .label {
    font-size: 13px;

}
.weather-card-day.active {
    background-color: rgba(40, 40, 60, 0.6);
    border: 1px solid rgba(50, 50, 75, 1);
}
.weather-card-day:hover {
    background-color: rgba(40, 40, 60, 0.6);
}
.weather-card .hourly-container {
    border: none;
    background-color: rgba(40, 40, 60, 0.0);
    min-height: 150px;
}
.weather-card .hourly-data {
    background-color: #FAE93F;
    font-size: 11px;
    font-weight: bold;
}
.wallpapers-gallery-window {
    background-color: var(--crust);
    border: 1px solid var(--overlay0);
    border-radius: 12px;
    margin: 0;
}

.wallpapers-widget .widget-container{
    font-family: 'JetBrainsMono NFP';
    background-color: var(--crust);
    padding: -1px 12px;
    border: 1px solid var(--overlay0);
    border-radius: 4px;
    transition: all 200ms ease-out;
}

.wallpapers-widget .widget-container:hover{
    background-color: var(--surface0);
    border-color: var(--overlay1);
}
.wallpapers-widget .widget-container .icon{
    font-family: 'JetBrainsMono NFP';
    font-size: 14px;
    margin-right: -4px;
    color: var(--overlay1);
}
.wallpapers-gallery-buttons {
    font-size: 24px;
    font-family: 'JetBrainsMono NFP';
    background-color:rgba(255, 255, 255, 0);
    color: white;
    border: none;
    font-size: 14px;
    padding: 8px 0;
    border-radius: 4px;
    margin:0 8px 8px 8px;
    width: 300px;
    margin-left:auto;
    margin-right:auto;
}
.wallpapers-gallery-buttons:hover {
    background-color:rgba(255, 255, 255, 0.1)
}
.wallpapers-gallery-image {
    border: 2px solid transparent;
    border-radius: 12px;
}
.wallpapers-gallery-image:hover {
    border: 2px solid rgb(65, 65, 70);
}
.wallpapers-gallery-image.focused {
    border: 2px solid #e0e0ff;
}
.taskbar-widget{
    height:max-content;
    padding: 0px 0px;
    margin: 0px 6px;
    background-color: var(--bar);
    border-radius:4px;
}
.taskbar-widget .app-container {
    margin: 1% 2px;
    border-radius: 4px;
    font-size: 12px;
    padding: -2px 4px;
    transition: all 500ms ease-out;
}
.taskbar-widget .app-container .app-title{
    padding-left: 6px;
    color: var(--overlay2);
}
.taskbar-widget .app-container:hover{
    background-color: var(--surface0);
}
.taskbar-widget .app-container.foreground{
    background-color: var(--surface0);
    border: 0.5px solid var(--overlay0);
}
.taskbar-widget .app-container.foreground:hover{
    background-color: var(--surface1);
}
/* Taskbar preview popup is very limited in styling options, do not use margins/paddings here */
.taskbar-preview {
    border-radius: 6px; 
    border: 1px solid var(--surface1);
    background-color: var(--crust);
    font-family: "JetBrainsMono NFP"; 
}
.taskbar-preview.flashing { 
    background-color: #7f434a;
}
.taskbar-preview .header {
    padding-bottom: 12px;
    padding-top: 4px;
}
.taskbar-preview .header .title {
    color: #e8e1ff;
    font-family: "JetBrainsMono NFP";
    font-weight: 600;
    font-style:italic;
    font-size: 12px;
}

.custom-widget .widget-container{
    background-color: var(--crust);
    border: 1px solid var(--overlay0);
    border-radius: 4px;
    min-width: 30px;
    transition: all 200ms ease-out;
}
.custom-widget .widget-container .label{
    color: var(--overlay0);
    align-self: center;
    margin-top: 2px;
    transition: all 200ms ease-out;
}
.custom-widget .widget-container .label:hover{
    color: var(--overlay1);
}
.custom-widget .widget-container:hover{
    background-color: var(--surface0);
    color: var(--overlay1);
    border-color: var(--overlay1);
}

.komorebi-active-layout .widget-container {
    background-color: var(--crust);
    border: 1px solid var(--overlay0);
    border-radius: 4px;
    padding: 0px 6px;
    transition: all 200ms ease-out;
}
.komorebi-active-layout .label {
    color: var(--overlay0);
    padding-bottom:0px;
}
.komorebi-active-layout .label:hover{
    color:var(--overlay1);
}
.komorebi-active-layout .widget-container:hover{
    background-color: var(--surface0);
    border-color: var(--overlay1);
}
.komorebi-layout-menu {
    background-color:var(--crust);
    border: 1px solid var(--overlay0);
    border-radius: 4px;
}
.komorebi-layout-menu .menu-item {
    padding: 2px 16px;
    font-size: 12px;
    color: #cdd6f4; 
    font-weight: 600;
}
.komorebi-layout-menu .menu-item-icon {
    color: #cdd6f4;
    font-size: 16px;
}
.komorebi-layout-menu .menu-item-text {
    font-family: 'JetBrainsMono NFP';
    padding-left:4px;
    font-size: 12px;
} 
.komorebi-layout-menu .menu-item:hover {
    background-color:rgba(128, 130, 158, 0.15);
    color: #fff;
} 
.komorebi-layout-menu .separator {
    max-height: 1px;
    background-color: var(--surface2);
}

Theme Config

watch_stylesheet: true
watch_config: true
debug: false
update_check: true
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: ["primary"]
    class_name: "yasb-bar"
    alignment:
      position: "top"
      center: true
    animation:
      enabled: true
      duration: 400
    blur_effect:
      enabled: false
      acrylic: false
      dark_mode: true
      round_corners: true
      round_corners_type: "normal"
      border_color: "None"
    window_flags:
      always_on_top: false
      windows_app_bar: true
    dimensions:
      width: "100%"
      height: 32
    padding:
      top: 8
      left: 8
      bottom: 0
      right: 8
    widgets:
      left: 
      - "win"
      - "komorebi_workspaces"
      - "taskbar"
      center:
      - "wallpapers"
      - "clock"
      - "systray"
      right:
      - "media"
      - "komorebi_active_layout"
      - "volume"
      - "notifications"
      - "power_menu"
widgets:
  media:
    type: "yasb.media.MediaWidget"
    options:
      label: "{artist} - {title}"
      label_alt: "{title}"
      hide_empty: true
      callbacks:
        on_left: "toggle_media_menu"
        on_middle: "toggle_play_pause"
        on_right: "toggle_label"
      max_field_size:
        label: 24
        label_alt: 24
      show_thumbnail: false
      controls_only: false
      controls_left: false
      controls_hide: false
      thumbnail_edge_fade: true
      thumbnail_padding: 32
      scrolling_label:
        enabled: true
        update_interval_ms: 50
        style: "left"
        separator: "   /   "
        label_padding: 2
        ease_slope: 20
        ease_pos: 0.8
        ease_min: 0.5
      icons:
       prev_track: "\uf048"
       next_track: "\uf051"
       play: "\uf04B"
       pause: "\uf04C"
      media_menu:
        blur: false
        round_corners: true
        round_corners_type: "normal"
        border_color: "None"
        alignment: "right"
        direction: "down"
        offset_top: 6
        offset_left: 0
        thumbnail_corner_radius: 4
        thumbnail_size: 80
        max_title_size: 60
        max_artist_size: 20
        show_source: true
      media_menu_icons:
       prev_track: "\uf048"
       next_track: "\uf051"
       play: "\uf04B"
       pause: "\uf04C"
  systray:
    type: "yasb.systray.SystrayWidget"
    options:
      class_name: "systray"
      label_collapsed: "\uf147"
      label_expanded: "\uf146"
      label_position: "right"
      icon_size: 16
      pin_click_modifier: "alt"
      show_unpinned: false
      show_unpinned_button: true
      show_battery: false
      show_volume: false
      show_network: false
      tooltip: true
  clock:
    type: "yasb.clock.ClockWidget"
    options:
      label: "{%H:%M:%S}"
      label_alt: "{%A, %d %B %Y %H:%M}"
      timezones: []
      calendar: 
        blur: true
        round_corners: false
        round_corners_type: "normal"
        border_color: "None"
        alignment: "center"
        direction: "down"
      callbacks:
        on_left: "toggle_calendar"
        on_right: "toggle_label"
  komorebi_workspaces:
    type: "komorebi.workspaces.WorkspaceWidget"
    options:
      label_offline: "\u23fc Offline"
      label_workspace_btn: "•"
      label_workspace_active_btn: " ── "
      label_workspace_populated_btn: "•"
      label_default_name: "{index}"
      label_zero_index: false
      hide_empty_workspaces: false
      hide_if_offline: true
      animation: true
  volume:
    type: "yasb.volume.VolumeWidget"
    options:
      label: "<span>{icon}</span> {level}"
      label_alt: "{level}"
      mute_text: "0%"
      volume_icons:
        - "\ueee8"
        - "\uf026"
        - "\uf027"
        - "\uf027"
        - "\uf028"
      callbacks:
        on_left: "toggle_volume_menu"
        on_right: "toggle_mute"
      audio_menu:
        blur: false
        round_corners: true
        round_corners_type: "normal"
        border_color: "None"
        alignment: "right"
        direction: "down"
        offset_top: 6
        offset_left: 0
      container_padding:
        top: 0
        left: 2
        bottom: 0
        right: 2
  power_menu:
    type: "yasb.power_menu.PowerMenuWidget"
    options:
      label: "\uf011"
      uptime: true
      blur: false
      blur_background: true
      animation_duration: 200
      button_row: 3
      buttons:
        shutdown: ["\uf011", "Shut Down"]
        restart: ["\uead2", "Restart"]
        signout: ["\udb80\udf43", "Sign out"]
        hibernate: ["\uf28e", "Hibernate"]
        sleep: ["\u23fe", "Sleep"]
        cancel: ["\ueab8", "Close"]
      container_padding:
        top: 0
        left: 0
        bottom: 0
        right: 6
  notifications:
    type: "yasb.notifications.NotificationsWidget"
    options:
      label: "<span>\uf476</span> {count}"
      label_alt: "{count} notifications"
      hide_empty: true
      tooltip: false
      callbacks:
        on_left: "toggle_notification"
        on_right: "do_nothing"
        on_middle: "toggle_label"
      container_padding:
        top: 0
        left: 4
        bottom: 0
        right: 4
  weather:
    type: "yasb.weather.WeatherWidget"
    options:
      label: "<span>{icon}</span> {temp}"
      label_alt: "{location}: Min {min_temp}, Max {max_temp}, Humidity {humidity}"
      api_key: "$Env:YASB_WEATHER_API_KEY"
      location: "$Env:YASB_WEATHER_LOCATION"
      show_alerts: true
      update_interval: 600
      hide_decimal: true
      units: "metric"
      icons:
        sunnyDay: "\ue30d"
        clearNight: "\ue32b"
        cloudyDay: "\ue312"
        cloudyNight: "\ue311"
        rainyDay: "\ue308"
        rainyNight: "\ue333"
        snowyIcyDay: "\ue30a"
        snowyIcyNight: "\ue335"
        blizzardDay: "\udb83\udf36"
        blizzardNight: "\udb83\udf36"
        foggyDay: "\ue303"
        foggyNight: "\ue346"
        thunderstormDay: "\ue30f"
        thunderstormNight: "\ue338"
        default: "\uebaa"
      callbacks:
        on_left: "toggle_card"
        on_middle: "do_nothing"
        on_right: "toggle_label"
      weather_card:
        blur: true
        round_corners: true
        round_corners_type: "normal"
        border_color: "None"
        alignment: "right"
        direction: "down"
        icon_size: 64
        show_hourly_forecast: true
        time_format: "24h"
        hourly_point_spacing: 76
        hourly_icon_size: 32
        icon_smoothing: true
        temp_line_width: 2
        current_line_color: "#8EAEE8"
        current_line_width: 2
        current_line_style: "dot"
  active_window:
    type: "yasb.active_window.ActiveWindowWidget"
    options:
      label: "{win[title]}"
      label_alt: "[class_name='{win[class_name]}' exe='{win[process][name]}' hwnd={win[hwnd]}]"
      label_no_window: ""
      label_icon: true
      label_icon_size: 16
      max_length: 36
      max_length_ellipsis: "..."
      monitor_exclusive: false
  grouped_widgets:
    type: "yasb.grouper.GrouperWidget"
    options:
      class_name: "grouped-widgets"
      widgets: [
        "memory",
        "cpu",
        "weather",
      ]
      container_padding:
        top: 0
        left: 2
        bottom: 0
        right: 6
  wallpapers:
    type: "yasb.wallpapers.WallpapersWidget"
    options:
      label: "<span> \udb83\ude09</span>"
      image_path: "C:\\Users\\nisha\\Documents\\wallpaper"
      change_automatically: false
      update_interval: 60
      gallery:
        enabled: true
        blur: false
        image_width: 300
        image_per_page: 5
        gallery_columns: 5
        horizontal_position: "center" # left/center/right placement on screen
        vertical_position: "center" # top/center/bottom placement
        position_offset: 6 # minimum gap (px) from screen edges - see below for advanced options
        respect_work_area: true # clamp to OS work area (avoids Windows taskbar)
        show_buttons: false
        orientation: "portrait"
        image_spacing: 10
        lazy_load: true
        lazy_load_delay: 50
        lazy_load_fadein: 500
        image_corner_radius: 8
        enable_cache: true
  taskbar:
   type: "yasb.taskbar.TaskbarWidget"
   options:
    icon_size: 17
    tooltip: true
    show_only_visible: false
    strict_filtering: true
    monitor_exclusive: false
    animation:
      enabled: false
      type: fadeInOut
      duration: 100
    preview:
      enabled: true
      width: 240
      delay: 400
      padding: 8
      margin: 8
    title_label:
      enabled: true
      show: "focused"
      min_length: 1
      max_length: 24
    ignore_apps:
      processes: []
      titles: []
      classes: []
  win:
    type: "yasb.custom.CustomWidget"
    options:
      label: "//"
      label_alt: "Windows"
      class_name: "custom-widget"
      callbacks:
        on_left: "exec start_menu"
  komorebi_active_layout:
   type: "komorebi.active_layout.ActiveLayoutWidget"
   options:
    hide_if_offline: true
    label: "{icon}"
    layouts: ['bsp', 'columns', 'rows', 'grid', 'scrolling', 'vertical_stack', 'horizontal_stack', 'ultrawide_vertical_stack','right_main_vertical_stack']
    layout_icons:
      bsp: "\uebeb"
      columns: "\uebf7"
      rows: "\uec01"
      grid: "\udb81\udf58"
      scrolling: "\uebf7"
      vertical_stack: "\uebee"
      horizontal_stack: "\uebf0"
      ultrawide_vertical_stack: "\uebee"
      right_main_vertical_stack: "\uebf1"
      monocle: "\uf06f"
      maximized: "\uf06f"
      floating: "\uf2d2"
      paused: "\udb83\udf89"
      tiling: "\udb81\ude40"
    callbacks:
      on_left: 'toggle_layout_menu'
      on_middle: 'next_layout'
      on_right: 'toggle_tiling'
    layout_menu:
      blur: false
      round_corners: true
      round_corners_type: "normal"
      border_color: "System"
      alignment: "right"
      direction: "down"
      offset_top: 6
      offset_left: 0
      show_layout_icons: true
    label_shadow:
      enabled: false
      color: "black"
      radius: 3
      offset: [ 1, 1 ]

Readme

## Dependencies:

 The JetBrainsMono font family is required for this theme to work.

## Widgets:

 Start Menu ; Komorebi Workspaces ; Taskbar Icons **//** Wallpapers ; Clock ; System Tray **//** Media ; Komorebi Layout ; Volume ; Notifications (auto-hide) ; Power Menu

## Gallery:

Wallpaper Widget:
![Wallpaper widget preview](https://i.postimg.cc/0KMJYCkj/Screenshot-2026-05-05-181712.png)
Media Widget:
![Media widget preview](https://i.postimg.cc/FdnLk649/Screenshot-2026-05-05-181906.png)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions