waybar config

config.jsonc

[{
  "include": "~/.config/hypr/waybar/modules",
  "layer": "bottom",
  //"mode": "dock",
  "exclusive": true,
  "passthrough": false,
  "position": "top",
  "spacing": 5,
  "fixed-center": true,
  "ipc": true,
  "margin-left": 0,
  "margin-right": 0,

  "modules-left": ["wlr/workspaces", "cpu", "memory", "disk"],
  "modules-right": ["battery", "custom/cycle_wall","custom/updater", "pulseaudio", "custom/keybindings", "clock", "tray", "custom/power"],
  // "output": ["HDMI-A-1", "eDP-1"]
  "output": "eDP-1"
}
, {
  "include": "~/.config/hypr/waybar/modules",
  "layer": "bottom",
  //"mode": "dock",
  "exclusive": true,
  "passthrough": false,
  "position": "top",
  "spacing": 5,
  "fixed-center": true,
  "ipc": true,
  "margin-left": 0,
  "margin-right": 0,

  "modules-left": ["wlr/workspaces", "cpu", "memory", "disk"],
  "modules-right": ["battery", "custom/cycle_wall","custom/updater", "pulseaudio", "custom/keybindings", "clock", "tray", "custom/power"],
  // "output": ["HDMI-A-1", "eDP-1"]
  "output": "HDMI-A-1"
}]

style.css

* {
  font-family: 'JetBrainsMono', 'Noto Sans', 'Roboto Condensed', sans-serif;
  font-size: 14px;
  /* color: #3A3B3C; */
}

window#waybar {
  /* Transparent waybar. Make sure to comment out background-color: and border: */
  background: rgba(0, 0, 0, 0.5);
  /* background-color: #1e1e2e; */
  /* border: 2px solid #313244; */
  transition-property: background-color;
  transition-duration: 0.5s;
}

window#waybar.hidden {
  opacity: 0.5;
}

#backlight,
#battery,
#clock,
#cpu,
#disk,
#memory,
#tray,
#pulseaudio,
#custom-menu,
#custom-power,
#custom-weather,
#custom-updater,
#custom-keybindings,
#custom-cycle_wall,
#network {
  border-radius: 4px;
  margin: 4px 0px;
  padding: 0px 4px;
  color: #3a3b3c;
  /*border: 2px solid #3a3b3c; */
}

#workspaces {
  border-radius: 4px;
  margin: 4px 0px;
  padding: 0px 4px;
  color: #3a3b3c;
}

#backlight {
  background-color: #cba6f7;
}

#battery {
  background-color: #f9e2af;
}

@keyframes blink {
  to {
    color: #000000;
  }
}

#battery.critical:not(.charging) {
  background-color: #f38ba8;
  color: #f38ba8;
  animation-name: blink;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#clock {
  background-color: #a6e3a1;
}

#cpu {
  background-color: #89dceb;
}

#memory {
  background-color: #eba0ac;
}

#disk {
  background-color: #b4befe;
}

#tray {
  background-color: #b4befe;
}
#tray > .passive {
  -gtk-icon-effect: dim;
}
#tray > .needs-attention {
  -gtk-icon-effect: highlight;
}

#workspaces button {
  background-color: #d9e0ee;
  color: #3a3b3c;
  /* border: 2px solid #3a3b3c; */
  margin-right: 2px;
  border-radius: 4px;
}

#workspaces button.visible {
  background-color: green;
  /* background-color: red; */
  color: #3a3b3c;
}

#workspaces button.active {
  background-color: rgb(249, 226, 175);
  /* background-color: red; */
  color: #3a3b3c;
}

#custom-menu {
  background-color: #f5c2e7;
}

#custom-power {
  background-color: #f38ba8;
  margin-right: 4px;
  font-size: 24px;
}

#custom-updater {
  background-color: #e6ed7b;
}

#custom-uptime {
  background-color: #e6ed7b;
}

#custom-weather {
  background-color: #cba6f7;
}

#custom-cycle_wall {
  background-color: #89dceb;
}

#custom-vpn_check {
  background-color: #a6e3a1;
}

#custom-cputemp {
  background-color: #86b4fa;
}

#custom-keybindings {
  background-color: #86b4fa;
  font-size: 24px;
}

#pulseaudio {
  background-color: #fab387;
}

#pulseaudio.bluetooth {
  background-color: #f5c2e7;
}
#pulseaudio.muted {
  background-color: #313244;
  color: #cdd6f4;
}

#network {
  background-color: #89b4fa;
}
#network.disconnected,
#network.disabled {
  background-color: #313244;
  color: #cdd6f4;
}