dotfiles/waybar/.config/waybar/style.css

/* Colors */
@define-color red_color #cc241d;
@define-color red2_color #fb4934;
@define-color green_color #98971a;
@define-color green2_color #d8bb26;
@define-color yellow_color #d79921;
@define-color yellow2_color #fabd2f;
@define-color blue_color #458588;
@define-color blue2_color #83a598;
@define-color purple_color #b16286;
@define-color purple2_color #d3869b;
@define-color aqua_color #689d6a;
@define-color aqua2_color #8ec07c;
@define-color gray_color #a89984;
@define-color gray2_color #928374;
@define-color orange_color #d65d0e;
@define-color orange2_color #fe8019;

@define-color bg0_color #282828;
@define-color bg1_color #3c3836;
@define-color bg2_color #504945;
@define-color bg3_color #665c54;
@define-color bg4_color #7c6f64;
@define-color bg0_h_color #1d2021;

@define-color fg_color #ebdbb2;

@keyframes blink {
    to {
        color: #4c566a;
        background-color: @fg_color;
    }
}

* {
    color: @fg_color;
    border: 0;
    border-radius: 0;
    padding: 0 0;
    font-family: SourceCodePro;
    font-size: 20px;
    font-weight: bold;
    margin-right: 2px;
    margin-left: 2px;
    min-height: 0;
    min-width: 12px;
}

window#waybar {
    background: transparent;
}

#workspaces button {
    padding: 0 0px;
    border-bottom: 2px;
    color: @fg_color;
    border-color: transparent;
    border-style: solid;
}

#workspaces button.focused {
    border-color: @blue_color;
    border-style: solid;
}

#mode {
    color: @yellow_color;
}

#clock.1, #clock.2, #battery, #cpu, #memory, #backlight, #network, #pulseaudio, #mode, #custom-redshift, #disk {
    padding: 0 5px;
    border-bottom: 2px;
    border-style: solid;
}

#clock.1 {
    font-weight: bold;
    border-color: transparent;
    border-style: solid;
}

#clock.2 {
    font-weight: bold;
    border-color: transparent;
    border-style: solid;
}

#backlight {
    color: @yellow_color;
}

#custom-redshift {
    color: @orange_color;
}

#custom-redshift.disabled {
    color: @blue_color;
}

#battery {
    color: @purple_color;
}

#battery.full {
    color: @green_color;
}

#battery.charging {
    color: @green2_color;
}

#battery.critical:not(.charging) {
    color: @orange2_color;
}

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

#cpu {
    color: @green_color ;
}

#memory {
    color: @green_color;
}

#network {
    color: @aqua2_color;
}

#network.disconnected {
    color: @orange2_color;
}

#pulseaudio {
    color: @purple2_color;
}

#pulseaudio.muted {
    color: @bg0_color;
}

#disk {
  color: @gray_color
}

#tray {
}