search

amnweb / yasb-themes

🎨 Theme repository for YASB.
https://github.com/amnweb/yasb
MIT License
45 stars 3 forks source link

[create-theme]: Mauveyo's Mocha #31

Closed mauveyo1 closed 1 day ago

mauveyo1 commented 1 day ago

Name

Mauveyo's Mocha

Description

Catppuccin Mocha inspired theme

Homepage

No response

Image

https://imgur.com/UfXlNna

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(--subtext0);
    font-weight: 700;
    font-family: "JetBrainsMono NFP";
    margin: 0;
    padding: 0;
}
.yasb-bar {
    padding: 0 6px;
    margin: 0;
    background-color: var(--base);
    border-radius: 12px;
}
.widget {
    padding: 0 8px;
    margin: 0;
}
.widget .label {
    padding: 2px 2px 1px 2px;
}
.widget .label.alt {
    padding: 1px 8px 1px 8px;
}
 .clock-widget .label {
    padding-left:8px;
}
.komorebi-workspaces .widget-container {
    margin-left: 0px;
}
.komorebi-workspaces .widget-container {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none
}
.komorebi-workspaces .offline-status {
    color: var(--subtext1);
    font-size: 12px;
    padding: 0 0px;
    font-weight: 600;
}
.komorebi-workspaces .ws-btn {
    border: none;
    background-color: var(--surface1);
    margin: 0 3px;
    width: 10px;
    height: 10px;
    border-radius: 4px;
    color: rgba(0, 0, 0, 0);
}
.komorebi-workspaces .ws-btn:hover {
    color: rgba(0, 0, 0, 0);
    background-color: var(--surface2);
}
.komorebi-workspaces .ws-btn.populated:hover {
    color: rgba(0, 0, 0, 0);
    background-color: var(--overlay1);
}
.komorebi-workspaces .ws-btn.populated {
    color: rgba(0, 0, 0, 0);
    background-color: var(--overlay0);
}
.komorebi-workspaces .ws-btn.active {
    color: rgba(0, 0, 0, 0);
    background-color: var(--subtext0);
    width: 28px;
    height: 10px;
}
.komorebi-active-layout {
    padding: 0 0px 0 0;
}

.komorebi-active-layout .label {
    font-weight: 600;
    padding: 2px 0 0 0;
}
/*POWER MENU WIDGET*/
/* Uptime text */
.uptime {
    font-size: 14px;
    margin-bottom: 10px;
    color: rgba(191, 202, 219, 0.726);
    font-weight: 600;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.power-menu-widget .label {
    color: #eba0ac;
    font-size: 16px;
}
.power-menu-popup .button {
    padding: 0;
    width: 160px;
    height: 240px;
    border-radius: 6px;
    background-color: rgba(41, 42, 58, 0.75);
    font-family: "SegoeUI";
    color: white;
    border: 4px solid rgba(255, 255, 255, 0);

}
.power-menu-popup .button.hover {
    background-color: rgb(55, 56, 75);
    border: 4px solid rgb(55, 56, 75);
}
.power-menu-popup .button .label {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.power-menu-popup .button .icon {
    font-size: 64px;
    padding-top: 54px;
    color: rgba(255, 255, 255, 0.25);
}
.power-menu-popup .button.cancel .icon {
    color: rgba(243, 139, 168, 0.55);
}
.power-menu-popup .button.cancel .label {
    color: rgba(243, 139, 168, 0.95);
}
.wifi-widget {
    padding: 0 4px 0 9px;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}

/* ICONS */
.icon {
    font-size: 16px;
}
.volume-widget .icon {
    font-size: 15px;
    color: var(--blue);
    margin: 1px 3px 1px 0px;
} 
.start-menu .icon {
    font-size: 18px;
    color: #89b4fa
}
.clock-widget .icon {
    color: #cba6f7;
    font-size: 14px;
}
/* WEATHER WIDGET */
.weather-widget .icon {
    font-size: 16px;
    margin: 0 2px 0px 0;
}
.weather-widget .label {
    padding-right:0px;
}
.weather-widget .icon.sunnyDay {
    color: rgb(221, 210, 107);
}
.weather-widget .icon.clearNight {
    color: rgb(107, 189, 221);
    font-size: 20px;
    margin: -1px 2px 0px 0;
}
.weather-widget .icon.rainyNight {
    font-size: 16px;
}
.weather-widget .icon.cloudyDay {
    font-size: 18px;
    color: rgb(221, 210, 107);
}
.weather-widget .icon.rainyDay {
    color: rgb(245, 224, 220)
}

.media-widget {
    padding: 0;
    margin: 0;
}
.media-widget .label {
    color: var(--lavender);
    padding: 0px;
    padding-right: 16px;
}
.media-widget .btn {
    color: var(--overlay1);
    padding: 0 0px;
    padding-right: 0px;
    margin: 4px 0;
    font-family: Segoe Fluent Icons;
}
.media-widget .btn:hover {
    color: var(--subtext0);
}
.media-widget .btn.play {
    font-size: 16px;
}
.media-widget .btn.prev {
    padding: 0 0px 0 0px;   
    font-size: 12px;
}
.media-widget .btn.next {
    padding: 0 8px 0 0px;
    font-size: 12px;
}
.media-widget .btn.disabled:hover,
.media-widget .btn.disabled {
    color: var(--surface1);
    font-size: 12px;
    background-color: rgba(0, 0, 0, 0);
}

.wallpapers-widget {
    padding: 0 6px 0 6px;
}
.wallpapers-widget .icon {
    font-size: 16px;
    color: var(--mauve);
}
.wallpapers-gallery-window {
    background-color: rgba(24, 24, 37, 220);
    border: 0;
    margin: 0;
}
.wallpapers-gallery-buttons {
    background-color:rgba(255, 255, 255, 0);
    color: white;
    border: none;
    font-size: 14px;
    padding: 8px 0;
    border-radius: 8px;
    margin:0 8px 8px 8px;
    width: 600px;
}
.wallpapers-gallery-buttons:hover {
    background-color:rgba(255, 255, 255, 0.1)
}
.wallpapers-gallery-image {
    border: 4px solid transparent;
    border-radius: 10px;
}
.wallpapers-gallery-image:hover {
    border: 6px solid var(--surface1);
}
.wallpapers-gallery-image.focused {
    border: 6px solid var(--pink);
}
.wifi-widget .icon {
    font-size: 17px;
    color: var(--sapphire);
    padding-right:0px;
    padding-left:0px;
    margin: 0;
}

.update-check-widget {
    padding: 0 4px 0 0px;
}
.update-check-widget .icon {
    font-size: 16px;
}
.update-check-widget .widget-container.winget,
.update-check-widget .widget-container.windows {
    background: var(--blue);
    margin: 7px 2px 7px 2px;
    border-radius: 10px;
    border: 0px solid var(--sapphire);
}
.update-check-widget .widget-container.winget .icon,
.update-check-widget .widget-container.windows .icon {
    color: var(--base);
    margin: 0 2px 0 6px;
}
.update-check-widget .widget-container.winget .label,
.update-check-widget .widget-container.windows .label {
    margin: 0 6px 0 1px;
    color: var(--base);
    font-weight: 900;
    font-size: 14px;
}

.obs-widget  {
    padding: 0 6px;
}
.obs-widget .recording {
    font-size: 18px;
    color: #d20f39;
}
.obs-widget .paused {
    font-size: 18px;
    color: var(--surface2);
}
.obs-widget .stopped {
    font-size: 18px;
    color: var(--surface1);
}

.active-window-widget .widget-container .label {
    color: var(--overlay0);
}

Theme Config

watch_stylesheet: true
watch_config: true
debug: false

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

bars:
  status-bar:
    enabled: true
    screens: ['*'] 
    class_name: "yasb-bar"
    alignment:
      position: "top"
      center: false
    blur_effect:
      enabled: false 
      acrylic: false 
      dark_mode: false
      round_corners: false
      border_color: None
    window_flags:
      always_on_top: false
      windows_app_bar: true
    dimensions:
      width: "100%"
      height: 34
    padding:
      top: 6
      left: 8
      bottom: 2
      right: 8
    widgets:
      left: ["komorebi_workspaces","active_window"]
      center: ["clock"]
      right: ["media","update","wallpapers","weather","volume","power_menu"]
widgets:
  media:
      type: "yasb.media.MediaWidget"
      options:
        label: "<span>\uf001</span> {title}"
        label_alt: "<span>\uf001</span> {artist}"
        hide_empty: true
        max_field_size:
          label: 20
          label_alt: 20
        show_thumbnail: false
        controls_only: false
        controls_left: true
        thumbnail_alpha: 0
        thumbnail_padding: 0
        thumbnail_corner_radius: 0
        icons:
          prev_track: "\ue892"
          next_track: "\ue893"
          play: "\ue768"
          pause: "\ue769"
  clock:
      type: "yasb.clock.ClockWidget"
      options:
        label: "{%I:%M %p}"
        label_alt: "{%a, %d %b %H:%M:%S}"
        timezones: [] #Looking up time zone info from registry
  komorebi_workspaces:
      type: "komorebi.workspaces.WorkspaceWidget"
      options:
          label_offline: "\u26a1 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: false
          animation: true
          container_padding:
            top: 0
            left: 0
            bottom: 0
            right: 0 
  komorebi_active_layout:
      type: "komorebi.active_layout.ActiveLayoutWidget"
      options:
        hide_if_offline: true
        label: "{icon}"
        layouts: ['bsp', 'columns', 'rows', 'grid', 'vertical_stack', 'horizontal_stack', 'ultrawide_vertical_stack','right_main_vertical_stack']
        layout_icons:
          bsp: "BSP"
          columns: "COLS"
          rows: "ROWS"
          grid: "GRID"
          vertical_stack: "V-STACK"
          horizontal_stack: "H-STACK"
          ultrawide_vertical_stack: "W-STACK"
          right_main_vertical_stack: "RMV-STACK"
          monocle: "MONOCLE"
          maximised: "MAX"
          floating: "FLOATING"
          paused: "PAUSED"
        callbacks:
          on_left: 'next_layout'
          on_middle: 'toggle_monocle'
          on_right: 'prev_layout'
        container_padding: 
          top: 0
          left: 0
          bottom: 0
          right: 0
  weather:
      type: "yasb.weather.WeatherWidget"
      options:
        label: "<span>{icon}</span> {temp_c}"
        label_alt: "{location}: {conditions}, Min {min_temp_c}, Max {max_temp_c}, Humidity {humidity}"
        api_key: '3bf4cf9a7c3f40d6b31174128242807'
        update_interval: 600 #Update interval in seconds, Min 600
        hide_decimal: true
        location: 'Baghdad'
        callbacks:
          on_left: "toggle_label"
        icons: 
          sunnyDay: "\ue30d"
          clearNight: "\ue32b"
          cloudyDay: "\udb81\udd99"
          cloudyNight: "\ue311"
          rainyDay: "\udb81\ude7e"
          rainyNight: "\udb81\ude7e"
          snowyIcyDay: "\udb81\udd98"
          snowyIcyNight: "\udb81\udd98"
          blizzard: "\uebaa"
          default: "\uebaa"
          # https://www.weatherapi.com/docs/
          # Usage {temp_c}, {min_temp_c}, {max_temp_c}, {temp_f}, {min_temp_f}, {max_temp_f}, {location}, {humidity}, {icon}, {conditions}
  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
        callbacks:
          on_right: "exec cmd.exe /c start ms-settings:sound"
  power_menu:
      type: "yasb.power_menu.PowerMenuWidget"
      options:
        label: "\uf011"
        uptime: True
        blur: False
        blur_background: True
        animation_duration: 250 # Milisecond 
        button_row: 5 # Number of buttons in row, min 1 max 5
        buttons:
          signout: ["\udb80\udf43","Sign out"]
          shutdown: ["\uf011","Shut Down"]
          restart: ["\uead2","Restart"]
          hibernate: ["\uf28e","Hibernate"]
          cancel: ["\udb81\udf3a","Cancel"]
  custom_button:
      type: "yasb.custom.CustomWidget"
      options:
        label: "<span>\udb80\udf5c</span>"
        label_alt: "<span>\udb80\udf5c</span>"
        class_name: "start-menu"
        callbacks:
          on_left: "exec start_menu"
  active_window:
      type: "yasb.active_window.ActiveWindowWidget"
      options:
        label: "{win[title]}"
        label_alt: ""
        label_no_window: ""
        label_icon: false
        label_icon_size: 12
        max_length: 36
        max_length_ellipsis: "..."
        monitor_exclusive: true
  battery:
      type: "yasb.battery.BatteryWidget"
      options:
        label: "<span>{icon}</span>{percent}%"
        label_alt: "{icon} {percent}% | time: {time_remaining}"
        charging_options:
          icon_format: "{charging_icon}"
  language:
      type: "yasb.language.LanguageWidget"
      options:
        label: "{lang[language_code]}"
        label_alt: "{lang[full_name]}"
        update_interval: 1
        callbacks:
          on_left: "toggle_label"
          on_middle: "do_nothing"
          on_right: "do_nothing"
  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_middle: 'do_nothing'
          on_right: 'do_nothing'
        memory_thresholds:
          low: 25
          medium: 50
      high: 90
  wallpapers:
    type: "yasb.wallpapers.WallpapersWidget"
    options:
      label: "<span>\udb83\ude09</span>"
      image_path: "C:\\your\\Wallpapers\\path" # Example path to folder with images
      change_automatically: false # Automatically change wallpaper
      update_interval: 60 # If change_automatically is true, update interval in seconds
      gallery:
          enabled: true
          blur: true
          image_width: 200
          image_per_page: 7
          show_buttons: false
          orientation: "portrait"
          image_spacing: 8
          lazy_load: true
          lazy_load_delay: 80
          lazy_load_fadein: 400
          image_corner_radius: 20
          enable_cache: true
  wifi:
    type: "yasb.wifi.WifiWidget"
    options:
      label: "<span>{wifi_icon}</span>"
      label_alt: "{wifi_name}"
      update_interval: 5000
      callbacks:
        on_left: "exec cmd.exe /c start ms-settings:network"
        on_middle: "do_nothing"
        on_right: "toggle_label"
  obs:
    type: "yasb.obs.ObsWidget"
    options:  
      connection:
        host: "193.147.0.101"
        port: 4400
        password: "yourstrongpassword:3"
      icons:
        recording: "\ueba7"
        stopped: "\ueba5"
        paused: "\ueba7"
      hide_when_not_recording: true
      blinking_icon: true
  update:
    type: "yasb.update_check.UpdateCheckWidget"
    options:
      winget_update:
        enabled: true
        label: "<span>\uf0ab</span>{count}"
        interval: 180
        exclude: []
      windows_update:
        enabled: false
        label: "<span>\uf0ab</span>{count}"
        interval: 240
        exclude: []

Readme

## Mauveyo's Mocha

![Preview1](https://imgur.com/a/U3MSRsV)

yet another Catppuccin Mocha Theme for yet another status bar 
based on another Catppuccin theme on this library 

### **NOTE: THIS THEME AND PICTURES ON 125% SCALING BECAUSE LABTOP**

![Preview1](https://imgur.com/isgKXn5)

![Preview2](https://imgur.com/CFbW8Hg)
github-actions[bot] commented 1 day ago

Error creating theme

Sorry about that! There was an error creating the theme. Please try again or contact the maintainers for help.

Name must only contain letters, numbers, and spaces.