Update

config/waybar/config.jsonc

@@ -263,12 +263,12 @@
         "interval": "once",
         "tooltip": true,
         "return-type": "json",
-        "format": "{icon}",
+        "format": "{} {icon}",
         "format-icons": {
             "Playing": "󰏦",
             "Paused": "󰐍"
         },
-        "exec": "playerctl metadata --format '{\"alt\": \"{{status}}\", \"tooltip\": \"{{playerName}}:  {{markup_escape(title)}} - {{markup_escape(artist)}}\" }'",
+        "exec": "playerctl metadata --format '{\"alt\": \"{{status}}\", \"text\": \"{{playerName}}:  {{markup_escape(title)}} - {{markup_escape(artist)}}\" }'",
         "on-click": "playerctl play-pause",
         "on-click-right": "playerctl next",
         "on-scroll-up": "playerctl position 10+",

config/waybar/style.css

@@ -46,7 +46,7 @@
 @define-color ok                @aqua2;
 @define-color workspaces-text-color  @fg4;
 @define-color workspaces-hover  @yellow2;
-@define-color workspaces-focused  @yellow1;
+@define-color workspaces-focused  @aqua1;
 @define-color day               @orange1;
 @define-color time              @orange2;
 @define-color date              @orange1;
@@ -206,7 +206,8 @@ window#waybar {
 }
 
 #mode {
-    background: @background_color;
+    background-color: @background_color;
+    color: @aqua2;
 }
 
 #network.disconnected {
@@ -261,6 +262,14 @@ window#waybar {
     padding-right: 10px;
 }
 
+#custom-playerctl {
+    background-color: @aqua1;
+    color: @theme_base_color;
+    font-weight: bold;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
 #custom-valent.dangerously-empty {
     color: @warning_color;
 }