Waybar Style

These are the cosmetic CSS files for my Waybar configuration. Please, if you appreciate my work, consider making a donation.

Sway Waybar Style

This is the Sway Waybar style. Load this document into Emacs, and turn on Rainbow mode for extra fun! Now these Org documents serve yet another purpose. The colors for each of the four CSS files match the rices for Sway, River, LabWC, and Hyprland.

All

Notice the space before the asterisk. 

 * {
    font-family:"SpaceMono Nerd Font";
    font-size:21px;
    background:transparent;
    color:#efefef;
}

Window

#window {
    color:#010101;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6)
}

MPD

#mpd {
    color:#010101;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
}

CPU

#cpu {
    color:#fc3c35;
    background:linear-gradient(180deg, rgba(208, 56, 68, 0.7), rgba(0, 0, 0, 0.5));
    margin-left:0;
    margin-right:0;
    padding-left:12px;
    padding-right:12px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
}

Pulseaudio/Disk

#pulseaudio, #disk {
    color:#dedc91;
    background:linear-gradient(180deg, rgba(222, 220, 145, 0.7), rgba(0, 0, 0, 0.5));
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
}

Memory/Backlight

#memory, #backlight {
    color:#40a789;
    background:linear-gradient(180deg, rgba(58, 161, 131, 0.7), rgba(0, 0, 0, 0.5));
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
}

Workspaces

#workspaces button, #tags button {
    background:linear-gradient(180deg, rgba(120, 120, 120, 0.7), rgba(0, 0, 0, 0.5));
    padding-left:17px;
    padding-right:17px;
    border-radius:0px 0px 0px 0px;
    border:0px solid transparent;
    color:#dfdfdf;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
}

#workspaces button * {
    background:none;
}

#workspaces button:hover, #tags button:hover {
    background:linear-gradient(180deg, rgba(171, 43, 27, 0.7), rgba(0, 0, 0, 0.5));
    box-shadow:inherit;
    text-shadow:inherit;
    border-radius:0px 0px 0px 0px;
    border:0px solid transparent;
    color:#b93b2b;
    text-shadow:3px 3px rgba(171, 43, 27, 0.6);
}

#workspaces button.focused, #tags button.focused, #tags button.focused.occupied {
    background:linear-gradient(180deg, rgba(97, 185, 167, 0.7), rgba(0, 0, 0, 0.5));
    color:#81d8c6;
}

#workspaces button.focused:hover, #tags button.focused:hover, #tags button.focused.occupied:hover {
    text-shadow:3px 3px rgba(107, 195, 177, 0.6);
}

#tags button.occupied {
    background:linear-gradient(180deg, rgba(239, 175, 96, 0.7), rgba(0, 0, 0, 0.5));
    color:#fff293;
}

Battery

#battery {
    color:#61b8a6;
    background:linear-gradient(180deg, rgba(107, 194, 176, 0.7), rgba(0, 0, 0, 0.5));
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:12px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
}

Clock/Network

#custom-clock, #network {
    color:#c26cd5;
    background:linear-gradient(180deg, rgba(176, 105, 152, 0.7), rgba(0, 0, 0, 0.5));
    margin-left:0;
    margin-right:0;
    padding-left:12px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
}

River Waybar Style

All

 * {
    font-family:"SpaceMono Nerd Font";
    font-size:21px;
    background:transparent;
    color:#fdeadb;
}

tooltip {
    border:none;
    border-radius:0;
    color:#fdeadb;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
    margin-bottom:1px;
    padding:0;
}

Title

#title, #window {
    padding-left:6px;
    color:#fdeadb;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

MPD

#mpd, #bluetooth.off {
    padding-right:6px;
    color:#fdeadb;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

CPU

#cpu, #wireplumber.muted, #pulseaudio.muted {
    color:#d0484e;
    background:linear-gradient(180deg, rgba(196, 60, 72, 0.7), rgba(0, 0, 0, 0.1));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Pulseaudio/Disk

#pulseaudio, #disk {
    color:#f28735;
    background:linear-gradient(180deg, rgba(226, 119, 53, 0.7), rgba(0, 0, 0, 0.1));
    margin-left:2px;
    margin-right:0;
    border-radius:40px 0px 0px 40px;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Memory/Backlight

#memory, #backlight, #wireplumber {
    color:#25c192;
    background:linear-gradient(180deg, rgba(21, 176, 130, 0.7), rgba(0, 0, 0, 0.1));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}
#backlight {
    border-radius:0px 40px 40px 0px;
    margin-right:2px;
}

Workspaces

#workspaces button, #tags button {
    background:linear-gradient(180deg, rgba(57, 150, 192, 0.7), rgba(0, 0, 0, 0.1));
    padding-left:16px;
    padding-right:17px;
    margin-left:1px;
    margin-right:1px;
    border-radius:40px 40px 40px 40px;
    border:0px solid transparent;
    color:#fc3c35;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

#workspaces button:hover, #tags button:hover {
    background:linear-gradient(180deg, rgba(231, 61, 123, 0.7), rgba(0, 0, 0, 0.1));
    box-shadow:inherit;
    text-shadow:inherit;
    margin-left:1px;
    margin-right:1px;
    border-radius:40px 40px 40px 40px;
    border:0px solid transparent;
    color:#bcbcbc;
    text-shadow:3px 3px rgba(247, 78, 139, 0.5);
}

#workspaces button.focused, #tags button.focused, #tags button.focused.occupied, #workspaces button.active {
    background:linear-gradient(180deg, rgba(21, 176, 130, 0.7), rgba(0, 0, 0, 0.1));
}

#workspaces button.focused:hover, #tags button.focused:hover, #tags button.focused.occupied:hover, #workspaces button.active:hover {
    text-shadow:3px 3px rgba(21, 176, 130, 0.7);
}

#tags button.occupied {
    background:linear-gradient(0deg, rgba(112, 202, 68, 0.6), rgba(0, 0, 0, 0.1));
}

Battery

#battery, #idle_inhibitor, #pulseaudio.bluetooth {
    color:#3996c0;
    background:linear-gradient(180deg, rgba(57, 150, 192, 0.7), rgba(0, 0, 0, 0.1));
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}
#idle_inhibitor, #pulseaudio.bluetooth {
    border-radius:40px 0px 0px 40px;
    margin-left:2px;
}

Clock

#custom-clock {
    color:#d8a89a;
    background:linear-gradient(180deg, rgba(200, 152, 138, 0.7), rgba(0, 0, 0, 0.1));
    border-radius:0px 40px 40px 0px;
    margin-left:0;
    margin-right:2px;
    padding-left:12px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Network

#network {
   color:#f74e8b;
   background:linear-gradient(180deg, rgba(231, 61, 123, 0.7), rgba(0, 0, 0, 0.1));
   border-radius:0px 40px 40px 0px;
   margin-left:0;
   margin-right:2px;
   padding-left:11px;
   padding-right:11px;
   text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Bluetooth

#bluetooth.off {
    padding-left:9px;
    padding-right:9px;
    margin-left:0;
    margin-right:0;
}

#bluetooth.on {
    color:#d0484e;
    background:linear-gradient(180deg, rgba(186, 60, 72, 0.7), rgba(0, 0, 0, 0.1));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

#bluetooth.connected, #bluetooth.connected.pairable {
    color:#25c192;
    background:linear-gradient(180deg, rgba(21, 176, 130, 0.7), rgba(0, 0, 0, 0.1));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

#bluetooth.pairable:not(.connected), #bluetooth.discoverable {
    color:#3996c0;
    background:linear-gradient(180deg, rgba(57, 150, 192, 0.7), rgba(0, 0, 0, 0.1));
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

#bluetooth.discovering {
    color:#f9c65b;
    background:linear-gradient(0deg, rgba(233, 182, 75, 0.6), rgba(0, 0, 0, 0.1));
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

LabWC Waybar Style

All

 * {
    font-family:"SpaceMono Nerd Font";
    font-size:21px;
    background:transparent;
    color:#edc9b9;
}

CPU

#cpu {
    color:#dd6359;
    background:linear-gradient(180deg, rgba(205, 83, 73, 0.9), rgba(0, 0, 0, 0.4));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Pulseaudio/Disk

#pulseaudio, #disk {
    color:#efef20;
    background:linear-gradient(180deg, rgba(223, 221, 16, 0.9), rgba(0, 0, 0, 0.5));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Memory/Backlight

#memory, #backlight {
    color:#00dd30;
    background:linear-gradient(180deg, rgba(0, 204, 32, 0.9), rgba(0, 0, 0, 0.5));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Battery

#battery {
    color:#39a5eb;
    background:linear-gradient(180deg, rgba(41, 149, 219, 0.9), rgba(0, 0, 0, 0.5));
    margin-left:0;
    margin-right:0;
    padding-left:12px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Taskbar

#taskbar button {
    background:linear-gradient(180deg, rgba(183, 97, 120, 0.9), rgba(0, 0, 0, 0.5));
    padding-left:10px;
    padding-right:9px;
    border-radius:0px 0px 0px 0px;
    border:0px solid transparent;
    color:#c77188;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}
#taskbar button:hover {
    padding-left:10px;
    padding-right:9px;
    border-radius:0px 0px 0px 0px;
    border:0px solid transparent;
    color:#58a4a1;
    background:linear-gradient(180deg, rgba(72, 147, 144, 0.9), rgba(0, 0, 0, 0.5));
    text-shadow:2px 2px rgba(0, 0, 20, 0.7);
}
#taskbar button.maximized {
    color:#00dd30;
    background:linear-gradient(180deg, rgba(0, 204, 32, 0.9), rgba(0, 0, 0, 0.5));
}
#taskbar button.minimized {
    color:#efef20;
    background:linear-gradient(180deg, rgba(223, 221, 16, 0.9), rgba(0, 0, 0, 0.5));
}
#taskbar button.active {
    color:#c98e86;
    background:linear-gradient(180deg, rgba(189, 127, 116, 0.9), rgba(0, 0, 0, 0.5));
}
#taskbar button.maximized:hover {
    color:#c77188;
    background:linear-gradient(180deg, rgba(184, 97, 120, 0.9), rgba(0, 0, 0, 0.5));
}
#taskbar button.active:hover, #taskbar button.minimized:hover {
    color:#58a4a1;
    background:linear-gradient(180deg, rgba(72, 147, 144, 0.9), rgba(0, 0, 0, 0.5));
}

Clock/Network

#custom-clock, #clock, #network {
    color:#58a4a1;
    background:linear-gradient(180deg, rgba(72, 147, 144, 0.9), rgba(0, 0, 0, 0.5));
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:9px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

MPD

#mpd {
    color:#000000;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Hyprland Waybar Style

All

 * {
    font-family:"SpaceMono Nerd Font";
    font-size:21px;
    background:transparent;
    color:#fdeadb;
}

tooltip {
    border:none;
    border-radius:0;
    color:#fdeadb;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
    margin-bottom:1px;
    padding:0;
}

Title

#title, #window {
    padding-left:6px;
    color:#fdeadb;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

MPD

#mpd, #bluetooth.off {
    padding-right:6px;
    color:#fdeadb;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

CPU

#cpu, #wireplumber.muted, #pulseaudio.muted {
    color:#d0484e;
    background:linear-gradient(180deg, rgba(196, 60, 72, 0.7), rgba(0, 0, 0, 0.1));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Pulseaudio/Disk

#pulseaudio, #disk {
    color:#f28735;
    background:linear-gradient(180deg, rgba(226, 119, 53, 0.7), rgba(0, 0, 0, 0.1));
    margin-left:2px;
    margin-right:0;
    border-radius:40px 0px 0px 40px;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Memory/Backlight

#memory, #backlight, #wireplumber {
    color:#25c192;
    background:linear-gradient(180deg, rgba(21, 176, 130, 0.7), rgba(0, 0, 0, 0.1));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}
#backlight {
    border-radius:0px 40px 40px 0px;
    margin-right:2px;
}

Workspaces

#workspaces button, #tags button {
    background:linear-gradient(180deg, rgba(57, 150, 192, 0.7), rgba(0, 0, 0, 0.1));
    padding-left:16px;
    padding-right:17px;
    margin-left:1px;
    margin-right:1px;
    border-radius:40px 40px 40px 40px;
    border:0px solid transparent;
    color:#fc3c35;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

#workspaces button:hover, #tags button:hover {
    background:linear-gradient(180deg, rgba(231, 61, 123, 0.7), rgba(0, 0, 0, 0.1));
    box-shadow:inherit;
    text-shadow:inherit;
    margin-left:1px;
    margin-right:1px;
    border-radius:40px 40px 40px 40px;
    border:0px solid transparent;
    color:#bcbcbc;
    text-shadow:3px 3px rgba(247, 78, 139, 0.5);
}

#workspaces button.focused, #tags button.focused, #tags button.focused.occupied, #workspaces button.active {
    background:linear-gradient(180deg, rgba(21, 176, 130, 0.7), rgba(0, 0, 0, 0.1));
}

#workspaces button.focused:hover, #tags button.focused:hover, #tags button.focused.occupied:hover, #workspaces button.active:hover {
    text-shadow:3px 3px rgba(21, 176, 130, 0.7);
}

#tags button.occupied {
    background:linear-gradient(0deg, rgba(112, 202, 68, 0.6), rgba(0, 0, 0, 0.1));
}

Battery

#battery, #idle_inhibitor, #pulseaudio.bluetooth {
    color:#3996c0;
    background:linear-gradient(180deg, rgba(57, 150, 192, 0.7), rgba(0, 0, 0, 0.1));
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}
#idle_inhibitor, #pulseaudio.bluetooth {
    border-radius:40px 0px 0px 40px;
    margin-left:2px;
}

Clock

#custom-clock {
    color:#d8a89a;
    background:linear-gradient(180deg, rgba(200, 152, 138, 0.7), rgba(0, 0, 0, 0.1));
    border-radius:0px 40px 40px 0px;
    margin-left:0;
    margin-right:2px;
    padding-left:12px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Network

#network {
   color:#f74e8b;
   background:linear-gradient(180deg, rgba(231, 61, 123, 0.7), rgba(0, 0, 0, 0.1));
   border-radius:0px 40px 40px 0px;
   margin-left:0;
   margin-right:2px;
   padding-left:11px;
   padding-right:11px;
   text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Bluetooth

#bluetooth.off {
    padding-left:9px;
    padding-right:9px;
    margin-left:0;
    margin-right:0;
}

#bluetooth.on {
    color:#d0484e;
    background:linear-gradient(180deg, rgba(186, 60, 72, 0.7), rgba(0, 0, 0, 0.1));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

#bluetooth.connected, #bluetooth.connected.pairable {
    color:#25c192;
    background:linear-gradient(180deg, rgba(21, 176, 130, 0.7), rgba(0, 0, 0, 0.1));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

#bluetooth.pairable:not(.connected), #bluetooth.discoverable {
    color:#3996c0;
    background:linear-gradient(180deg, rgba(57, 150, 192, 0.7), rgba(0, 0, 0, 0.1));
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

#bluetooth.discovering {
    color:#f9c65b;
    background:linear-gradient(0deg, rgba(233, 182, 75, 0.6), rgba(0, 0, 0, 0.1));
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Author: Tanner Babcock

Created: 2023-06-13 Tue 23:02