templates/.config/waybar/config.jsonc.j2

@@ -32,15 +32,12 @@
         "clock#utc",
         "clock#local"
     ],
-
-    "niri/workspaces": {
-        "format": "\uf111"
-    },
     
 {% for iface in host.wireless %}
     "network#{{ iface }}": {
         "interface": "{{ iface }}",
-        "format": "\uf1eb",
+        "format": "\uf1eb \uf058",
+        "format-disconnected": "\uf1eb \uf057",
         "tooltip-format": "{{ iface }} {ipaddr} {essid} {signalStrength}",
         "tooltip-format-disconnected": "{{ iface }} down"
     },
@@ -49,7 +46,8 @@
 {% for iface in host.ethernet %}
     "network#{{ iface }}": {
         "interface": "{{ iface }}",
-        "format": "\uf6ff",
+        "format": "\uf6ff \uf058",
+        "format-disconnected": "\uf6ff \uf057",
         "tooltip-format": "{{ iface }} {ipaddr}",
         "tooltip-format-disconnected": "{{ iface }} down"
     },
@@ -58,7 +56,8 @@
 {% if not host.ethernet and host.auto_ethernet %}
     "network#auto_ethernet": {
         "interface": "en*",
-        "format": "\uf6ff",
+        "format": "\uf6ff \uf058",
+        "format-disconnected": "\uf6ff \uf057",
         "tooltip-format": "{{ iface }} {ipaddr}",
         "tooltip-format-disconnected": "{{ iface }} down"
     },

templates/.config/waybar/style.css.j2

@@ -20,6 +20,8 @@
     /* `otf-font-awesome` is required to be installed for icons */
     font-family: '{{ host.system_mono_font }}', 'Font Awesome 6 Free';
     font-size: 13px;
+
+    color: @base05;
 }
 
 window#waybar {
@@ -34,26 +36,13 @@ window#waybar {
     padding-right: 4px;
 }
 
-button {
-    /* Use box-shadow instead of border so the text isn't offset */
-    box-shadow: inset 0 -3px transparent;
-    /* Avoid rounded borders under each button name */
-    border: none;
-    border-radius: 0;
-}
-
-/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
-button:hover {
-    background: inherit;
-    text-shadow: none;
-}
-
-.module {
+.module, #network.disconnected {
     padding: 0 5px;
     margin: 4px 0;
-    color: @base05;
     background: @base01;
     border-radius: 6px;
+
+    box-shadow: none;
 }
 
 #workspaces {
@@ -62,33 +51,17 @@ button:hover {
 
 #workspaces button {
     padding: 0 5px;
-    color: @base05;
 }
 
-#workspaces button.empty {
-    color: @base03;
-}
 
-#workspaces button:hover {
-    color: @base02;
-}
-
-#workspaces button.active {
-    color: @base04;
-}
-
-#workspaces button.urgent {
-    color: @base08;
-}
-
-.warning {
-    box-shadow: 0 -2px 0 @base0A;
+#wireplumber.muted, #network.disabled, .warning {
+    box-shadow: 0 -3px 0 @base0A;
 }
 
 .critical {
-    box-shadow: 0 -2px 0 @base08;
+    box-shadow: 0 -3px 0 @base08;
 }
 
-#network.disconnected, .muted {
-    color: @base03;
+#network {
+    box-shadow: 0 -3px 0 @base0B;
 }