add more waybar widgets

dot-config/waybar/config.jsonc

@@ -11,7 +11,7 @@
         "hyprland/workspaces"
     ],
     "modules-center": ["clock"],
-    "modules-right": ["network#vpn", "network", "pulseaudio"],
+    "modules-right": ["network#vpn", "network", "backlight", "battery", "pulseaudio", "bluetooth"],
 
     "hyprland/workspaces": {
         "format": "{id}",
@@ -35,6 +35,28 @@
         "format-alt": "  {:%A, %d %B %Y}"
     },
 
+    "backlight": {
+        "device": "intel_backlight",
+        "format": "{icon}   {percent}%",
+        "format-icons": ["󰃞", "󰃟", "󰃠"],
+        "on-scroll-up": "brightnessctl set 1%+",
+        "on-scroll-down": "brightnessctl set 1%-",
+        "min-length": 6
+    },
+
+    "battery": {
+        "states": {
+            "good": 95,
+            "warning": 30,
+            "critical": 15
+        },
+        "format": "{icon}   {capacity}%",
+        "format-charging": "󰂄   {capacity}%",
+        "format-plugged": "󰂄   {capacity}%",
+        "format-alt": "{icon}   {time}",
+        "format-icons": ["󰁺", "󰁻", "󰁼", "󰁽", "󰁾", "󰁿", "󰂀", "󰂁", "󰂂", "󰁹"]
+    },
+
     "network": {
         "format-wifi": "   {essid}",
         "format-ethernet": "󰈀   {ipaddr}/{cidr}",
@@ -67,5 +89,16 @@
             "default": ["", "", ""]
         },
         "on-click": "pavucontrol"
+    },
+
+    "bluetooth": {
+        "format": "󰂯  {status}",
+        "format-connected": "󰂱  {device_alias}",
+        "format-connected-battery": "󰂱  {device_alias} {device_battery_percentage}%",
+        "tooltip-format": "{controller_alias}\t{controller_address}\n\n{num_connections} connected",
+        "tooltip-format-connected": "{controller_alias}\t{controller_address}\n\n{num_connections} connected\n\n{device_enumerate}",
+        "tooltip-format-enumerate-connected": "{device_alias}\t{device_address}",
+        "tooltip-format-enumerate-connected-battery": "{device_alias}\t{device_address}\t{device_battery_percentage}%",
+        "on-click": "blueman-manager"
     }
 }

dot-config/waybar/dark.css

@@ -13,4 +13,7 @@
 @define-color hover_border #7aa2f7;
 @define-color clock #7aa2f7;
 @define-color network #9ece6a;
+@define-color backlight #e0af68;
+@define-color battery #33ccff;
+@define-color bluetooth #bb9af7;
 @define-color tooltip_bg rgba(26, 27, 38, 0.9);

dot-config/waybar/light.css

@@ -13,4 +13,7 @@
 @define-color hover_border #04a5e5;
 @define-color clock #1e66f5;
 @define-color network #40a02b;
+@define-color backlight #df8e1d;
+@define-color battery #1e66f5;
+@define-color bluetooth #8839ef;
 @define-color tooltip_bg rgba(225, 226, 231, 0.95);

dot-config/waybar/style.css

@@ -56,7 +56,10 @@ window#waybar {
 #clock,
 #network,
 #pulseaudio,
-#custom-vpn {
+#custom-vpn,
+#backlight,
+#battery,
+#bluetooth {
     padding: 0 15px;
     margin: 5px;
     background-color: @bg_module;
@@ -85,6 +88,39 @@ window#waybar {
     color: @inactive_text;
 }
 
+#backlight {
+    color: @backlight;
+}
+
+#battery {
+    color: @battery;
+}
+
+#battery.critical:not(.charging) {
+    background-color: @urgent;
+    color: @text;
+    animation-name: blink;
+    animation-duration: 0.5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+}
+
+#bluetooth {
+    color: @bluetooth;
+}
+
+#bluetooth.connected {
+    color: @active_text;
+}
+
+@keyframes blink {
+    to {
+        background-color: @bg_module;
+        color: @urgent;
+    }
+}
+
 tooltip {
     background: @tooltip_bg;
     border: 1px solid @active_border;

dot-config/waybar/theme.css

@@ -13,4 +13,7 @@
 @define-color hover_border #04a5e5;
 @define-color clock #1e66f5;
 @define-color network #40a02b;
+@define-color backlight #df8e1d;
+@define-color battery #1e66f5;
+@define-color bluetooth #8839ef;
 @define-color tooltip_bg rgba(225, 226, 231, 0.95);