notifcaitons

config/waybar/config

@@ -33,6 +33,7 @@
             "custom/ibus",
             "tray",
             "clock",
+            "custom/notification",
             "custom/power"
         ],
 
@@ -265,6 +266,27 @@
             "show-passive-items": true
         },
 
+        "custom/notification": {
+            "format": "{icon}",
+            "format-icons": {
+                "notification": "󰂚",
+                "none": "󰂜",
+                "dnd-notification": "󰂛",
+                "dnd-none": "󰂛",
+                "inhibited-notification": "󰂚",
+                "inhibited-none": "󰂜",
+                "dnd-inhibited-notification": "󰂛",
+                "dnd-inhibited-none": "󰂛"
+            },
+            "return-type": "json",
+            "exec": "swaync-client -swb",
+            "exec-if": "which swaync-client",
+            "on-click": "swaync-client -t -sw",
+            "on-click-right": "swaync-client -d -sw",
+            "escape": true,
+            "tooltip": true
+        },
+
         "custom/power": {
             "format": "⏻",
             "on-click": "$HOME/.config/waybar/scripts/power-menu.sh",
@@ -294,6 +316,7 @@
             "battery",
             "tray",
             "clock",
+            "custom/notification",
             "custom/power"
         ],
 
@@ -421,6 +444,27 @@
             "show-passive-items": true
         },
 
+        "custom/notification": {
+            "format": "{icon}",
+            "format-icons": {
+                "notification": "󰂚",
+                "none": "󰂜",
+                "dnd-notification": "󰂛",
+                "dnd-none": "󰂛",
+                "inhibited-notification": "󰂚",
+                "inhibited-none": "󰂜",
+                "dnd-inhibited-notification": "󰂛",
+                "dnd-inhibited-none": "󰂛"
+            },
+            "return-type": "json",
+            "exec": "swaync-client -swb",
+            "exec-if": "which swaync-client",
+            "on-click": "swaync-client -t -sw",
+            "on-click-right": "swaync-client -d -sw",
+            "escape": true,
+            "tooltip": true
+        },
+
         "custom/power": {
             "format": "⏻",
             "on-click": "$HOME/.config/waybar/scripts/power-menu.sh",
@@ -449,6 +493,7 @@
             "battery",
             "tray",
             "clock",
+            "custom/notification",
             "custom/power"
         ],
 
@@ -567,6 +612,27 @@
             "show-passive-items": true
         },
 
+        "custom/notification": {
+            "format": "{icon}",
+            "format-icons": {
+                "notification": "󰂚",
+                "none": "󰂜",
+                "dnd-notification": "󰂛",
+                "dnd-none": "󰂛",
+                "inhibited-notification": "󰂚",
+                "inhibited-none": "󰂜",
+                "dnd-inhibited-notification": "󰂛",
+                "dnd-inhibited-none": "󰂛"
+            },
+            "return-type": "json",
+            "exec": "swaync-client -swb",
+            "exec-if": "which swaync-client",
+            "on-click": "swaync-client -t -sw",
+            "on-click-right": "swaync-client -d -sw",
+            "escape": true,
+            "tooltip": true
+        },
+
         "custom/power": {
             "format": "⏻",
             "on-click": "$HOME/.config/waybar/scripts/power-menu.sh",

config/waybar/style.css

@@ -98,6 +98,7 @@ tooltip label {
 #custom-weather,
 #custom-vpn,
 #custom-ibus,
+#custom-notification,
 #custom-monitor-brightness {
     margin: 4px 2px;
     padding: 0 12px;
@@ -121,6 +122,7 @@ tooltip label {
 #custom-weather:hover,
 #custom-vpn:hover,
 #custom-ibus:hover,
+#custom-notification:hover,
 #custom-monitor-brightness:hover {
     background: #383838;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
@@ -311,6 +313,24 @@ tooltip label {
     border-radius: 6px;
 }
 
+/* ============= Notifications ============= */
+#custom-notification {
+    color: #B0B0B0;
+}
+
+/* swaync sets the class from its --swaybar-format output */
+#custom-notification.notification,
+#custom-notification.inhibited-notification {
+    color: #90CAF9;
+}
+
+#custom-notification.dnd-none,
+#custom-notification.dnd-notification,
+#custom-notification.dnd-inhibited-none,
+#custom-notification.dnd-inhibited-notification {
+    color: #CF6679;
+}
+
 /* ============= Power Button ============= */
 #custom-power {
     margin: 4px 8px 4px 2px;