notifcaitons

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;