[create-theme]: Init Light

[initiateit]

Name

Init Light

Description

A minimal rounded, boxy and light theme for Yasb.

Homepage

https://github.com/initiateit/Init-Light

Image

https://raw.githubusercontent.com/initiateit/Init-Light/master/image.png

Theme Styles

/*GENERAL CONFIGRATIONS*/
:root {
  --bg-light: #e5e7eb;
  --bg-light-hover: #d1d5db;
  --bg-light-transparent: #e5e7eb71;
  --text-dark: #18181b;
  --text-gray: #59595f;
  --text-gray-light: #4e525c;
  --text-white: #ffffff;
  --accent-blue: #0176a3;
  --accent-blue-dark: #0078d4;
  --accent-orange: #ff583b;
  --accent-green: #199143;
  --source-bg-default: #bac2de;
  --slider-groove: #d9dbdf;
  --slider-groove-hover: #a3a3a3;
  --separator-color: #b8b7b7;
  --notification-badge-bg: #18181b;
  --notification-badge-text: #f9f9f9;
}
.widget .icon {
  font-size: 16px;
}
/*KOMOREBI LAYOUT*/
.komorebi-active-layout .label {
  background-color: var(--bg-light);
  color: var(--text-dark);
  font-family: "Material Symbols Rounded";
  font-size: 18.6667px;
  font-weight: 450;
  padding-right: 12px;
  padding-left: 10px;
  border-radius: 12px;
  margin-left: 8px;
  width: 20px;
}
.komorebi-layout-menu {
  background-color: var(--bg-light);
  color: var(--text-gray);
  border-radius: 12px;
  margin-left: 8px;
  margin-top: 4px;
}
.komorebi-layout-menu:hover {
  background-color: var(--bg-light-hover);
  color: var(--text-dark);
}
.komorebi-layout-menu .menu-item {
  padding: 8px 16px;
  margin-top: 4px;
  margin-left: 8px;
  font-size: 16px;
  color: var(--text-gray);
}
.komorebi-layout-menu .menu-item-icon {
  font-family: "Material Symbols Rounded";
  color: var(--text-gray);
  font-size: 18px;
}
.komorebi-layout-menu .menu-item-icon:hover {
  color: var(--accent-blue);
}
.komorebi-layout-menu .menu-item-text {
  font-family: "Segoe UI Semibold";
  padding-left: 4px;
  font-size: 16px;
  font-weight: bold;
}
.komorebi-layout-menu .menu-item-text:hover {
  color: var(--accent-blue);
}
.komorebi-layout-menu .separator {
  max-height: 1px;
  background-color: var(--separator-color);
}
/*KOMOREBI-WORKSPACES*/
.komorebi-workspaces {
  font-family: "Material Symbols Rounded";
  background-color: transparent;
  margin: 0 24px -2px 8px;
  padding: 0 0 0 0;
  border-radius: 6px;
}
.komorebi-workspaces .offline-status {
  color: var(--bg-light-transparent);
  font-size: 14px;
  padding: 0 4px;
  font-weight: bold;
}
.komorebi-workspaces .ws-btn {
  font-family: "Material Symbols Rounded";
  qproperty-text: "";
  border: none;
  width:0;
  height:0;
  font-size:22.6667px;
}
.komorebi-workspaces .ws-btn.populated {
  width:0;
  height:0;
}
.komorebi-workspaces .ws-btn.active {
  font-weight:400;
  background-color: var(--bg-light);
  color: var(--text-dark);
  margin: 0 4px 2px 2px;
  border-radius: 12px;
  padding: 6px 6px 6px 5px;
  height: 24px;
  width: 31px;
}
.komorebi-workspaces .ws-btn.button-1 {
    font-family: "Material Symbols Rounded";
    qproperty-text: "";
}
.komorebi-workspaces .ws-btn.button-2 {
    font-family: "Material Symbols Rounded";
    qproperty-text: "";
}
.komorebi-workspaces .ws-btn.button-3 {
    font-family: "Material Symbols Rounded";
    qproperty-text: "";
}
.komorebi-workspaces .ws-btn.button-4 {
    font-family: "Material Symbols Rounded";
    qproperty-text: "";
}
.komorebi-workspaces .ws-btn.button-5 {
    font-family: "Material Symbols Rounded";
    qproperty-text: "";
}
.komorebi-workspaces .ws-btn.button-6 {
    font-family: "Material Symbols Rounded";
    qproperty-text: "";
}
/*ACTIVE WINDOW*/
.active-window-widget {
  background-color: var(--bg-light);
  padding-right: 20px;
  padding-left: 20px;
  border-radius: 12px;
}
.active-window-widget .label {
  color: #000000;
  font-family: "Segoe UI Semibold";
  font-size: 16px;
  font-weight: bold;
}
.active-window-widget .icon{
  padding-right:10px;
}
/*AUDIO WIDGET*/
.volume-widget {
  margin-right: 8px;
  padding-right: 15px;
  padding-left: 12px;
  background-color: var(--bg-light);
  color:var(--text-dark);
  border-radius: 12px;
}
.volume-widget .icon {
  min-width:20px;
  font-family: "Segoe Fluent Icons";
  color: var(--text-dark);
  font-size: 20px;
  padding: 3px 0 0 0;
  font-weight: bold;
}
.volume-widget .label {
  font-family: "Segoe UI Semibold";
  font-size: 16px;
  font-weight: bold;
  padding-left: 5px;
  color: var(--text-dark);
}
/*AUDIO DROPDOWN*/
.audio-menu {
  background-color:var(--bg-light);
  color: var(--text-dark);
  border-radius:12px;
}
.audio-container .device {
  font-family: "Segoe UI Semibold";
  font-weight: bold;
  background-color:var(--bg-light);
  color: var(--text-dark);
  border: none;
  padding: 10px 8px 6px 4px;
  margin: 2px 0;
  font-size: 16px;
  border-radius: 12px;
}
.audio-container .device.selected {
  background-color: var(--bg-light);
  color: var(--text-dark);
}
/*CLOCK / CALENDAR WIDGET*/
.clock-widget {
  background-color: var(--bg-light);
  color: var(--text-dark);
  padding-left: 18px;
  padding-right: 18px;
  margin-right: 2px;
  margin-left: 2px;
  border-radius: 12px;
}
.clock-widget .label {
  background-color: var(--bg-light);
  color: var(--text-dark);
  font-family: "Segoe UI Semibold";
  font-size: 16px;
  font-weight: bold;
}
.calendar {
  background-color: var(--bg-light);
  color: var(--text-dark);
}
.calendar .calendar-table,.calendar .calendar-table .item {
  background-color: var(--bg-light);
  color: var(--text-dark);
  font-family: "Segoe UI Semibold";
  font-weight: bold;
  margin: 0;
  padding: 0;
  outline: none;
  font-size: 16px;
}
.calendar .calendar-table .item.selected {
  color: var(--bg-light);
  background-color: var(--text-dark);
  border-radius: 6px;
}
.calendar .day-label {
  margin-top: 20px;
}
.calendar .day-label,.calendar .month-label,.calendar .date-label {
  font-family: "Segoe UI Semibold";
  font-size: 18px;
  color: var(--text-dark);
  font-weight: bold;
  min-width: 160px;
  max-width: 160px;
}
.calendar .month-label {
  font-size: 16px;
}
.calendar .date-label {
  font-size: 88px;
  font-weight: 900;
  margin-top: -20px;
}
/*MEDIA WIDGET*/
.media-widget {
  background-color: var(--bg-light);
  border-radius: 12px;
  padding-left: 12px;
  padding-right: 10 px;
  margin-right: 10px;
  min-width: 400px;
}
.media-widget .label {
  color: var(--text-dark);
  background-color: var(--bg-light);
  padding: 0 0 0 8px;
  font-family: "Segoe UI Semibold";
  font-size: 16px;
  font-weight: bold;
  min-width: 300px;
}
.media-widget .btn {
  font-family: "Material Symbols Rounded";
  color: var(--text-dark);
  font-weight: 600;
  font-size: 19px;
  padding: 0 10px;
}
.media-widget .btn:hover,.media-widget .btn.play:hover {
  color: var(--accent-blue);
}
.media-widget .btn.play {
  background-color: var(--bg-light);
  border-radius: 6px;
  padding:0 4px;
}
.media-widget .btn.prev {
  padding-right:1px;
}
.media-widget .btn.next {
  padding-left: 2px;
}
.media-widget .btn.disabled:hover,.media-widget .btn.disabled {
  font-family: "Segoe Variable Display";
  color: var(--text-dark);
  font-size: 19px;
  background-color: var(--bg-light);
}
/*MEDIA POPUP*/
.media-menu {
  background-color: var(--bg-light);
  border-radius: 12px;
  min-height: 200px;
  min-width: 500px;
}
.media-menu .title{
  margin-left:20px;
  margin-right:20px;
}
.media-menu .artist {
  margin-left:21px;
  margin-right:20px;
}
.media-menu .title,
.media-menu .source {
  font-weight: bold;
  font-family: "Segoe UI Bold";
  padding-bottom:10px;
  color: var(--text-dark);
}
.media-menu .title {
  font-size: 22px;
  padding-top:18px;
  letter-spacing:1px;
}
.media-menu .artist {
  font-family: "Segoe UI Semibold";
  font-size: 18px;
  color: var(--text-dark);
  padding-bottom: 10px;
  padding-top:5px;
}
.media-menu .source {
  color:transparent;
}
.media-menu .btn {
  font-family: "Material Symbols Rounded";
  min-width: 18px;
  color: var(--text-dark);
}
.media-menu .btn.prev {
  padding-left:18px;
  font-size: 38px;
  font-weight:300;
}
.media-menu .btn.play {
  font-size: 48px;
  font-weight: 300;
}
.media-menu .btn.pause {
  font-size: 48px;
  font-weight: 300;
}
.media-menu .btn.next {
  font-size: 38px;
  font-weight: 300;
}
.media-menu .btn:hover {
  color: var(--text-dark);
  background-color: transparent;
}
.media-menu .btn.disabled:hover,
.media-menu .btn.disabled {
  color: var(--text-gray-light);
  background-color: rgba(0,0,0,0);
}
.media-menu .playback-time {
  font-size: 16px;
  font-family: "Segoe UI Semibold";
  font-weight: bold;
  color: var(--text-dark);
  min-width: 100px;
  margin-top:4px;
  margin-bottom:10px;
  border-radius:4px;
}
.media-menu .progress-slider {
  height: 8px;
  border-radius: 4px;
  padding-bottom:16px;
}
.media-menu .progress-slider::groove {
  background: var(--slider-groove);
  height: 8px;
  border-radius: 4px;
}
.media-menu .progress-slider::groove:hover {
  height: 8px;
  background: var(--slider-groove-hover);
  border-radius: 4px;
}
.media-menu .progress-slider::sub-page {
  background: var(--accent-blue-dark);
  border-radius: 4px;
  height: 8px;
}
/*NOTIFICATIONS*/
.notification-widget {
  background-color: var(--bg-light);
  margin:0 10px 0 0;
  border-radius: 12px;
}
.notification-widget .icon {
  font-family: "Material Symbols Rounded";
  qproperty-text: "";
  padding: 2px 8px 0 0;
  color: var(--text-dark);
  font-size:21.667px;
  font-weight:350;
}
.notification-widget .icon.new-notification {
  font-size:21.667px;
  qproperty-text: "";
  color: var(--text-dark);
}
.notification-widget .label.new-notification {
  width:0;
  height:0;
}
.notification-widget .label {
  color: transparent;
  background:transparent;
  max-width:0;
  padding:0;
  margin:0;
}
.notification-widget.notify {
  font-family: "Material Symbols Rounded";
}
.apps-widget {
  background-color: var(--bg-light);
  color: var(--text-dark);
  border-radius: 12px;
  padding: 0 5px 0 12px;
  margin:0 10px;
}
.apps-widget .widget-container {
  padding:0 8px;
}
.apps-widget .widget-container .label { 
  font-family: "Material Symbols Rounded"; 
  font-size:18px;
  max-width:32px;
  min-width:26px;
} 

/* Stack Widget*/

.komorebi-stack {
    border-radius: 12px;
    min-width:40px;
    background-color: var(--bg-light-transparent);
    color: var(--text-dark);
    margin-right:10px;
}
.komorebi-stack .widget-container {
    color: var(--text-dark);
    border-radius: 12px;
}
.komorebi-stack .window .icon{
  margin-left:4px;
  padding:0 10px;
}
.komorebi-stack .window {
    background-color: transparent;
    border: none;
}
.komorebi-stack .window.active {
    background-color: var(--bg-light);
    color: var(--text-dark);
    border-radius: 12px;
    height: auto;
    margin: 0;
}

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 reload-configuration"
bars:
  primary-bar:
    enabled: true
    screens: ['*']
    class_name: "yasb-bar"
    alignment:
      position: "top"
      align: "center"
    blur_effect:
      enabled: false
      acrylic: false
      dark_mode: true
      round_corners: false
      border_color: None
    window_flags:
      always_on_top: true
      windows_app_bar: true
      hide_on_fullscreen: true
    dimensions:
      width: "99%"
      height: 32
    padding:
      top: 10
      left: 0
      bottom: 1
      right: 10
    widgets:
      left:
        - "komorebi_active_layout"
        - "komorebi_workspaces"
        - "notifications"
        - "komorebi_stack"
        - "media"
      center:
        - "active_window"
      right:
        - "apps"
        - "volume"
        - "clock"
widgets:
  komorebi_stack:
    type: "komorebi.stack.StackWidget"
    options:
      label_offline: ""
      label_window: ""
      label_window_active: ""
      label_no_window: ""
      label_zero_index: false
      show_icons: "always"
      icon_size: 19
      max_length: 10
      max_length_active: 20
      max_length_ellipsis: ".."
      hide_if_offline: false
      show_only_stack: false
      animation: true
      enable_scroll_switching : true

  komorebi_active_layout:
    type: "komorebi.active_layout.ActiveLayoutWidget"
    options:
      hide_if_offline: false
      label: "{icon}"
      layouts:
        - 'bsp'
        - 'columns'
        - 'rows'
        - 'grid'
        - 'scrolling'
        - 'vertical_stack'
        - 'horizontal_stack'
        - 'ultrawide_vertical_stack'
        - 'right_main_vertical_stack'
      layout_icons:
        bsp: ""
        columns: ""
        rows: ""
        grid: ""
        scrolling: ""
        vertical_stack: ""
        horizontal_stack: ""
        ultrawide_vertical_stack: ""
        right_main_vertical_stack: ""
        monocle: ""
        maximized: ""
        floating: ""
        paused: "\udb83\udf89"
        tiling: "\udb81\ude40"
      callbacks:
        on_left: 'toggle_layout_menu'
        on_middle: 'next_layout'
        on_right: 'prev_layout'
      layout_menu:
        blur: false
        round_corners: true
        round_corners_type: "normal"
        border_color: "System"
        alignment: "left"
        direction: "down"
        offset_top: 10
        offset_left: 0
        show_layout_icons: true
      container_padding:
        top: 0
        left: 0
        bottom: 0
        right: 0
  apps:
    type: "yasb.applications.ApplicationsWidget"
    options:
      label: "{data}"
      app_list:
        - {icon: "", launch: "taskmgr", name: "Task Manager"}
        - {icon: "", launch: "quick_settings",name: "Quick Settings"}
        - {icon: "", launch: "search", name: "Search"}
        - {icon: "", launch: "control", name: "Control Panel"}
        - {icon: "", launch: "ncpa.cpl", name: "Network Settings"}
        - {icon: "", launch: "notification_center", name: "Notification Center"}
  komorebi_workspaces:
    type: "komorebi.workspaces.WorkspaceWidget"
    options:
      label_offline: "Komorebi OFFLINE"
      label_workspace_btn: "{index}"
      label_workspace_active_btn: "{index}"
      label_workspace_populated_btn: "{index}"
      label_default_name: ""
      label_zero_index: false
      hide_empty_workspaces: false
      hide_if_offline: true
  active_window:
    type: "yasb.active_window.ActiveWindowWidget"
    options:
      label: "{win[title]}"
      label_alt: "{win[title]}"
      label_no_window: ""
      label_icon: true
      label_icon_size: 22
      max_length: 100
      max_length_ellipsis: "..."
      monitor_exclusive: false
  volume:
    type: "yasb.volume.VolumeWidget"
    options:
      tooltip: false
      label: "<span>{icon}</span> {level}"
      volume_icons:
        - "󰝟"  # Icon for muted
        - "󰕿"  # Icon for 0-10% volume
        - "󰖀"  # Icon for 11-30% volume
        - "󰕾"  # Icon for 31-60% volume
        - "󰕾"  # Icon for 61-100% volume
      audio_menu:
        blur: true
        round_corners: true
        round_corners_type: "normal"
        border_color: "none"
        alignment: "right"
        offset_top: 16
        offset_left: -5
        direction: "down"
  clock:
    type: "yasb.clock.ClockWidget"
    options:
      label: "{%A, %b %d %Y   %I:%M %p}"
      label_alt: "{%I:%M %p}"
      tooltip: false
      callbacks:
        on_left: "toggle_calendar"
        on_right: "toggle_label"
  media:
    type: "yasb.media.MediaWidget"
    options:
      label: "{artist} - {title}"
      label_alt: "{artist}"
      callbacks:
        on_left: "toggle_media_menu"
        on_middle: "do_nothing"
        on_right: "toggle_label"
      max_field_size:
        label: 100
        label_alt: 100
      show_thumbnail: false
      controls_left: false
      controls_hide: false
      hide_empty: true
      thumbnail_alpha: 80
      thumbnail_padding: 10
      thumbnail_corner_radius: 0
      scrolling_label:
        enabled: true
        update_interval_ms: 33
        ease_slope: 20
        ease_pos: 0.8
        ease_min: 0.5
      icons:
        prev_track: ""
        next_track: ""
        play: ""
        pause: ""
      media_menu:
        blur: true
        round_corners: true
        round_corners_type: "normal"
        border_color: "system"
        alignment: "left"
        direction: "down"
        offset_top: 16
        offset_left: 1
        thumbnail_corner_radius: 6
        thumbnail_size: 150
        max_title_size: 45
        max_artist_size: 40
        show_source: true
      media_menu_icons:
        play: ""
        pause: ""
        prev_track: ""
        next_track: ""
  notifications:
    type: "yasb.notifications.NotificationsWidget"
    options:
      class_name: "notify"
      label: "<span></span>"
      label_alt: "<span></span>"
      hide_empty: true
      tooltip: false
      container_padding:
        top: 0
        left: 10
        bottom: 0
        right: 4
      callbacks:
        on_left: "toggle_notification"
        on_right: "toggle_label"

Readme

## Init Light
A rounded, boxy and light theme for Yasb. Just a minimal theme with focus on separation of utilities in the topbar and apps in the dock. 

This theme uses a combination of Segoe UI, Segoe UI Fluent Icons and Material Symbols Rounded (which can be found in the fonts directory).

<img src="https://raw.githubusercontent.com/initiateit/Init-Light/master/image.png">
</a>

[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-261 branch.

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