config

{
    // "layer": "top", // Waybar at top layer
    // "position": "bottom", // Waybar position (top|bottom|left|right)
    "height": 30, // Waybar height (to be removed for auto height)
    // "width": 1280, // Waybar width
    // Choose the order of the modules
    //"modules-left": ["sway/workspaces", "sway/mode", "custom/media"],
    //"modules-center": ["sway/window"],
    //"modules-right": [ "idle_inhibitor", "pulseaudio", "network", "cpu", "memory", "temperature", "backlight", "battery", "battery#bat2", "clock", "tray"],

    "modules-left": ["sway/workspaces", "sway/mode", "wlr/taskbar"],
    "modules-center": ["sway/window"],
    "modules-right": [ "idle_inhibitor", "pulseaudio", "cpu", "memory", "temperature", "battery", "battery#bat2", "clock", "tray"],


    // Modules configuration
    // "sway/workspaces": {
    //     "disable-scroll": true,
    //     "all-outputs": true,
    //     "format": "{name}: {icon}",
    //     "format-icons": {
    //         "1": "",
    //         "2": "",
    //         "3": "",
    //         "4": "",
    //         "5": "",
    //         "urgent": "",
    //         "focused": "",
    //         "default": ""
    //     }
    // },
    "sway/mode": {
        "format": "<span style=\"italic\">{}</span>"
    },
    "mpd": {
        "format": "{stateIcon} {consumeIcon}{randomIcon}{repeatIcon}{singleIcon}{artist} - {album} - {title} ({elapsedTime:%M:%S}/{totalTime:%M:%S}) ⸨{songPosition}|{queueLength}⸩ ",
        "format-disconnected": "Disconnected ",
        "format-stopped": "{consumeIcon}{randomIcon}{repeatIcon}{singleIcon}Stopped ",
        "unknown-tag": "N/A",
        "interval": 2,
        "consume-icons": {
            "on": " "
        },
        "random-icons": {
            "off": "<span color=\"#f53c3c\"></span> ",
            "on": " "
        },
        "repeat-icons": {
            "on": " "
        },
        "single-icons": {
            "on": "1 "
        },
        "state-icons": {
            "paused": "",
            "playing": ""
        },
        "tooltip-format": "MPD (connected)",
        "tooltip-format-disconnected": "MPD (disconnected)"
    },
    "idle_inhibitor": {
        "format": "{icon}",
        "format-icons": {
            "activated": "",
            "deactivated": ""
        }
    },
    "tray": {
        // "icon-size": 21,
        "spacing": 10
    },
    "clock": {
        // "timezone": "America/New_York",
        "tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
        "format-alt": "{:%Y-%m-%d}",
        "format": "{:%I:%m %p}"

    },
    "cpu": {
        "format": "{usage}% ",
        "tooltip": false
    },
    "memory": {
        "format": "{}% "
    },
    "temperature": {
        // "thermal-zone": 2,
        // "hwmon-path": "/sys/class/hwmon/hwmon2/temp1_input",
        "critical-threshold": 80,
        // "format-critical": "{temperatureC}°C {icon}",
        "format": "{temperatureC}°C {icon}",
        "format-icons": ["", "", ""]
    },
    "backlight": {
        // "device": "acpi_video1",
        "format": "{percent}% {icon}",
        "format-icons": ["", ""]
    },
    "battery": {
        "states": {
            // "good": 95,
            "warning": 30,
            "critical": 15
        },
        "format": "{capacity}% {icon}",
        "format-charging": "{capacity}% ",
        "format-plugged": "{capacity}% ",
        "format-alt": "{time} {icon}",
        // "format-good": "", // An empty format will hide the module
        // "format-full": "",
        "format-icons": ["", "", "", "", ""]
    },
    "battery#bat2": {
        "bat": "BAT2"
    },
    "network": {
        // "interface": "wlp2*", // (Optional) To force the use of this interface
        "format-wifi": "{essid} ({signalStrength}%) ",
        "format-ethernet": "{ifname}: {ipaddr}/{cidr} ",
        "format-linked": "{ifname} (No IP) ",
        "format-disconnected": "Disconnected ⚠",
        "format-alt": "{ifname}: {ipaddr}/{cidr}"
    },
    "pulseaudio": {
        // "scroll-step": 1, // %, can be a float
        "format": "{volume}% {icon} {format_source}",
        "format-bluetooth": "{volume}% {icon} {format_source}",
        "format-bluetooth-muted": " {icon} {format_source}",
        "format-muted": " {format_source}",
        "format-source": "{volume}% ",
        "format-source-muted": "",
        "format-icons": {
            "headphone": "",
            "hands-free": "",
            "headset": "",
            "phone": "",
            "portable": "",
            "car": "",
            "default": ["", "", ""]
        },
        "on-click": "pavucontrol"
    },
    "custom/media": {
        "format": "{icon} {}",
        "return-type": "json",
        "max-length": 40,
        "format-icons": {
            "spotify": "",
            "default": "🎜"
        },
        "escape": true,
        "exec": "$HOME/.config/waybar/mediaplayer.py 2> /dev/null" // Script in resources folder
        // "exec": "$HOME/.config/waybar/mediaplayer.py --player spotify 2> /dev/null" // Filter player based on name
    },
    "wlr/taskbar": {
  	"format": "{icon}   {app_id}",
  	"icon-size": 18,
  	"icon-theme": "We10X",
  	"tooltip-format": "{title}",
  	"on-click": "activate",
  	"on-click-middle": "close"
  }


}

gistfile2.txt

[2021-02-02 16:09:05.647] [info] Resources files: /home/kushy/.config/waybar/config, /home/kushy/.config/waybar/style.css
[2021-02-02 16:09:05.652] [debug] Output detected: eDP-1 (Unknown 0x046F)
[2021-02-02 16:09:05.654] [debug] Use custom icon theme: We10X
[2021-02-02 16:09:05.658] [warning] module battery#bat2: Disabling module "battery#bat2", No battery named BAT2
[2021-02-02 16:09:05.659] [warning] For a functional tray you must have libappindicator-* installed and export XDG_CURRENT_DESKTOP=Unity
[2021-02-02 16:09:05.711] [debug] Task (0) waybar [org.gnome.Nautilus] <amif> entered output 0x56192d589060
[2021-02-02 16:09:05.712] [debug] Task (0) waybar [org.gnome.Nautilus] <amif> now visible on eDP-1
[2021-02-02 16:09:05.712] [debug] Task (0) waybar [org.gnome.Nautilus] <amif> changed
[2021-02-02 16:09:05.718] [debug] Task (1) waybar [Alacritty] <amif> entered output 0x56192d589060
[2021-02-02 16:09:05.720] [debug] Task (1) waybar [Alacritty] <amif> now visible on eDP-1
[2021-02-02 16:09:05.720] [debug] Task (1) waybar [Alacritty] <AMif> changed
[2021-02-02 16:09:05.720] [debug] Task (2) ~ [Alacritty] <amif> entered output 0x56192d589060
[2021-02-02 16:09:05.721] [debug] Task (2) ~ [Alacritty] <amif> now visible on eDP-1
[2021-02-02 16:09:05.721] [debug] Task (2) ~ [Alacritty] <amif> changed
[2021-02-02 16:09:05.744] [debug] Task (3) style.css - VSCodium [VSCodium] <amif> entered output 0x56192d589060
[2021-02-02 16:09:05.745] [debug] Task (3) style.css - VSCodium [VSCodium] <amif> now visible on eDP-1
[2021-02-02 16:09:05.745] [debug] Task (3) style.css - VSCodium [VSCodium] <amif> changed
[2021-02-02 16:09:05.746] [debug] Task (4) Super Productivity [superProductivity] <amif> entered output 0x56192d589060
[2021-02-02 16:09:05.747] [debug] Task (4) Super Productivity [superProductivity] <amif> now visible on eDP-1
[2021-02-02 16:09:05.747] [debug] Task (4) Super Productivity [superProductivity] <amif> changed
[2021-02-02 16:09:05.749] [debug] Task (5) CS202-notes-lecture-01-03.pdf [evince] <amif> entered output 0x56192d589060
[2021-02-02 16:09:05.750] [debug] Task (5) CS202-notes-lecture-01-03.pdf [evince] <amif> now visible on eDP-1
[2021-02-02 16:09:05.750] [debug] Task (5) CS202-notes-lecture-01-03.pdf [evince] <amif> changed
[2021-02-02 16:09:05.750] [debug] Task (6) cs202 [org.gnome.Nautilus] <amif> entered output 0x56192d589060
[2021-02-02 16:09:05.750] [debug] Task (6) cs202 [org.gnome.Nautilus] <amif> now visible on eDP-1
[2021-02-02 16:09:05.750] [debug] Task (6) cs202 [org.gnome.Nautilus] <amif> changed
[2021-02-02 16:09:05.755] [debug] Task (7) Editing config — Mozilla Firefox [firefox] <amif> entered output 0x56192d589060
[2021-02-02 16:09:05.756] [debug] Task (7) Editing config — Mozilla Firefox [firefox] <amif> now visible on eDP-1
[2021-02-02 16:09:05.756] [debug] Task (7) Editing config — Mozilla Firefox [firefox] <amif> changed
[2021-02-02 16:09:05.757] [debug] GTK widget tree:
window#waybar.background.eDP-1.:dir(ltr)
  decoration:dir(ltr)
  box.horizontal:dir(ltr)
    box.horizontal.modules-left:dir(ltr)
      widget:dir(ltr)
        box#workspaces.horizontal:dir(ltr)
      widget:dir(ltr)
        label#mode:dir(ltr)
      widget:dir(ltr)
        box#taskbar.horizontal:dir(ltr)
          button.flat:dir(ltr)
            box.horizontal:dir(ltr)
              [label:dir(ltr)]
              image:dir(ltr)
              [label:dir(ltr)]
          button.flat.maximized.active:dir(ltr)
            box.horizontal:dir(ltr)
              [label:dir(ltr)]
              image:dir(ltr)
              [label:dir(ltr)]
          button.flat:dir(ltr)
            box.horizontal:dir(ltr)
              [label:dir(ltr)]
              image:dir(ltr)
              [label:dir(ltr)]
          button.flat:dir(ltr)
            box.horizontal:dir(ltr)
              [label:dir(ltr)]
              image:dir(ltr)
              [label:dir(ltr)]
          button.flat:dir(ltr)
            box.horizontal:dir(ltr)
              [label:dir(ltr)]
              image:dir(ltr)
              [label:dir(ltr)]
          button.flat:dir(ltr)
            box.horizontal:dir(ltr)
              [label:dir(ltr)]
              image:dir(ltr)
              [label:dir(ltr)]
          button.flat:dir(ltr)
            box.horizontal:dir(ltr)
              [label:dir(ltr)]
              image:dir(ltr)
              [label:dir(ltr)]
          button.flat:dir(ltr)
            box.horizontal:dir(ltr)
              [label:dir(ltr)]
              image:dir(ltr)
              [label:dir(ltr)]
    box.horizontal.modules-center:dir(ltr)
      widget:dir(ltr)
        label#window:dir(ltr)
    box.horizontal.modules-right:dir(ltr)
      widget:dir(ltr)
        label#idle_inhibitor:dir(ltr)
      widget:dir(ltr)
        label#pulseaudio:dir(ltr)
      widget:dir(ltr)
        label#cpu:dir(ltr)
      widget:dir(ltr)
        label#memory:dir(ltr)
      widget:dir(ltr)
        label#temperature:dir(ltr)
      widget:dir(ltr)
        label#battery:dir(ltr)
      widget:dir(ltr)
        label#clock:dir(ltr)
      widget:dir(ltr)
        box#tray.horizontal:dir(ltr)

[2021-02-02 16:09:05.913] [info] Bar configured (width: 1920, height: 30) for output: eDP-1

style.css

* {
    border: none;
    border-radius: 0;
    /* `otf-font-awesome` is required to be installed for icons */
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    min-height: 0;
    background-color:#202124;
    /* background-color: rgba(0, 0, 0, 0);
    color: #000000; */

    /* border-radius : 2px;
    margin-bottom : 2px;
    margin-top : 3px; */

}

/* window#waybar {
    background-color: rgba(43, 48, 59, 0.5);
    border-bottom: 3px solid rgba(100, 114, 125, 0.5);
    color: #ffffff;
    transition-property: background-color;
    transition-duration: .5s;
} */

window#waybar.hidden {
    opacity: 0.2;
}

/*
window#waybar.empty {
    background-color: transparent;
}
window#waybar.solo {
    background-color: #FFFFFF;
}
*/

window#waybar.termite {
    background-color: #3F3F3F;
}

window#waybar.chromium {
    background-color: #000000;
    border: none;
}

#workspaces button {
    padding: 0 5px;
    background-color: transparent;
    color: #ffffff;
    border-bottom: 3px solid transparent;
}

/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
#workspaces button:hover {
    background: rgba(0, 0, 0, 0.2);
    box-shadow: inherit;
    border-bottom: 3px solid #ffffff;
}

#workspaces button.focused {
    /* background-color: #64727D; */
    border-bottom: 3px solid #ffffff;
}

#workspaces button.urgent {
    background-color: #eb4d4b;
}

#mode {
    background-color: #64727D;
    border-bottom: 3px solid #ffffff;
}

#clock,
#battery,
#cpu,
#memory,
#temperature,
#backlight,
#network,
#pulseaudio,
#custom-media,
#tray,
#mode,
#idle_inhibitor,
#mpd {
    padding: 0 10px;
    margin: 0 4px;
    color: #ffffff;
}

#clock {
    margin-top: 5px;
    margin-top: 5px;

    background-color: #61b5d3;
    color : #000;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;

}

#battery {
    /* background-color: #ffffff; */
    color: #ffffff; 
    /* margin-top : 3px; */
    border-bottom-right-radius: 6px;


}

#battery.charging {
    color: #ffffff;
    background-color: #26A65B;
}

@keyframes blink {
    to {
        background-color: #ffffff;
        color: #000000;
    }
}

#battery.critical:not(.charging) {
    background-color: #f53c3c;
    color: #ffffff;
    animation-name: blink;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

#taskbar {
    padding-left: 20px;
}

#taskbar button {
    padding-left: 20px;
}

/* #taskbar button.active {
    border-top: 1px;
    border-top-color: #ffffff;
    background-image: linear-gradient(to right, #ff0000, #00ffff);;
} */

/* #taskbar button.maximized
#taskbar button.minimized
#taskbar button.active
#taskbar button.fullscreen */

/* 
label:focus {
    background-color: #000000;
}

#cpu {
    background-color: #2ecc71;
    color: #000000;
}

#memory {
    background-color: #9b59b6;
}

#backlight {
    background-color: #90b1b1;
}

#network {
    background-color: #2980b9;
}

#network.disconnected {
    background-color: #f53c3c;
}

#pulseaudio {
    background-color: #f1c40f;
    color: #000000;
}

#pulseaudio.muted {
    background-color: #90b1b1;
    color: #2a5c45;
} 

#custom-media {
    background-color: #66cc99;
    color: #2a5c45;
    min-width: 100px;
}

#custom-media.custom-spotify {
    background-color: #66cc99;
}

#custom-media.custom-vlc {
    background-color: #ffa000;
}

#temperature {
    background-color: #f0932b;
}

#temperature.critical {
    background-color: #eb4d4b;
}

#tray {
    background-color: #2980b9;
    border-bottom-left-radius: 6px;
}

#idle_inhibitor {
    background-color: #2d3436;
}

#idle_inhibitor.activated {
    background-color: #ecf0f1;
    color: #2d3436;
}

#mpd {
    background-color: #66cc99;
    color: #2a5c45;
}

#mpd.disconnected {
    background-color: #f53c3c;
}

#mpd.stopped {
    background-color: #90b1b1;
}

#mpd.paused {
    background-color: #51a37a;
} */