[sway] Use waybar with a customized example

sway/config

@@ -209,13 +209,7 @@ bar {
 
     # When the status_command prints a new line to stdout, swaybar updates.
     # The default just shows the current date and time.
-    status_command i3status
+    swaybar_command waybar
-
-    colors {
-        statusline #ffffff
-        background #323232
-        inactive_workspace #32323200 #32323200 #5c5c5c
-    }
 }
 
 include /etc/sway/config.d/*

waybar/config

@@ -0,0 +1,79 @@
+{
+  "layer": "top", // Waybar at top layer
+  "position": "bottom", // Waybar position (top|bottom|left|right)
+  "height": 30, // Waybar height (to be removed for auto height)
+  // Choose the order of the modules
+  "modules-left": ["sway/workspaces", "sway/mode", "sway/window"],
+  "modules-center": [],
+  "modules-right": ["custom/vpn", "network", "battery", "pulseaudio", "cpu", "clock", "tray"],
+  // Module config
+  "sway/mode": {
+    "tooltip": false,
+    "format": "<span weight=\"bold\">{}</span>"
+  },
+  "custom/vpn": {
+    "interval": 5,
+    "tooltip": false,
+    "format": "{}",
+    "return-type": "json",
+    // Script at https://gitlab.com/krathalan/miscellaneous-scripts
+    "exec": "bash $HOME/Git/miscellaneous-scripts/vpn_detect mullvad-us5"
+  },
+  "network": {
+    "tooltip": false,
+    // "interface": "wlp2*", // (Optional) To force the use of this interface
+    "format-wifi": "{essid} ({signalStrength}%) ",
+    "format-ethernet": "{ifname}: {ipaddr}/{cidr}",
+    "format-linked": "{ifname} (No IP)",
+    "format-alt": "{ifname}: {ipaddr}",
+    "format-disconnected": "No internet"
+  },
+  "battery": {
+    "tooltip": false,
+    "states": {
+        // "good": 95,
+        "warning": 30,
+        "critical": 15
+    },
+    "format": "{capacity}% {icon}",
+    "format-alt": "{time} {icon}",
+    "format-charging": "{capacity}% {icon}",
+    "format-plugged": "{capacity}% ",
+    // "format-good": "", // An empty format will hide the module
+    // "format-full": "",
+    "format-icons": ["", "", "", "", "", "", ""]
+  },
+  "pulseaudio": {
+    "tooltip": false,
+    // "scroll-step": 1, // %, can be a float
+    "format": "{volume}% {icon}",
+    "format-bluetooth": "{volume}% {icon}",
+    "format-muted": "",
+    "format-source": "{volume}% {icon}",
+    "format-source-muted": "",
+    "format-icons": {
+        "headphones": "",
+        "handsfree": "",
+        "headset": "",
+        "phone": "",
+        "portable": "",
+        "car": "",
+        "default": ["", "", ""]
+    },
+    "on-click": "pavucontrol"
+  },
+  "cpu": {
+    "interval": 5,
+    "tooltip": false,
+    "format": "{usage}% "
+  },
+  "clock": {
+    "tooltip": false,
+    "format": "{:%d.%m.%Y %H:%M}"
+  },
+  "tray": {
+    "tooltip": false,
+    // "icon-size": 21,
+    "spacing": 10
+  }
+}

waybar/style.css

@@ -0,0 +1,118 @@
+* {
+    border: none;
+    border-radius: 0;
+    font-family: Consolas, "Material Design Icons";
+    font-size: 1em;
+    min-height: 0;
+}
+
+window#waybar {
+    background-color: rgba(11, 11, 11, 0.8);
+    color: #ffffff;
+    transition-property: background-color;
+    transition-duration: .5s;
+}
+
+window#waybar.hidden {
+    opacity: 0.2;
+}
+
+#window {
+  padding: 0 15px;
+}
+
+window {
+    color:      rgba(217, 216, 216, 1);
+    background: rgba(35, 31, 32, 0.00);
+}
+
+window#waybar.solo {
+    color:      rgba(217, 216, 216, 1);
+    background: rgba(35, 31, 32, 0.85);
+}
+
+/*
+window#waybar.empty {
+    background-color: transparent;
+}
+window#waybar.solo {
+    background-color: #FFFFFF;
+}
+*/
+
+/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
+#workspaces button {
+    padding: 0 5px;
+    background-color: transparent;
+    border-bottom: 2px solid rgba(100, 114, 125, 0.5);
+    color: #999999;
+}
+
+#workspaces button.focused {
+  color: #ffffff;
+    background-color: #333333;
+    border-bottom: 2px solid #00ff96;
+}
+
+#workspaces button.urgent {
+    background-color: #eb4d4b;
+}
+
+#clock,
+#custom-vpn,
+#battery,
+#cpu,
+#memory,
+#backlight,
+#network,
+#pulseaudio,
+#tray,
+#mode,
+#idle_inhibitor {
+    padding: 0 5px;
+    margin: 0 4px;
+    background-color: transparent;
+    border-bottom: 2px solid #00ff96;
+    color: #ffffff;
+}
+
+#mode {
+  background-color: #00ff96;
+  color: #000000;
+}
+
+#pulseaudio,
+#clock,
+#tray,
+#cpu {
+  border-bottom: transparent;
+}
+
+#battery {
+  border-bottom: 2px solid #bff874;
+}
+
+#battery.charging {
+  border-bottom: 2px solid #00ff96;
+}
+
+#custom-vpn.down,
+#battery.critical:not(.charging) {
+  border-bottom: 2px solid #dd2241;
+}
+
+label:focus {
+    background-color: #000000;
+}
+
+#network.disconnected {
+  border-bottom: 2px solid #dd2241;
+}
+
+#pulseaudio.bluetooth {
+  border-bottom: 2px solid #1a8cff;
+}
+
+#pulseaudio.muted {
+  border-bottom: 2px solid #fff569;
+}