add battery widget

configs/waybar/config

@@ -8,7 +8,7 @@
 
     "modules-left": ["river/tags"],
     "modules-center": ["river/window"],
-    "modules-right": ["idle_inhibitor", "pulseaudio", "network", "cpu", "memory", "tray", "clock"],
+    "modules-right": ["idle_inhibitor", "pulseaudio", "network", "cpu", "memory", "battery", "tray", "clock"],
 
 
     // modules config
@@ -70,10 +70,10 @@
             "warning": 30,
             "critical": 15
         },
-        "format": "{capacity}% {icon}",
-        "format-charging": "{capacity}% ",
-        "format-plugged": "{capacity}% ",
-        "format-alt": "{time} {icon}",
+        "format": "{icon} {capacity}%",
+        "format-charging": "{capacity}%",
+        "format-plugged": "{capacity}%",
+        "format-alt": "{icon} {time}",
         // "format-good": "", // An empty format will hide the module
         // "format-full": "",
         "format-icons": ["", "", "", "", ""]

configs/waybar/style.css

@@ -50,7 +50,8 @@ button:hover {
 #memory,
 #network,
 #tray,
-#pulseaudio {
+#pulseaudio,
+#battery {
     background-color: @color1;
     padding: 0 10px;
 }
@@ -78,14 +79,9 @@ button:hover {
     background-color: #eb4d4b;
 }
 
-#battery {
-    background-color: #ffffff;
-    color: #000000;
-}
-
 #battery.charging, #battery.plugged {
-    color: #ffffff;
-    background-color: #26A65B;
+    color: @foreground;
+    background-color: @color1;
 }
 
 @keyframes blink {