waybar: add battry section

home/config/waybar/config

@@ -61,7 +61,8 @@
       "temperature", 
       "memory",
       "custom/swaync",
-      "pulseaudio"
+      "pulseaudio",
+      "battery"
     ]
   },
   {
@@ -96,7 +97,7 @@
       "temperature", 
       "memory",
       "custom/swaync",
-      "pulseaudio"
+      "pulseaudio",
     ]
   }
 ]

home/config/waybar/modules.json

@@ -167,5 +167,19 @@
     "exec": "~/.config/scripts/waybarCava.sh",
     "format": "{}",
     "on-click": "kitty -c ~/.config/kitty/kitty.conf nvim -c cd ~/.config/"
+  },
+
+  "battery": {
+    "full-at": 96,
+    "states": {
+      "good": 95,
+      "warning": 30,
+      "critical": 15
+    },
+    "format": "<span color='#ebdbb2'>{capacity}%</span> {icon}",
+    "format-icons": ["󰂎", "󰁺", "󰁻", "󰁼", "󰁽", "󰁾", "󰁿", "󰂀", "󰂁", "󰂂", "󰁹"],
+    "format-charging": "<span color='#ebdbb2'>{capacity}%</span> 󰂄",
+    "format-plugged": "<span color='#ebdbb2'>{capacity}%</span> 󰂄",
+    "format-alt": "<span color='#ebdbb2'>{time}</span> {icon}"
   }
 }

home/config/waybar/style.css

@@ -10,7 +10,7 @@
 window#waybar {
   background-color: rgba(0, 0, 0, 0);
   transition-property: background-color;
-  transition-duration: .5s;
+  transition-duration: 0.5s;
 }
 
 window#waybar.hidden {
@@ -56,6 +56,14 @@ tooltip label {
   padding-right: 6px;
 }
 
+#battery {
+  border-radius: 10px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
 #window {
   color: #ebdbb2;
   padding-top: 3px;
@@ -79,3 +87,20 @@ tooltip label {
 #temperature.critical {
   background-color: red;
 }
+
+#battery.good {
+  color: #a6da95;
+}
+
+#battery.warning {
+  color: #eed49f;
+}
+
+#battery.critical {
+  color: #ee99a0;
+}
+
+#battery.charging,
+#battery.plugged {
+  color: #a6da95;
+}