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
- All
- Window
- MPD
- CPU
- Pulseaudio/Disk
- Privacy
- Memory/Backlight
- Workspaces
- Keyboard State
- Battery
- Bluetooth
- Clock/Network
River Waybar Style
- All
- Title
- MPD
- CPU
- Pulseaudio/Disk
- Memory/Backlight
- Workspaces
- Battery
- Clock
- Network
- Bluetooth
Wayfire Waybar Style
- All
- CPU
- Pulseaudio/Disk
- Memory/Backlight
- Battery
- Bluetooth
- Taskbar
- Clock/Network
- Privacy
- MPD
- Wireplumber
- Keyboard State
Hyprland Waybar Style
- All
- Title
- MPD
- CPU
- Pulseaudio/Disk
- Memory/Backlight
- Workspaces
- Battery
- Clock
- Keyboard State
- Network
- Bluetooth

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:"VictorMono Nerd Font";
    font-size:23px;
    background:transparent;
    color:#fedd83;
}

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

Window

#window {
    color:#fedd83;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
    padding-left:5px;
}

MPD

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

CPU

#cpu, #wireplumber.muted, #pulseaudio.muted, #privacy {
    color:#fe0219;
    background:linear-gradient(0deg, rgba(238, 0, 10, 0.5), rgba(0, 0, 0, 0.4));
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
}

#cpu, #wireplumber.muted {
    margin-left:0;
}

Pulseaudio/Disk

#pulseaudio, #disk {
    color:#f4df23;
    background:linear-gradient(0deg, rgba(228, 207, 19, 0.5), rgba(0, 0, 0, 0.4));
    margin-left:2px;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    border-radius:40px 0px 0px 40px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
}

#pulseaudio.muted {
    margin-left:2px;
}

Privacy

#privacy-item {
    padding-left:4px;
    padding-right:4px;
    background:linear-gradient(0deg, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.3));
}

Memory/Backlight

#memory, #backlight, #wireplumber {
    color:#a9df11;
    background:linear-gradient(0deg, rgba(153, 208, 2, 0.5), 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.6);
}

Workspaces

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

#workspaces button * {
    background:none;
    outline:0;
}

#workspaces button:hover, #tags button:hover {
    background:linear-gradient(0deg, rgba(154, 208, 2, 0.5), rgba(0, 0, 0, 0.4));
    text-shadow:inherit;
    margin-left:1px;
    margin-right:2px;
    border-radius:40px 40px 40px 40px;
    border:0px solid transparent;
    text-shadow:3px 3px rgba(154, 208, 2, 0.6);
    box-shadow:2px 2px rgba(154, 208, 2, 0.5);
}

#workspaces button:hover label {
    color:#a9df11;
}

#workspaces button.focused, #tags button.focused, #tags button.focused.occupied {
    background:linear-gradient(0deg, rgba(238, 1, 10, 0.5), rgba(0, 0, 0, 0.4));
    color:#efefef;
    box-shadow:2px 2px rgba(238, 0, 10, 0.5);
}
#workspaces button.focused label {
    color:#fe0219;
}

#workspaces button.focused:hover, #tags button.focused:hover, #tags button.focused.occupied:hover {
    text-shadow:3px 3px rgba(238, 0, 10, 0.6);
}

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

Keyboard State

#keyboard-state {
    padding-left:8px;
    background:linear-gradient(0deg, rgba(228, 207, 19, 0.5), rgba(0, 0, 0, 0.4));
    border-radius:0px 40px 40px 0px;
    box-shadow:2px 2px rgba(228, 207, 19, 0.4);
    margin-right:2px;
}

#keyboard-state label {
    color:#f4df23;
    text-shadow:2px 2px rgba(0, 0, 0, 0.5);
}

#keyboard-state label.locked {
    color:#ffffff;
    text-shadow:2px 2px rgba(238, 0, 10, 0.5);
}

#image {
    background:none;
    border:none;
    color:black;
    box-shadow:2px 2px rgba(0, 0, 0, 0.3);
}

Battery

#battery, #idle_inhibitor, #pulseaudio.bluetooth, #temperature {
    color:#6264fe;
    background:linear-gradient(0deg, rgba(118, 112, 229, 0.5), rgba(0, 0, 0, 0.4));
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
}

#pulseaudio.bluetooth, #temperature {
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:12px;
}

#battery {
    border-radius:0px 40px 40px 0px;
    padding-left:10px;
    padding-right:12px;
    margin-left:0;
    margin-right:2px;
    box-shadow:3px 3px rgba(118, 112, 229, 0.4);
}

#battery.warning {
    color:#f4df23;
    border-radius:0px 40px 40px 0px;
    background:linear-gradient(0deg, rgba(228, 207, 19, 0.5), rgba(0, 0, 0, 0.3));
    margin-left:0;
    margin-right:3px;
    box-shadow:3px 3px rgba(224, 202, 16, 0.5);
}

#battery.critical {
    color:#fe0219;
    border-radius:0px 40px 40px 0px;
    font-weight:bold;
    background:linear-gradient(0deg, rgba(238, 0, 10, 0.5), rgba(0, 0, 0, 0.4));
    margin-left:3px;
    margin-right:4px;
    box-shadow:3px 3px rgba(255, 255, 255, 0.5);
}

#idle_inhibitor {
    border-radius:40px 0px 0px 40px;
    padding-left:11px;
    padding-right:10px;
    margin-left:2px;
    margin-right:0;
}

Bluetooth

#bluetooth.on, #bluetooth.off {
    color:#fe0219;
    background:linear-gradient(0deg, rgba(238, 0, 10, 0.5), 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);
}

#bluetooth.connected, #bluetooth.connected.pairable {
    color:#a9df11;
    background:linear-gradient(0deg, rgba(153, 207, 1, 0.5), 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);
}

#bluetooth.pairable:not(.connected), #bluetooth.discoverable {
    color:#5254fe;
    background:linear-gradient(0deg, rgba(108, 102, 218, 0.5), 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:#f4df23;
    background:linear-gradient(0deg, rgba(228, 207, 19, 0.5), 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);
}

Clock/Network

#custom-clock, #network {
    color:#ff4de7;
    background:linear-gradient(0deg, rgba(175, 56, 219, 0.5), rgba(0, 0, 0, 0.4));
    margin-left:0;
    margin-right:4px;
    padding-left:12px;
    padding-right:10px;
    border-radius:0px 40px 40px 0px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
    box-shadow:3px 3px rgba(175, 56, 219, 0.4);
}

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);
}

Wayfire Waybar Style

All

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

tooltip {
    border:none;
    outline:none;
    background:none;
    border-radius:0px;
    font-size:19px;
}

CPU

#cpu, #wireplumber.muted, #pulseaudio.muted, #privacy {
    color:#f63117;
    background:linear-gradient(180deg, rgba(206, 40, 40, 0.7), 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:#fef47f;
    background:linear-gradient(180deg, rgba(255, 176, 2, 0.8), rgba(0, 0, 0, 0.5));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    border-radius:40px 0px 0px 40px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

#pulseaudio.muted {
    margin-left:2px;
    padding-left:10px;
    padding-right:10px;
}

Memory/Backlight

#memory, #backlight {
    color:#1cd98b;
    background:linear-gradient(180deg, rgba(12, 201, 123, 0.8), 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, #idle_inhibitor, #pulseaudio.bluetooth, #temperature {
    color:#19ccee;
    background:linear-gradient(180deg, rgba(40, 137, 186, 0.8), rgba(0, 0, 0, 0.5));
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
}

#pulseaudio.bluetooth {
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:12px;
}

#battery, #temperature {
    border-radius:0px 40px 40px 0px;
    padding-left:10px;
    padding-right:12px;
    margin-left:0;
    margin-right:2px;
    box-shadow:3px 3px rgba(40, 137, 186, 0.5);
}

#battery.warning {
    color:#fef47f;
    border-radius:0px 40px 40px 0px;
    background:linear-gradient(180deg, rgba(255, 176, 2, 0.9), rgba(0, 0, 0, 0.5));
    margin-left:1px;
    margin-right:3px;
    box-shadow:3px 3px rgba(254, 175, 2, 0.5);
}

#battery.critical {
    color:#f63117;
    font-weight:bold;
    border-radius:0px 40px 40px 0px;
    background:linear-gradient(180deg, rgba(206, 40, 40, 0.8), rgba(0, 0, 0, 0.5));
    margin-left:2px;
    margin-right:4px;
    box-shadow:3px 3px rgba(255, 255, 255, 0.5);
}

#idle_inhibitor {
    border-radius:40px 0px 0px 40px;
    padding-left:11px;
    padding-right:10px;
    margin-left:2px;
    margin-right:0;
}

Bluetooth

#bluetooth.on, #bluetooth.off {
    color:#f63117;
    background:linear-gradient(180deg, rgba(206, 40, 40, 0.8), 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);
}

#bluetooth.connected, #bluetooth.connected.pairable {
    color:#1cd98b;
    background:linear-gradient(180deg, rgba(12, 201, 123, 0.8), 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);
}

#bluetooth.pairable:not(.connected), #bluetooth.discoverable {
    color:#19ccee;
    background:linear-gradient(180deg, rgba(40, 137, 186, 0.8), 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.7);
}

#bluetooth.discovering {
    color:#fef47f;
    background:linear-gradient(180deg, rgba(255, 176, 2, 0.8), rgba(0, 0, 0, 0.4));
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Taskbar

#taskbar button {
    background:linear-gradient(180deg, rgba(206, 40, 40, 0.8), rgba(0, 0, 0, 0.5));
    padding-left:12px;
    padding-right:11px;
    border-radius:40px 40px 40px 40px;
    border:0px solid transparent;
    color:#f63117;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    box-shadow:2px 2px rgba(206, 40, 40, 0.5);
    margin-left:4px;
    margin-right:4px;
}
#taskbar button:hover {
    padding-left:12px;
    padding-right:11px;
    border-radius:40px 40px 40px 40px;
    border:0px solid transparent;
    color:#fef47f;
    background:linear-gradient(180deg, rgba(255, 176, 2, 0.8), rgba(0, 0, 0, 0.5));
    text-shadow:2px 2px rgba(255, 176, 2, 0.5);
    box-shadow:2px 2px rgba(255, 176, 2, 0.5);
}
#taskbar button.maximized {
    color:#1cd98b;
    background:linear-gradient(180deg, rgba(12, 201, 123, 0.8), rgba(0, 0, 0, 0.5));
    box-shadow:2px 2px rgba(12, 201, 123, 0.5);
}
#taskbar button.minimized {
    color:#9b9b9b;
    background:linear-gradient(180deg, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.5));
    box-shadow:2px 2px rgba(70, 70, 70, 0.5);
}
#taskbar button.active {
    color:#19ccee;
    box-shadow:2px 2px rgba(40, 137, 186, 0.5);
    background:linear-gradient(180deg, rgba(40, 137, 186, 0.8), rgba(0, 0, 0, 0.5));
}
#taskbar button.maximized:hover {
    color:#e36ab1;
    background:linear-gradient(180deg, rgba(196, 105, 166, 0.8), rgba(0, 0, 0, 0.5));
    text-shadow:2px 2px rgba(196, 105, 166, 0.6);
    box-shadow:2px 2px rgba(196, 107, 169, 0.5);
}
#taskbar button.active:hover, #taskbar button.minimized:hover {
    color:#9aadf9;
    background:linear-gradient(180deg, rgba(144, 129, 246, 0.8), rgba(0, 0, 0, 0.5));
    text-shadow:2px 2px rgba(144, 129, 246, 0.6);
    box-shadow:2px 2px rgba(144, 129, 246, 0.5);
}

Clock/Network

#custom-clock, #clock, #network {
    color:#9aadf9;
    background:linear-gradient(180deg, rgba(144, 129, 246, 0.7), rgba(0, 0, 0, 0.4));
    margin-left:0;
    margin-right:2px;
    padding-left:11px;
    padding-right:13px;
    border-radius:0px 40px 40px 0px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    box-shadow:2px 2px rgba(144, 129, 246, 0.5);
}

Privacy

#privacy-item {
    padding-left:4px;
    padding-right:4px;
    background:linear-gradient(0deg, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.3));
}

MPD

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

Wireplumber

#wireplumber {
    border-radius:0px 0px 0px 0px;
    color:#e96ab1;
    background:linear-gradient(180deg, rgba(196, 105, 166, 0.8), rgba(0, 0, 0, 0.5));
    padding-left:12px;
    padding-right:11px;
    margin-left:0px;
    margin-right:0px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.5);
}

#wireplumber.muted {
    padding-left:12px;
    padding-right:11px;
}

Keyboard State

#keyboard-state {
    padding-left:8px;
    background:linear-gradient(180deg, rgba(225, 198, 84, 0.7), rgba(0, 0, 0, 0.4));
    border-radius:0px 40px 40px 0px;
    box-shadow:2px 2px rgba(225, 198, 84, 0.4);
    margin-right:2px;
}

#keyboard-state label {
    color:#f1d664;
    text-shadow:2px 2px rgba(0, 0, 0, 0.5);
}

#keyboard-state label.locked {
    color:#ffffff;
    text-shadow:2px 2px rgba(255, 0, 0, 0.5);
}

#image {
    background:none;
    border:none;
    color:black;
    box-shadow:2px 2px rgba(0, 0, 0, 0.3);
}

Hyprland Waybar Style

All

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

window {
    background:linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.0));
}

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:5px;
    color:#fdeadb;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    margin-top:2px;
}

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, #privacy {
    color:#e6727a;
    background:linear-gradient(0deg, rgba(238, 75, 80, 0.7), rgba(0, 0, 0, 0.2));
    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:#ffee60;
    background:linear-gradient(0deg, rgba(233, 212, 167, 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:#c3eb59;
    background:linear-gradient(0deg, rgba(201, 223, 146, 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;
    box-shadow:2px 2px rgba(201, 223, 146, 0.5);
}

Workspaces

#workspaces button, #tags button {
    background:linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2));
    padding-left:17px;
    padding-right:17px;
    margin-left:1px;
    margin-right:2px;
    border-radius:40px 40px 40px 40px;
    border:0px solid transparent;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    box-shadow:2px 2px rgba(0, 0, 0, 0.5);
    outline:0;
}

#workspaces button * {
    outline:0;
}

#workspaces button:hover, #tags button:hover {
    background:linear-gradient(0deg, rgba(238, 75, 80, 0.7), rgba(0, 0, 0, 0.2));
    text-shadow:inherit;
    margin-left:1px;
    margin-right:2px;
    border-radius:40px 40px 40px 40px;
    border:0px solid transparent;
    color:#bcbcbc;
    text-shadow:3px 3px rgba(238, 75, 80, 0.5);
    box-shadow:2px 2px rgba(238, 75, 80, 0.4);
}

#workspaces button.focused, #tags button.focused, #tags button.focused.occupied, #workspaces button.active {
    background:linear-gradient(0deg, rgba(201, 223, 146, 0.7), rgba(0, 0, 0, 0.2));
    box-shadow:2px 2px rgba(201, 223, 146, 0.5);
}

#workspaces button.focused label, #workspaces button.active label {
    color:#c3eb59;
}

#workspaces button.focused:hover, #tags button.focused:hover, #tags button.focused.occupied:hover, #workspaces button.active:hover {
    text-shadow:3px 3px rgba(201, 223, 146, 0.7);
}

#tags button.occupied {
    background:linear-gradient(0deg, rgba(201, 223, 146, 0.7), rgba(0, 0, 0, 0.2));
}

Battery

#battery, #idle_inhibitor, #pulseaudio.bluetooth, #temperature {
    color:#44bdda;
    background:linear-gradient(0deg, rgba(77, 119, 213, 0.7), rgba(0, 0, 0, 0.2));
    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:#cdab25;
    background:linear-gradient(0deg, rgba(233, 212, 167, 0.7), rgba(0, 0, 0, 0.2));
    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);
    box-shadow:2px 2px rgba(233, 212, 167, 0.6);
}

Keyboard State

#keyboard-state {
    background:linear-gradient(0deg, rgba(233, 212, 167, 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:12px;
    box-shadow:2px 2px rgba(233, 212, 167, 0.7);
}

#keyboard-state label {
    color:#ffee60;
    text-shadow:2px 2px rgba(0, 0, 0, 0.5);
}

#keyboard-state label.locked {
    color:#ffffff;
    text-shadow:2px 2px rgba(199, 60, 73, 0.5);
}

Network

#network {
   color:#d170cb;
   background:linear-gradient(0deg, rgba(196, 139, 155, 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);
   box-shadow:2px 2px rgba(196, 139, 155, 0.6);
}

Bluetooth

#bluetooth.on, #bluetooth.off, #bluetooth.disabled {
    color:#e6727a;
    background:linear-gradient(0deg, rgba(238, 75, 80, 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:#b3da49;
    background:linear-gradient(0deg, rgba(154, 176, 99, 0.7), rgba(0, 0, 0, 0.2));
    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:#54cdea;
    background:linear-gradient(0deg, rgba(77, 119, 213, 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:#ffee60;
    background:linear-gradient(0deg, rgba(233, 212, 167, 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);
}

Files

style.org

Latest commit

History

style.org

File metadata and controls

Waybar Style

Table of Contents

Sway Waybar Style

All

Window

MPD

CPU

Pulseaudio/Disk

Privacy

Memory/Backlight

Workspaces

Keyboard State

Battery

Bluetooth

Clock/Network

River Waybar Style

All

Title

MPD

CPU

Pulseaudio/Disk

Memory/Backlight

Workspaces

Battery

Clock

Network

Bluetooth

Wayfire Waybar Style

All

CPU

Pulseaudio/Disk

Memory/Backlight

Battery

Bluetooth

Taskbar

Clock/Network

Privacy

MPD

Wireplumber

Keyboard State

Hyprland Waybar Style

All

Title

MPD

CPU

Pulseaudio/Disk

Memory/Backlight

Workspaces

Battery

Clock

Keyboard State

Network

Bluetooth