dotfiles-mirror/config/waybar/style.css

@define-color border      #26233a;
@define-color background  #191724;
@define-color surface0    #1f1d2e;
@define-color overlay0    #26233a;
@define-color text        #e0def4;
@define-color text_dim    #6e6a86;
@define-color blue        #31748f;
@define-color green       #9ccfd8;
@define-color yellow      #f6c177;
@define-color peach       #ebbcba;
@define-color maroon      #eb6f92;
@define-color lavender    #c4a7e7;
@define-color pink        #eb6f92;
@define-color teal        #9ccfd8;
@define-color grey        #6e6a86;

* {
    border: none;
    font-family: "JetBrainsMono Nerd Font";
    font-size: 15px;
    min-height: 10px;
}

window#waybar {
	background: @background;
}

#disk,
#pulseaudio,
#window,
#clock,
#network,
#battery,
#privacy,
#memory,
#cpu,
#workspaces,
#tray,
#bluetooth,
#tray menu {
	margin-top: 0;
    padding: 5px 10px;
    margin: 3px 0 13px 10px;
    background: @surface0;
    color: @text;
    transition: 0.3s;
    border: 1.5px solid @border;
    border-radius: 8px;
}

#window { transition: none; }

window#waybar.empty #window {
    background: transparent;
    box-shadow: none;
    border: none;
}

#network { color: @text; }
#clock { margin-right: 12px; color: @text; }
#pulseaudio { color: @text; }

#workspaces {
    margin-left: 12px;
    color: @text;
}

#workspaces button {
    margin: 0;
    padding: 1px 3px;
    color: @text;
    transition: none;
}

#workspaces button.empty { color: @text_dim; }
#workspaces button.active { color: @maroon; }
#workspaces button.urgent { color: @maroon; }

#workspaces button:hover {
    background: @overlay0;
    color: @text;
}