this is the code used in the waybar style.css file.
/* =============================================================================
*
* Waybar configuration
*
* Configuration reference: https://github.com/Alexays/Waybar/wiki/Configuration
*
* =========================================================================== */
/* -----------------------------------------------------------------------------
* Keyframes
* -------------------------------------------------------------------------- */
/*
Polar Night
nord0 #2e3440
nord1 #3b4252
nord2 #434c5e
nord3 #4c566a
Snow Storm
nord4 #d8dee9
nord5 #e5e9f0
nord6 #eceff4
Frost
nord7 #8fbcbb
nord8 #88c0d0
nord9 #81a1c1
nord10 #5e81ac
Aurora
nord11 #bf616a
nord12 #d08770
nord13 #ebcb8b
nord14 #a3be8c
nord15 #b48ead
*/
/* -----------------------------------------------------------------------------
* Base styles
* -------------------------------------------------------------------------- */
/* Reset all styles */
* {
color: #fffe39;
border: 0;
border-radius: 0;
padding: 0 0;
font-family:Digital-7;
font-size: 24px;
margin-right: 5px;
margin-left: 5px;
padding-bottom:0px;
padding-top: 0px;
}
window#waybar {
background:#000000;
border: 2px;
border-color: #3f00ff;
border-style: solid;
border-radius: 5px 5px 5px 5px;
margin-top:2px;
}
#workspaces button {
color: #3f00ff;
border-color: #3f00ff;
border-bottom: 1px;
border-style: solid;
margin-top:3px;
margin-bottom:0px;
}
#tray {
border-color: #b0a8a8;
border-bottom: 0px;
border-style: solid;
margin-top:3px;
margin-bottom:2px;
}
#workspaces button.active {
color: #93ffff;
border-color: #93ffff;
border-bottom: 1px;
border-style: solid;
margin-top:3px;
margin-bottom:0px;
transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
}
#workspaces button:hover {
color: #3f00ff;
border-color: #3f00ff;
border-bottom: 1px;
border-style: solid;
margin-top:3px;
margin-bottom:0px;
background: rgba(161, 153, 157, 0.27);
}
#window,#custom-launcher,#custom-power,#custom-network_traffic,#custom-weather{
padding: 0 3px;
color: #fffe39;
font-size: 24px;
border-bottom: 2px;
border-style: solid;
}
/* -----------------------------------------------------------------------------
* Module styles
* -------------------------------------------------------------------------- */
#clock {
padding: 0 3px;
color: #fffe39;
font-size: 24px;
border-bottom: 0px;
border-style: solid;
}
#battery,#battery.charging,#cpu,#memory,#temperature,#temperature.critical,#custom-pacman,#disk,#pulseaudio,#pulseaudio.muted {
padding: 0 3px;
font-size: 24px;
border-bottom: 2px;
border-style: solid;
}
#battery {
color: #648c11;
}
#battery.charging {
color: #648c11;
}
@keyframes blink {
to {
color: #4c566a;
background-color: #eceff4;
}
}
#battery.critical:not(.charging) {
background: #bf616a;
color: #eceff4;
animation-name: blink;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#cpu {
color:#a3be8c ;
}
#memory {
color: #d3869b;
}
#temperature {
color: #8fbcbb;
}
#temperature.critical {
color: #e30022;
}
#custom-pacman{
color: #1cac78;
}
#disk{
color: #ba55d3;
}
#network{
padding: 0 3px;
color: #85754e;
font-size: 24px;
border-bottom: 2px;
border-style: solid;
}
#network.disabled {
color:#bf616a;
}
#network.disconnected {
color: #bf616a;
}
#network.speed {
color: #fffe39;
min-width: 25px;
font-size: 24px;
border: 0px;
padding: 1 1 1 1;
}
#pulseaudio {
color: #fffe39;
}
#pulseaudio.muted {
color: #d3869b;
}
#tray {
}
#custom-power{
padding: 0 3px;
color: #e30022;
font-size: 24px;
border-bottom: 0px;
border-style: solid;
}
#custom-lock_screen{
padding: 0 3px;
color: #ed872d;
font-size: 24px;
border-bottom: 0px;
border-style: solid;
}
#backlight {
padding: 0 3px;
color: #ebcb8b;
font-size: 24px;
border-bottom: 0px;
border-style: solid;
}
#window{
border-style: hidden;
margin-top:1px;
}
#custom-keyboard-layout{
padding: 0 3px;
color: #d08770;
font-size: 24px;
border-bottom: 2px;
border-style: solid;
}
#custom-network_traffic{
color:#d08770;
}
#pulseaudio {
color: #c2b280;
}
#custom-launcher {
padding: 0 3px;
color: #c2b280;
border-bottom: 2px;
border-style: solid;
}
#custom-expand {
min-width: 25px;
}
#tray {
margin: 0;
padding: 0;
}
#tray * {
margin-left: 8px;
}
#group-minimized {
border-left: solid;
border-left-width: 0.5;
}
#custom-minimized {
color: #ffa6a5;
}
#custom-system {
color: #93ffff;
min-width: 25px;
font-size: 24px;
margin: 0;
padding: 0;
}
#custom-internet {
min-width: 25px;
font-size: 24px;
}
#custom-expand {
min-width: 25px;
font-size: 24px;
color: #ff0800;
}
#custom-sw {
min-width: 25px;
font-size: 24px;
color: #fffe39;
margin: 1;
padding: 1;
}
#custom-temp {
min-width: 25px;
font-size: 24px;
color: #fe7a0b;
}
#custom-spacer {
min-width: 10px;
font-size: 24px;
color: #ffffff;
margin-top:5px;
}
#network.wireguard {
padding: 0 3px;
font-size: 24px;
color: #3fff00;
border-bottom: 0px;
border-style: solid;
}
#network.wgsc {
padding: 0 3px;
font-size: 24px;
color: #3fff00;
border-bottom: 0px;
border-style: solid;
}
#custom-kpntv {
min-width: 35px;
font-size: 24px;
}
#custom-firefox {
min-width: 25px;
font-size: 24px;
}
#custom-thunar {
min-width: 25px;
font-size: 24px;
}
#custom-geany {
min-width: 25px;
font-size: 24px;
}
#custom-deluge {
min-width: 25px;
font-size: 24px;
}
#custom-thunderbird {
min-width: 25px;
font-size: 24px;
}
#custom-spacer {
color: #fdfbfc;
min-width: 25px;
font-size: 24px;
}