dotfiles/config/waybar/style.css

@define-color bg-color #1a1b26;
@define-color bg-darker-color #15161e;
@define-color fg-color #c0caf5;
@define-color active-bg-color #7aa2f7;
@define-color active-fg-color #16161e;
@define-color inactive-bg-color #292e42;
@define-color inactive-fg-color #545c7e;
@define-color green #73daca;
@define-color red #f7768e;
@define-color blue #2ac3de;

* {
  border: none;
  border-radius: 0px;
  font-family: Jetbrains Mono Nerd Font;
  font-size: 14px;
  font-style: normal;
  min-height: 0;
}

window#waybar {
  background: @bg-color;
  border-bottom: 2px solid @inactive-bg-color;
  color: @fg-color;
}

#language, #cpu, #memory, #workspaces, #window, #tray, #clock, #battery, #pulseaudio, #network, #backlight {
  background-color: @bg-darker-color;
  color: @fg-color;
  border-radius: 16px;
  margin: 5px 5px 5px 5px;
  padding: 0px 10px 0px 10px;
}

#network, #backlight { color: @blue; }
#cpu, #pulseaudio, #memory, #clock { color: @active-bg-color; }
#language { color: @red; }

#workspaces button { color: @inactive-fg-color; }
#workspaces button.active {
  color: @active-bg-color;
  background-color: transparent;
  border-radius: 16px;
}

#workspaces button:hover {
  background-color: @active-bg-color;
  border-radius: 16px;
  color: black;
}

#clock { font-weight: bold; }
#battery.charging { color: @green; }
#battery.warning:not(.charging) { color: @red; }
#pulseaudio.muted { color: @red; }