Waybar Configuration

config

{
    "layer": "top", // Waybar at top layer
    "position": "top", // Waybar at the bottom of your screen
    "height": 32, // Waybar height
    "modules-left": ["sway/workspaces","sway/mode"],
    "modules-center": ["clock",],
    "modules-right": ["keyboard-state","custom/protonmail","network","pulseaudio", "battery", "tray"],
    "sway/workspaces": {
        "icon": false,   
        "disable-scroll": true,
        "all-outputs": false,
        "format": "<span size='large'>{icon}</span>",
        "format-icons": {
            "1": "<span size='135%'>󰛄</span>",
            "2": "<span size='135%'>󱀡</span>",
            "3": "<span size='135%'>󰓇</span>",
            "4": "<span size='135%'>󰎭</span>",
            "5": "<span size='135%'>󰎱</span>",
            "6": "<span size='135%'>󰎳</span>",
            "7": "<span size='135%'>󰎶</span>",
            "8": "<span size='135%'>󰎹</span>",
            "9": "<span size='135%'>󰎼</span>",
            "10":"<span size='135%'>󰽽</span>",
        }
    },
    "sway/mode": {
        "format": "{}"
    },
    "tray": {
        "icon-size": 18,
        "spacing": 8
    },
    "clock": {
        "format": "{: %I:%M %a %d}",
        "tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
    },
    "battery": {
    "tooltip-format": "{capacity}% \n{time}",
        "interval": 30,
     "on-scroll-up": "~/.scripts/ChangeBrightness up",
     "on-scroll-down": "~/.scripts/ChangeBrightness down",
	"on-click": "~/.scripts/ChangeBrightness 0%",
        "states": {
            // "good": 95,
            "warning": 30,
            "critical": 20
        },
        "full-at":  "99",
        "format": "<span size='100%' rise='600'>{icon}</span>",
        "format-icons": ["󰂎","󰁺","󰁻","󰁼","󰁽","󰁾","󰁿","󰂀","󰂁","󰂂","󰁹"],
        "format-critical": "󰂃{capacity}%", // An empty format will hide the module
        "format-full": "<span size='100%' rise='-1500'>󱟢</span>",
        "format-charging": "<span size='100%'>󰂄</span>{capacity}%"
    },
        "network": {
	    "interval": 5,
        "format-linked":"󰤥",
        "format-wifi": "<span size='103%' rise='600'>{icon}</span>",
        "format-icons": ["󰤯", "󰤟", "󰤢", "󰤥", "󰤨"],
        "format-disconnected": "󰤭",
        "interface": "wlan0",
	    "tooltip-format-wifi": "{essid}:{signalStrength}\nSpeed:{bandwidthDownBits} \n{ipaddr}"
    },
    "pulseaudio": {
       "tooltip": "{volume}",
       //"scroll-step": 1,
       //"on-scroll-up": "~/.scripts/ChangeVolume up",
       //"on-scroll-down": "~/.scripts/ChangeVolume down",
        "on-click-right": "pavucontrol",
       "on-click":"~/.scripts/ChangeVolume mute",
       "format": "<span size='125%' rise='600'>{icon}</span>",
       "format-source": "<span size='105%' rise='600'>{icon}</span> {volume}%",
       "format-muted": "<span size='125%' rise='600'>󰖁</span>",
       "format-icons": {
            "headphone": "󰋌",
            "default": ["󰕿", "󰖀", "󰕾"]
        },
    },
    "backlight": {
    "device": "intel_backlight",
    "format": "<span size='105%' rise='600'>{icon}</span>",
    "format-icons": ["󰃞","󰃟", "󰃠"],
    "on-scroll-up": "brightnessctl set 1%+",
    "on-scroll-down": "brightnessctl set 1%-",
    "on-click": "wlsunset"
},
"custom/protonmail": {
    "exec": "bar-protonmail -b \u200a",
    "return-type": "json",
    "interval": 30,
    "tooltip": "Open ProtonMail",
    "format": "{} <span size='108%' >󰇯</span>",
    "on-click": "xdg-open https://mail.protonmail.com/u/0/all-mail#filter=unread"
},
    "idle_inhibitor": {
        "format": "{icon}",
        "format-icons": {
            "activated": "",
            "deactivated": ""
        }
    },

    "keyboard-state": {
        "capslock": true,
        "format": "<span size='105%' >{icon}</span>",
        "format-icons": {
            "locked": "",
            "unlocked": ""
        }
    },
"custom/waybar-mpris": {
    "return-type": "json",
    "exec": "waybar-mpris --autofocus",
    "on-click": "waybar-mpris --send toggle",
    // This option will switch between players on right click.
        "on-click-right": "waybar-mpris --send player-next",
    // The options below will switch the selected player on scroll
        // "on-scroll-up": "waybar-mpris --send player-next",
        // "on-scroll-down": "waybar-mpris --send player-prev",
    // The options below will go to next/previous track on scroll
        // "on-scroll-up": "waybar-mpris --send next",
        // "on-scroll-down": "waybar-mpris --send prev",
    "escape": true,
},
}

styes.css

* {
    border: none;
    font-family: "Proxima Nova";
    font-size: 17px;
    min-height: 0;
}

window#waybar {
    background: transparent;
    color: #bebebe;
}
.modules-right {
    margin: 0px 15px 0 0;
}
.modules-center {
    margin: 0px 0 0 0;
}
.modules-left {
    margin: 0px 0 0 8px;
}
#keyboard-state,#waybar-mpris,#custom-protonmail,#workspaces,#clock,#mode,#battery,#pulseaudio,#backlight,#network {
    margin:0px 4px 0 4px;
}

#workspaces button:hover {
    background: rgba(50,50,50, 0.7);
}

#workspaces button {
    margin: 0px 5px 0 5px;
    background: transparent;
    padding: 4px 4px 4px 4px;
    border-radius: 6px;
}

#workspaces button.focused {
    color: white;
}
#mode {
    padding: 0px 12px 0px 12px;
    color: black;
    background: white;
}

@keyframes critical {
    to {
    color: rgba(187,56,0, 1);
    }
}


#battery.critical:not(.charging) {
    color:rgba(187,56,0, 1);
    animation-name: critical;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

#clock {
    border-radius: 6px;
    padding: 4px 6px 0px 0px;
}

#clock:hover {
	background: rgba(40,40,40, .95);
}
 
#tray {
    margin: 7px 15px 0 4px;
    background: rgba(40,40,40, .65);
    border-radius: 6px;
    padding: 1px 5px 1px 5px;
}
#custom-protonmail{
    padding-top:4px;
    padding-right:4px;
}
#custom-protonmail.error {
    color: darkred;
}
#keyboard-state {
    margin-top: 1px;
}
#tray {
    background-color: #2980b9;
}

#tray > .passive {
    -gtk-icon-effect: dim;
}

#tray > .needs-attention {
    -gtk-icon-effect: highlight;
    background-color: #eb4d4b;
}