niri: add waybar

niri/.config/niri/config.kdl

@@ -1,6 +1,8 @@
 // This config is in the KDL format: https://kdl.dev
 // https://niri-wm.github.io/niri/Configuration:-Introduction
 
+spawn-at-startup "waybar"
+
 input {
     keyboard {
         xkb {
@@ -121,6 +123,7 @@ binds {
     // Suggested binds for running programs: terminal, app launcher, screen locker.
     Mod+T hotkey-overlay-title="Open a Terminal: alacritty" { spawn "kitty" "--single-instance" "--instance-group" "default"; }
     Mod+D hotkey-overlay-title="Run an Application: wmenu" { spawn "wmenu-run" "-f" "HurmitNerdFont 10"; }
+    Mod+B hotkey-overlay-title="Toggle waybar" { spawn "killall" "-SIGUSR1" "waybar"; }
     Super+Alt+L hotkey-overlay-title="Lock the Screen: swaylock" { spawn "swaylock"; }
     Mod+Shift+T hotkey-overlay-title="Toggle theme" { spawn "lupan-set-theme" "toggle"; }
 

niri/.config/waybar/config

@@ -0,0 +1,13 @@
+{
+    "layer": "top",
+    "position": "top",
+    "modules-left": [
+        "niri/workspaces",
+        "niri/window"
+    ],
+    "modules-right": [
+        "tray",
+        "clock"
+    ],
+    "reload_style_on_change": true,
+}

niri/.config/waybar/dark.css

@@ -0,0 +1,12 @@
+* {
+    background-color: #282e38;
+    color: #a29e98;
+}
+
+#workspaces button.active {
+    border-bottom: 3px solid #04785d;
+}
+
+#workspaces button.urgent {
+    border-bottom: 3px solid #c37583;
+}

niri/.config/waybar/light.css

@@ -0,0 +1,12 @@
+* {
+    background-color: #f6ede0;
+    color: #696257;
+}
+
+#workspaces button.active {
+    border-bottom: 3px solid #278a6e;
+}
+
+#workspaces button.urgent {
+    border-bottom: 3px solid #d0818f;
+}

niri/.config/waybar/style.css

@@ -0,0 +1,25 @@
+@import url("file:///home/lupan/.config/waybar/dark.css");
+
+* {
+    font-family: HurmitNerdFont;
+    font-size: 12px;
+}
+
+#workspaces {
+    padding: 0 0.5rem;
+}
+
+#workspaces button {
+    padding: 0 3px;
+    border-radius: 0;
+    border-bottom: 3px solid transparent;
+}
+
+#window {
+    border-bottom: 3px solid transparent;
+}
+
+#clock {
+    padding: 0 0.5rem;
+    border-bottom: 3px solid transparent;
+}