[create-theme]: Everforest

[IONODO]

Name

Everforest

Description

An everforest theme, comfortable for the eyes. Both light and dark mode colours are available.

Homepage

No response

Image

https://ibb.co/pj75sBJk

Theme Styles

/*
.widget .label {} -> Global label for all
.active-window-widget {} -> Styles specific to the active window widget
.clock-widget {} -> Styles specific to the clock widget
.cpu-widget {} -> Styles specific to the CPU widget
.memory-widget {} -> Styles specific to the memory widget
.weather-widget {} -> Styles specific to the weather widget
.komorebi-workspaces {} -> Styles specific to komorebi workspaces
.komorebi-active-layout {} -> Styles specific to komorebi active layout
.volume-widget {} -> Styles specific to the volume widget 
.apps-widget {} -> Styles specific to the apps widget
.power-menu-widget {} -> Styles for the power menu button widget
.power-menu-popup {} -> Styles for the power menu popup widget
.power-menu-popup > .button {} -> Styles for power buttons inside the popup 
.power-menu-popup > .button > .icon,
.power-menu-popup > .button > .label {} -> Styles for power buttons icons and labels inside the popup 
.media-widget {} -> Styles specific to the media widget
.github-widget {} -> Styles specific to the github widget
*/
* {
    font-size: 11px;
    color: #A7C080;
	font-weight: 400;
    font-family: "JetBrainsMono NFP";
    margin: 0;
    padding: 0;
}
.yasb-bar {
    padding: 0 8px;
    margin: 0;
    background-color: #293136;
}
.widget {
    padding: 0 8px;
    margin: 0;
}


.active-window-widget .icon {
    margin-right: 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: #374145;
    margin: 0 3px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    color: #374145;
}
.komorebi-workspaces .ws-btn:hover {
    color: #232A2E;
    background-color: #232A2E;
}
.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: #DBBC7F;
}
.komorebi-workspaces .ws-btn.active {
    color: rgba(0, 0, 0, 0);
    background-color: #A7C080;
    width: 28px;
    height: 10px;
}


/*POWER MENU WIDGET*/
.uptime {
	font-size: 14px;
	margin-bottom: 10px;
	color: #83C092;
	font-weight: 600;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.power-menu-widget .label {
	color: #E67E80;
	font-size: 13px;
}
.power-menu-popup {
	background-color: #1E2326;
	border-radius: 12px;
	border: 4px solid #232A2E;
}
.power-menu-popup .button {
	padding: 0;
	width: 240px;
	height: 120px;
	border-radius: 8px;
	background-color: #232A2E;
	font-family: "SegoeUI";
	color: #83C092;
	border: 1px solid #232A2E;
	margin: 8px;
}
.power-menu-popup .button.hover {
	background-color: #293136;
	border: 1px solid #293136;
}
.power-menu-popup .button .label {
	margin-bottom: 8px;
	font-size: 16px;
	font-weight: 600;
	color: #83C092;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.power-menu-popup .button .icon {
	font-size: 48px;
	padding-top: 8px;
	color: #83C092;
}
.power-menu-popup .button.cancel .icon {
	color: #E67E80;
}
.power-menu-popup .button.cancel .label {
	color: #E67E80;
}
.power-menu-popup .button.shutdown .icon {
	color: #7FBBB3;
}
.power-menu-popup .button.shutdown .label {
	color: #7FBBB3;
}


/*ICONS*/
.icon {
	font-size: 16px;
}
.volume-widget .icon {
	color: #83C092;
}
 
.cpu-widget .icon,
.memory-widget .icon,
.volume-widget .icon,
.weather-widget .icon,
.wifi-widget .icon {
	margin: 0 4px 1px 0;
}
.cpu-widget .icon,
.memory-widget .icon {
	font-size: 14px;
	color: #83C092;
}
.memory-widget .icon {
	color: #83C092;
}
.wifi-widget .icon {
    font-size: 14px;
	color: #83C092;
}
.weather-widget .icon.sunnyDay {
	color: #DBBC7F;
}

.weather-widget .label.sunnyDay {
	color: #DBBC7F;
}
.weather-widget .icon.clearNight {
	color: #7FBBB3;
	font-size: 22px;
	margin: 1px 2px 0px 0;
}

.apps-widget .widget-container{
	background-color: #374145;
	border: 1px solid #374145;
	border-radius: 15px;
}

.apps-widget {
    padding: 2px 0px 0px 4px;
}
.apps-widget .label {
    font-size: 12px;
    padding: 0 3px;
    color: #83C092;
}

/* MEDIA WIDGET */
.media-widget {
	padding: 0;
	padding-left: 2px;
	margin: 0;
	border-radius: 16px;
	margin-right: 8px;
}
.media-widget .label {
	background-color: #1e232600;
}
.media-widget .btn {
	color: #83C092;
	padding: 0 3px;
	margin: 4px 0;
	font-family: Segoe Fluent Icons;
}
.media-widget .btn:hover {
	color: #DBBC7F;
}
.media-widget .btn.play {
	background-color: #293136;
	border-radius: 12px;
	font-size: 14px;
}
.media-widget .btn.disabled:hover,
.media-widget .btn.disabled {
	color: #293136;
	font-size: 12px;
	background-color: #293136;
}


/*CALENDAR AND VOLUME SLIDER*/
.calendar {
    background-color: #293136
}
.calendar .calendar-table,
.calendar .calendar-table::item {
    background-color: rgba(17, 17, 27, 0);
    color: #7FBBB3;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;  
}
.calendar .calendar-table::item:selected {
    color: #DBBC7F;
	border: 2px solid #232A2E;
	background-color: #232A2E;
	border-radius: 10px;
}
.calendar .day-label {
    margin-top: 20px;
}
.calendar .day-label,
.calendar .month-label,
.calendar .date-label {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #A7C080;
    font-weight: 700;
    min-width: 180px;
    max-width: 180px;
}
.calendar .month-label {
    font-weight: normal;
}
.calendar .date-label {
    font-size: 88px;
    font-weight: 900;
    color: #A7C080;
    margin-top: -20px;
}

.volume-slider {
    border: none;
}

.volume-slider::handle{
	color: #83C092;
	border: 1px solid #83C092;
	border-radius: 7px;
	background-color: #83C092;
}
.audio-menu {
    background-color: #293136;
}
.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: #374145;
}
.audio-container .device:hover {
    background-color: #232A2E;
}

Theme Config

watch_stylesheet: true
watch_config: true

# This komorebi setting will be used for tray context menu.
# If you don't use komorebi, you can remove this section.
komorebi:
  start_command: "komorebic start --whkd"
  stop_command: "komorebic stop --whkd"
  reload_command: "komorebic reload-configuration"
  
# This is the main configuration file for Yet Another Status Bar (YASB)
bars:
  status-bar:
    enabled: true
    #screens: ['DELL P2419H (1)'] 
    #screens: ['DELL P2419H (2)'] 
    screens: ['*'] 
    class_name: "yasb-bar"
    alignment:
      position: "top"
      center: false
    blur_effect:
      enabled: true
      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: 32
    padding:
      top: 0
      left: 0
      bottom: 0
      right: 0
    widgets:
      left:
        [
          "win_button",
          "apps",
          "komorebi_workspaces",
          "active_window"
        ]
      center:
        [
          "clock"         
        ]
      right:
        [
          "media",
          "weather",
          "cpu",
          "memory",
          "volume",         
          "power_menu"
        ]
widgets:
  media:
    type: "yasb.media.MediaWidget"
    options:
      label: "{title} - {artist}"
      label_alt: "{title}"
      max_field_size:
        label: 20
        label_alt: 30
      show_thumbnail: true
      controls_only: false
      controls_left: true
      hide_empty: true
      thumbnail_alpha: 60
      thumbnail_padding: 8
      thumbnail_corner_radius: 0 # Set to 0 for square corners
      icons:
        prev_track: "\ue892"
        next_track: "\ue893"
        play: "\ue768"
        pause: "\ue769"

  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: 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}"

  clock:
      type: "yasb.clock.ClockWidget"
      options:
        label: "{%a %d, %b %H:%M}"
        label_alt: "{%A %d %B %Y, %H:%M}"
        #locale: 'en_EN' # Langugae for date, you can set your own, example fr_FR
        timezones: [] #Looking up time zone info from registry
        #timezones: ["America/Montreal"]
        calendar: 
          blur: True
          round_corners: True
          round_corners_type: 'normal'
          border_color: 'System'
          alignment: 'center'
          direction: 'down'
          distance: 12

  cpu:
      type: "yasb.cpu.CpuWidget"
      options:
        label: "<span>\uf4bc</span> {info[percent][total]}%"
        label_alt: "<span>\uf437</span> {info[histograms][cpu_percent]}"
        update_interval: 2000
        histogram_icons:
          - '\u2581' # 0%
          - '\u2581' # 10%
          - '\u2582' # 20%
          - '\u2583' # 30%
          - '\u2584' # 40%
          - '\u2585' # 50%
          - '\u2586' # 60%
          - '\u2587' # 70%
          - '\u2588' # 80%+
        histogram_num_columns: 8
        callbacks:
          on_right: "exec cmd /c Taskmgr"

  memory:
      type: "yasb.memory.MemoryWidget"
      options:
        label: "<span>\uefc5</span> {virtual_mem_free}"
        label_alt: "<span>\uefc5</span> {virtual_mem_percent}%"
        update_interval: 10000
        callbacks:
          on_right: "exec cmd /c Taskmgr"

  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: True
          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'

  wifi:
      type: "yasb.wifi.WifiWidget"
      options:
        label: "<span>{wifi_icon}</span>"
        label_alt: "{wifi_name} {wifi_strength}%"
        update_interval: 5000
        callbacks:
          on_left: "exec cmd.exe /c start ms-settings:network"
          on_middle: "do_nothing"
          on_right: "toggle_label"

  traffic:
      type: "yasb.traffic.TrafficWidget"
      options:
        label: "<span>\udb86\uddb3</span>{download_speed} | <span>\udb86\uddb2</span>{upload_speed}"
        label_alt: "Download {download_speed} \ue621 Upload {upload_speed}"
        update_interval: 1000 # Update interval should be a multiple of 1000
        callbacks:
          on_left: "toggle_label"
          on_right: "exec cmd /c Taskmgr"

  ip_info:
      type: "yasb.custom.CustomWidget"
      options:
        label: "<span>\udb81\udd9f</span> {data[ip]}"
        label_alt: "<span>\uf450</span> {data[city]} {data[region]}, {data[country]}"
        class_name: "ip-info-widget"
        exec_options:
          run_cmd: "curl.exe https://ipinfo.io"
          run_interval: 120000  # every 5 minutes
          return_format: "json"
        callbacks:
          on_left: "toggle_label"
          on_middle: "exec cmd /c ncpa.cpl" # open network settings
          on_right: "exec cmd /c start https://ipinfo.io/{data[ip]} " # open ipinfo in browser

  weather:
      type: "yasb.weather.WeatherWidget"
      options:
        label: "<span>{icon}</span> {temp}"
        label_alt: "{location}: Min {min_temp}, Max {max_temp}, Humidity {humidity}"
        api_key: '3bf4cf9a7c3f40d6b31174128242807' # Get your free API key from https://www.weatherapi.com/
        update_interval: 600 # Update interval in seconds, Min 600 seconds
        hide_decimal: true
        location: 'USA Los Angeles 90006' # You can use "USA Los Angeles 90006" {COUNTRY CITY ZIP_CODE}, or just city.
        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}, {min_temp}, {max_temp}, {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"
        audio_menu:
          blur: True
          round_corners: False
          round_corners_type: 'normal'
          border_color: 'System'
          alignment: 'right'
          direction: 'down'
          distance: 6

  power_menu:
      type: "yasb.power_menu.PowerMenuWidget"
      options:
        label: "\uf011"
        uptime: True
        blur: False
        blur_background: True
        animation_duration: 300 # Milisecond 
        button_row: 3 # Number of buttons in row, min 1 max 5
        buttons:
          lock: ["\uea75","Lock"]
          signout: ["\udb80\udf43","Sign out"]
          #sleep: ["\u23fe","Sleep"]
          shutdown: ["\uf011","Shut Down"]
          restart: ["\uead2","Restart"]
          hibernate: ["\uf28e","Hibernate"]
          cancel: ["\udb81\udf3a","Cancel"]
          #force_shutdown: ["\uf011","Force Shut Down"]
          #force_restart: ["\uead2","Force Restart"]

  apps:
      type: "yasb.applications.ApplicationsWidget"
      options:
        label: "{data}"
        app_list:
          #- {icon: "\uf489", launch: "wt"}
          #- {icon: "\uf413", launch: "explorer c:\\Users\\amn"}
          #- {icon: "\udb82\ude1e", launch: "C:\\Users\\amn\\AppData\\Local\\Programs\\Microsoft VS Code\\Code.exe"}
          #- {icon: "\udb80\ude39", launch: "C:\\Program Files\\Mozilla Firefox\\firefox.exe"}
          #- {icon: "\uf1ff", launch: "C:\\Users\\amn\\AppData\\Local\\Discord\\Update.exe --processStart Discord.exe"}
          #- {icon: "\ue217", launch: "C:\\Users\\amn\\AppData\\Roaming\\Telegram Desktop\\Telegram.exe"}
          - {icon: "\uf0a2", launch: "notification_center"}
          - {icon: "\ueb51", launch: "quick_settings"}
          #- {icon: "\uf46a", launch: "cmd.exe /c start ms-settings:windowsupdate"}
          - {icon: "\uf422", launch: "search"}
          #- {icon: "\udb84\udf55", launch: "widget"}
          # Currently available to use quick_settings, notification_center, search, widget, launcher (launcher will trigger ALT+A)

  github:
      type: "yasb.github.GithubWidget"
      options:
        label: "<span>\ueba1</span>"
        label_alt: "Notifications {data}" # {data} return number of unread notification
        token: ghp_xxxxxxxxxxx # GitHub Personal access tokens (classic) https://github.com/settings/tokens
        max_notification: 20 # Max number of notification displaying in menu max: 50
        only_unread: false # Show only unread or all notifications; 
        max_field_size: 54 # Max characters in title before truncation.
        menu_width: 400 
        menu_height: 400 
        menu_offset: 240 
        update_interval: 300 # Check for new notification in seconds

  wallapers:
      type: "yasb.wallpapers.WallpapersWidget"
      options:
        label: "<span>\udb83\ude09</span>"
        image_path: "C:\\Users\\xxx\\Images" # Path to folder with images
        change_automatically: false # Automatically change wallpaper
        update_interval: 60 # If change_automatically is true, update interval in seconds

  nvidia_temp:
      type: "yasb.custom.CustomWidget"
      options:
        label: "{data}<span>\udb81\udd04</span>"
        label_alt: "{data}"
        class_name: "system-widget"
        exec_options:
          run_cmd: "powershell nvidia-smi --query-gpu=temperature.gpu --format=csv,noheader"
          run_interval: 10000 # run every 10 sec
          return_format: "string"

  win_button:
      type: "yasb.custom.CustomWidget"
      options:
        label: "^_^"
        label_alt: "\ue62a"
        class_name: "system-widget"
        callbacks:
          on_left: "exec start_menu"

Readme

An everforest theme, comfortable for the eyes. Both light and dark mode colours are available in the CSS file.

[github-actions]

Error creating theme

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

Image must be a PNG.