Add darklight toggle to waybar

home/dot_config/waybar/config.jsonc

@@ -20,6 +20,7 @@
     ],
     "modules-right": [
         "clock",
+        "custom/darklight",
         "custom/cliphist",
         "privacy",
         "idle_inhibitor",
@@ -205,5 +206,18 @@
         "on-click": "cliphist list | wofi -S dmenu | cliphist decode | wl-copy",
         "on-click-middle": "cliphist list | wofi -S dmenu | cliphist delete",
         "on-click-right": "cliphist wipe"
+    },
+    "custom/darklight": {
+        "format": "{icon}",
+        "interval": 1,
+        "exec": "$HOME/.config/waybar/darkmanstate.sh",
+        "return-type": "json",
+        "format-icons": {
+            "dark": "",
+            "light": ""
+        },
+        "on-click": "darkman set light",
+        "on-click-right": "darkman set dark"
     }
 }
+// vim: ts=4 sts=4 sw=4 et

home/dot_config/waybar/style.css

@@ -107,9 +107,10 @@ button:hover {
 #custom-power,
 #language,
 #custom-dnd,
-#custom-cliphist
-{
-    padding: 0 10px;
+#custom-cliphist,
+#custom-darklight {
+    padding-left: 10px;
+    padding-right: 10px;
     background-color: @base03;
     color: @base1;
 }
@@ -119,21 +120,23 @@ button:hover {
     margin: 0 4px;
 }
 
-.modules-right *, .modules-left * {
+.modules-right *,
+.modules-left * {
     border-radius: 5px;
 }
 
 /* If workspaces is the leftmost module, omit left margin */
-.modules-left > widget:first-child > #workspaces {
+.modules-left>widget:first-child>#workspaces {
     margin-left: 0;
 }
 
 /* If workspaces is the rightmost module, omit right margin */
-.modules-right > widget:last-child > #workspaces {
+.modules-right>widget:last-child>#workspaces {
     margin-right: 0;
 }
 
-.modules-right, .modules-left {
+.modules-right,
+.modules-left {
     border-radius: 15px;
     padding-left: 12px;
     padding-right: 12px;
@@ -150,7 +153,8 @@ button:hover {
     border-bottom: 3px solid @violet;
 }
 
-#battery.charging, #battery.plugged {
+#battery.charging,
+#battery.plugged {
     border-bottom: 3px solid @green;
 }
 
@@ -226,6 +230,10 @@ label:focus {
     border-bottom: 3px solid @base01;
 }
 
+#custom-darklight {
+    border-bottom: 3px solid @base01;
+}
+
 #temperature {
     border-bottom: 3px solid @yellow;
 }
@@ -238,11 +246,11 @@ label:focus {
     border-bottom: 3px solid @green;
 }
 
-#tray > .passive {
+#tray>.passive {
     -gtk-icon-effect: dim;
 }
 
-#tray > .needs-attention {
+#tray>.needs-attention {
     -gtk-icon-effect: highlight;
     background-color: #eb4d4b;
 }