dotfiles/.config/waybar/style.css

@define-color foreground #cdd6f4;
@define-color foreground-inactive #6c7086;
@define-color background #1e1e2e;
@define-color surface0 #313244;
@define-color surface1 #45475a;
@define-color lavender #b4befe;
@define-color mauve #cba6f7;
@define-color blue #89b4fa;
@define-color green #a6e3a1;
@define-color yellow #f9e2af;
@define-color peach #fab387;
@define-color red #f38ba8;

* {
    font-family: JetBrainsMono Nerd Font;
    font-size: 12px;
    padding: 0;
    margin: 0;
}

#waybar {
    color: @foreground;
    background-color: @background;
}

#workspaces {
    margin: 4px;
    padding: 0 4px;
}

#workspaces button {
    color: @foreground;
    padding-left: 0.7em;
    border-radius: 4px;
    margin: 2px;
}

#workspaces button.empty {
    color: @foreground-inactive;
}

#workspaces button.active {
    background-color: @surface1;
    color: @foreground;
}

#workspaces button:hover {
    background-color: @surface1;
}

#workspaces button.active:hover {
    background-color: @surface0;
}

#clock {
    color: @foreground;
    padding: 0 4px;
    margin: 2px;
}

#custom-platform-profile {
    padding-left: 4px;
    color: @peach;
}

#temperature {
}

#wireplumber {
    padding: 0 4px;
}

#wireplumber.muted {
    color: @red;
}

#cpu {
    padding: 0 4px;
}

#memory {
    padding: 0 4px;
}

#temperature {
    padding: 0 4px;
}

#temperature.critical {
    color: @red;
}

#custom-uptime {
    padding: 0 4px;
    color: @peach;
}

#pulseaudio {
    padding: 0 4px;
}

#backlight {
    padding: 0 4px;
}

#custom-pomodoro {
    padding: 0 4px;
    color: @red;
}

#battery {
    padding: 0 4px;
}

#battery.critical {
    color: @red;
}

#battery.warning {
    color: @yellow;
}

#idle_inhibitor {
    padding-right: 1em;
    color: @lavender;
}

#idle_inhibitor.activated {
    color: @yellow;
}

#language {
    padding-right: 1em;
    color: @foreground;
}

#network {
    padding: 0 4px;
}

#network.disconnected {
    color: @red;
}

#bluetooth {
    padding: 0 4px;
}

#bluetooth.disabled {
    color: @foreground-inactive;
}

#bluetooth.connected {
    color: @mauve;
}

#tray {
    padding: 0 4px;
}

#tray:hover {
    background-color: @surface0;
    border-radius: 4px;
}

#tray > .passive {
    -gtk-icon-effect: dim;
}

#tray > .needs-attention {
    -gtk-icon-effect: highlight;
    background-color: @red;
}

tooltip {
    background-color: @surface0;
    border: 1px solid @lavender;
    border-radius: 4px;
}

tooltip label {
    color: @foreground;
}