bar.css

* {
    border: none;
    border-radius: 0;
    font-family: Iosevka Custom Book Extended, Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    min-height: 0;
}

window#waybar {
    background: #282A36;
    color: #CCC;
}

/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
#workspaces button {
    padding: 0 5px;
    background: transparent;
    color: #CCC;
    border-bottom: 2px solid transparent;
}

#workspaces button.focused {
    background: #282A36; /* dracula bg */
    border-bottom: 2px solid #BBBBBB;
}

#mode {
    background: #F8F8F2; /* dracula fg */
    color: #282A36; /* dracula bg */
}

#clock, #pulseaudio, #tray, #mode, #mpd {
    padding: 0 7px;
}