Add mpd status to waybar

waybar/config

@@ -1,6 +1,6 @@
 {
     "height": 37, // Waybar height (to be removed for auto height)
-    "modules-left": ["sway/workspaces", "custom/media"],
+    "modules-left": ["sway/workspaces", "mpd"],
     "modules-center": ["clock"],
     "modules-right": ["cpu", "memory", "temperature", "pulseaudio", "backlight", "battery", "network", "tray"],
 
@@ -15,11 +15,6 @@
              "3": " ",
              "4": " ",
              "5": " ",
-             "6": " ",
-             "7": " ",
-             "8": " ",
-             "9": " ",
-             "10": " ",
              "urgent": " ",
              "focused": " ",
              "default": " "
@@ -36,6 +31,16 @@
 	"format": "{:%I:%M %p}  ",
 	"format-alt": "{:%A, %B %d, %Y}  "
     },
+	"mpd": {
+		"format-stopped": "⏹",
+		"format-disconnected": "Disconnected ",
+		"state-icons": {
+			"playing": "⏵",
+			"paused": "⏸"
+		},
+		"format": "{stateIcon} | {artist} - {album} - {title} | ({elapsedTime:%M:%S}/{totalTime:%M:%S}) ",
+		"on-click": "mpc toggle"
+	},
     "cpu": {
         "format": "{usage}%  ",
         "tooltip": false

waybar/style.css

@@ -19,6 +19,7 @@ window#waybar.hidden {
 
 #workspaces,
 #mode,
+#mpd,
 #cpu,
 #memory,
 #temperature,
@@ -32,7 +33,7 @@ window#waybar.hidden {
 #battery,
 #network,
 #tray {
-	background-color: #1E1E2E;
+	background-color: #11111b;
 	padding: 0 5px;
 	margin: 2px 4px 5px 4px;
 	border: 3px solid rgba(0, 0, 0, 0);
@@ -40,8 +41,8 @@ window#waybar.hidden {
 	background-clip: padding-box;
 }
 
-#workspaces, #tray {
-	 background-color: #161320;
+#workspaces, #tray, #mpd {
+	 background-color: #11111b;
 }
 
 #workspaces button {
@@ -63,65 +64,65 @@ window#waybar.hidden {
 }
 
 #cpu {
-	color: #302D41;
+	color: #11111b;
 	background-color: #FAE3B0;
 }
 
 #memory {
-	color: #302D41;
+	color: #11111b;
 	background-color: #F5C2E7;
 }
 
 #temperature {
-	color: #302D41;
+	color: #11111b;
 	background-color: #F8BD96;
 }
 
 #temperature.critical {
 	color: #F28FAD;
-	background-color: #1A1826;
+	background-color: #11111b;
 }
 
 #clock {
-	background-color: #161320;
+	background-color: #11111b;
 	color: #D9E0EE;
 }
 
 #pulseaudio {
-	color: #302D41;
+	color: #11111b;
 	background-color: #B5E8E0;
 }
 
 #pulseaudio.muted {
 	background-color: #E8A2AF;
-	color: #1e222a;
+	color: #11111b;
 }
 
 #backlight {
-	color: #302D41;
+	color: #11111b;
 	background-color: #89DCEB;
 }
 
 #battery {
-	color: #302D41;
+	color: #11111b;
 	background-color: #ABE9B3;
 }
 
 #battery.charging, #battery.plugged {
 	background-color: #ABE9B3;
-	color: #1e222a;
+	color: #11111b;
 }
 
 @keyframes blink {
     to {
-    	background-color: #1e222a;
+    	background-color: #11111b;
     	color: #F28FAD;
     }
 }
 
 #battery.critical:not(.charging) {
     background-color: #F28FAD;
-    color: #1e222a;
+    color: #11111b;
     animation-name: blink;
     animation-duration: 0.5s;
     animation-timing-function: linear;
@@ -130,12 +131,12 @@ window#waybar.hidden {
 }
 
 #network {
-	color: #302D41;
+	color: #11111b;
 	background-color: #DDB6F2;
 }
 
 #network.disconnected {
     background-color: #F28FAD;
-    color: #1e222a;
+    color: #11111b;
 }