Waybar Configuration

About
CONFIG
CSS
- Colors.css
- Style.css
FOOTNOTES

About

Personal Dracula theme for Waybar.

CONFIG

//-*- mode: jsonc -*-

Waybar Position

Define the location, width, and hieght of Waybar

"layer": "top", // Waybar at top layer
"position": "top", // Waybar position (top|bottom|left|right)
"height": 30, // Waybar height (to be removed for auto height)
// "width": 1280, // Waybar width
"spacing": 4, // Gaps between modules (4px)

Module Declaration

This section will name each module I want included on my Waybar; along with the location of each module.

Modules Left

Select the modules to show on the left portion of Waybar

"modules-left": [
       "clock",
       "custom/rofi",
       "tray",
       "hyprland/workspaces",
       "custom/media",
    "hyprland/submap"
   ],

Modules Center

Select the modules to show on the center portion of Waybar

"modules-center": [
    "hyprland/window"
],

Modules Right

Select the modules to show on the right portion of Waybar

"modules-right": [
    "idle_inhibitor",
    "backlight",
    "pulseaudio",
    "network",
    "temperature",
    "memory",
    "cpu",
    "power-profiles-daemon",
    "battery"
],

Module Definition

This section will include the module configuration for each module included in the Module Declation section.

Modules Left

Configuration for the clock module

"clock": {
    // "timezone": "America/New_York",
    "tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
    "format-alt": "{:%Y-%m-%d}"
},

Configuration for the custom rofi module

"custom/rofi": {
    "format": "󱓟",
    "on-click": "$HOME/dotfiles/waybar/scripts/rofi.sh",
    "signal": 6,
    "tooltip": false,
    "return-type": "json"
},

Configuration for the tray module

"tray": {
        // "icon-size": 21,
        "spacing": 10
    },

Configuration for the "hyprland/workspaces" module

"hyprland/workspaces": {
         "disable-scroll": false,
         "all-outputs": true,
         "warp-on-scroll": false,
         "format": "{name}: {icon}",
         "format-icons": {
             "1": "",
             "2": "",
             "3": "",
             "4": "",
             "5": "󰙯",
             "6": "",
             "urgent": "",
             "focused": "",
             "default": ""
         }
     },

Configuration for the "custom/media" module

"custom/media": {
        "format": "{0} {1}",
        "return-type": "json",
        "max-length": 20,
        "format-icons": {
            "spotify": "",
            "default": "🎜"
        },
        "escape": true,
        "on-click": "playerctl play-pause",         
        "exec": "$HOME/dotfiles/waybar/scripts/mediaplayer.py 2> /dev/null" // Script in resources folder
        // "exec": "$HOME/.config/waybar/scripts/mediaplayer.py --player spotify 2> /dev/null" // Filter player based on name
    },

Modules Center

Configuration for the "hyprland/window" module

Modules Right

Submap

"hyprland/submap": {
  "format": "Submap: {}"
},

I/O

Configuration for the idle_inhibitor module

"idle_inhibitor": {
        "format": "{icon}",
        "format-icons": {
            "activated": "",
            "deactivated": ""
        }
    },

Configuration for the backlight module

"backlight": {
        // "device": "acpi_video1",
        "format": "{percent}% {icon}",
        "format-icons": ["🌑", "🌘", "🌗", "🌖", "🌕"]
    },

Configuration for the pulseaudio module

"pulseaudio": {
        // "scroll-step": 1, // %, can be a float
        "format": "{volume}% {icon} {format_source}",
        "format-bluetooth": "{volume}% {icon} {format_source}",
        "format-bluetooth-muted": " {icon} {format_source}",
        "format-muted": " {format_source}",
        "format-source": "{volume}% ",
        "format-source-muted": "",
        "format-icons": {
            "headphone": "",
            "hands-free": "",
            "headset": "",
            "phone": "",
            "portable": "",
            "car": "",
            "default": ["", "", ""]
        },
        "on-click": "pavucontrol"
    },

Configuration for the network module

"network": {
        // "interface": "wlp2*", // (Optional) To force the use of this interface
        "format-wifi": "{essid} ({signalStrength}%) ",
        "format-ethernet": "{ipaddr}/{cidr} ",
        "tooltip-format": "{ifname} via {gwaddr} ",
        "format-linked": "{ifname} (No IP) ",
        "format-disconnected": "Disconnected ⚠",
        //"format-alt": "{ifname}: {ipaddr}/{cidr}",
        "on-click": "kitty -e nmtui"
    },

Monitoring

Configuration for the temperature module

"temperature": {
    // "thermal-zone": 2,
    // "hwmon-path": "/sys/class/hwmon/hwmon2/temp1_input",
    "critical-threshold": 80,
    // "format-critical": "{temperatureC}°C {icon}",
    "format": "{temperatureC}°C {icon}",
    "format-icons": ["", "", ""]
},

Configuration for the memory module

"memory": {
        "format": "{}% "
    },

Configuration for the cpu module

"cpu": {
       "format": "{usage}% ",
       "tooltip": false
   },

Configuration for the power profiles daemon module

"power-profiles-daemon": {
      "format": "{icon}",
      "tooltip-format": "Power profile: {profile}\nDriver: {driver}",
      "tooltip": true,
      "format-icons": {
        "default": "",
        "performance": "",
        "balanced": "",
        "power-saver": ""
      }
    },

Configuration for the battery module

"battery": {
        "states": {
            "good": 95,
            "warning": 30,
            "critical": 15
        },
        "format": "{capacity}% {icon}",
        "format-full": "{capacity}% {icon}",
        "format-charging": "{capacity}% ",
        "format-plugged": "{capacity}% ",
        "format-alt": "{time} {icon}",
        //"format-good": "", // An empty format will hide the module
        "format-full": "",
        "format-icons": ["", "", "", "", ""]
    },
    "battery#bat2": {
        "bat": "BAT2"
    }

  }  
//]

Un-used Modules

This section includes modules from the default Waybar configuration file which I do not use. These modules are placed here for reference only, and are not used in my running configuration.

"keyboard-state": {
         "numlock": true,
         "capslock": true,
         "format": "{name} {icon}",
         "format-icons": {
             "locked": "",
             "unlocked": ""
         }
     },

"sway/mode": {
    "format": "<span style=\"italic\">{}</span>"
},

"sway/scratchpad": {
    "format": "{icon} {count}",
    "show-empty": false,
    "format-icons": ["", ""],
    "tooltip": true,
    "tooltip-format": "{app}: {title}"
},

"mpd": {
       "format": "{stateIcon} {consumeIcon}{randomIcon}{repeatIcon}{singleIcon}{artist} - {album} - {title} ({elapsedTime:%M:%S}/{totalTime:%M:%S}) ⸨{songPosition}|{queueLength}⸩ {volume}% ",
        "format-disconnected": "Disconnected ",
        "format-stopped": "{consumeIcon}{randomIcon}{repeatIcon}{singleIcon}Stopped ",
        "unknown-tag": "N/A",
        "interval": 5,
        "consume-icons": {
                         "on": " "
        },
        "random-icons": {
                "off": "<span color=\"#f53c3c\"></span> ",
                "on": " "
        },
        "repeat-icons": {
                "on": " "
        },
        "single-icons": {
                "on": "1 "
        },
        "state-icons": {
                "paused": "",
                "playing": ""
        },
        "tooltip-format": "MPD (connected)",
        "tooltip-format-disconnected": "MPD (disconnected)"
},

"custom/power": {
        "format" : "⏻ ",
                "tooltip": false,
                "menu": "on-click",
                "menu-file": "$HOME/.config/waybar/power_menu.xml", // Menu file in resources folder
                "menu-actions": {
                        "shutdown": "shutdown",
                        "reboot": "reboot",
                        "suspend": "systemctl suspend",
                        "hibernate": "systemctl hibernate"
                }
    }
}

CSS

there are two files used to style waybar using CSS.

Colors.css

This file defines all the colors I will use to style Waybar

Style.css

This file uses the colors from colors.css to style the modules of Waybar to whatever look I want.

Import colors from `colors.css`

Before I can style anything in the style.css file; I need to imprt the pre-difined colors from colors.css

@import url("./colors.css");

Global Styling

Set the font, and font size globally

 * {
    font-family: 'Noto Sans Mono', 'Font Awesome 6 Free', 'Font Awesome 6 Brands', monospace;
    font-size: 13px;
}

Window

window#waybar {
    background-color: @background-darker;
    border-bottom: 3px solid @background;
    color: @foreground;
    transition-property: background-color;
    transition-duration: .5s;
}

window#waybar.hidden {
    opacity: 0.2;
}

Button

button {
    /* Use box-shadow instead of border so the text isn't offset */
    box-shadow: inset 0 -3px transparent;
    /* Avoid rounded borders under each button name */
    border: none;
    border-radius: 0;
}

/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
button:hover {
    background: inherit;
    box-shadow: inset 0 -3px @pink;
}

Module Styling

Hover Rules

#pulseaudio:hover {
    background-color: @yellow;
    padding: 1px 6px;
}

#network:hover {
    background-color: @yellow;
    padding: 1px 6px;
}
/* #workspaces button {
    padding: 0 5px;
    background-color: transparent;
    color: @foreground;
}*/

Mode

styling for submodes like window resizing or screenshot menus. I don't use this on Hyprland, but do on SwayWM.


#mode {
    background-color: @comment;
    box-shadow: inset 0 -3px @foreground;
}


#cpu,
#memory,
#pulseaudio,
#wireplumber,
#idle_inhibitor,
#power-profiles-daemon,
#mpd {
    padding: 0 10px;
    color: @foreground;
}

#window,

Workspaces

#workspaces {
    margin: 0 4px;
    color: @foreground;
}

#workspaces button.active {
    background-color: @background;
    color: @forground;
    box-shadow: inset 0 -3px @purple;
} 
#workspaces button:hover {
    background: @selection;
    color: @forground;
    box-shadow: inset 0 -3px @yellow
}

#workspaces button.focused {
    background-color: @purple;
    box-shadow: inset 0 -3px @foreground;
}


#workspaces button.urgent {
    background-color: @red;
}
/* If workspaces is the leftmost module, omit left margin */
.modules-left > widget:first-child > #workspaces {
    margin-left: 0;
}

/* If workspaces is the rightmost module, omit right margin */
.modules-right > widget:last-child > #workspaces {
    margin-right: 0;
}

Clock

#clock {
    padding: 1px 8px;
    background-color: @background;
    color: @green;
}

Battery

#battery {
    background-color: @cyan;
    color: @background-darker;
    padding: 1px 10px;
}

#battery.charging, #battery.plugged {
    color: @background-darker;
    background-color: @green;
}

@keyframes blink {
    to {
        background-color: #ffffff;
        color: #000000;
    }
}

/* Using steps() instead of linear as a timing function to limit cpu usage */
#battery.critical:not(.charging) {
    background-color: @red;
    color: @foreground;
    animation-name: blink;
    animation-duration: 0.5s;
    animation-timing-function: steps(12);
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

#power-profiles-daemon {
    padding-right: 15px;
}

#power-profiles-daemon.performance {
    background-color: @red;
    color: @background-darker;
}

#power-profiles-daemon.balanced {
    background-color: @comment;
    color: @foreground;
}

#power-profiles-daemon.power-saver {
    background-color: @green;
    color: @background-darker;
}

label:focus {
    background-color: #000000;
}

CPU

#cpu {
    background-color: @background-darker;
    color: @green;
}

#cpu:hover {
    background-color: @green;
    color: @background-darker;
}

Memory

#memory {
    background-color: @background-darker;
    color: @purple;
}

#memory:hover {
    background-color: @purple;
    color: @background-darker;

}

#disk {
    background-color: @background-color;
    color: @purple;
}

#disk:hover {
    background-color: @purple;
    color: @background-darker;

}

Backlight

#backlight {
    color: @yellow;
    background-color: @background-darker;
    padding: 1px 3px;
}

#backlight:hover {
    color: @background-darker;
    background-color: @yellow;
    padding: 1px 3px;
}

Network

#network {
    background-color: @purple;
    color: @background-darker; 
    padding: 1px 6px;
}

#network.disconnected {
    background-color: @red;
    padding: 1px 6px;
}

Audio

#pulseaudio {
    background-color: @comment;
    color: @background;
    padding: 1px 6px;
}

#pulseaudio.muted {
    background-color: @red;
    color: @background-darker;
    padding: 1px 6px;
}

#wireplumber {
    background-color: @foreground;
    color: #000000;
}

#wireplumber.muted {
    background-color: #f53c3c;
}

Custom Modules

Media

#custom-media {
    background-color: @background-darker;
    color: @foreground;
    min-width: 50px;
    border-bottom: 3px solid @purple;
    padding: 1px 3px;
}

#custom-media.custom-spotify {
    background-color: @background;
    color: @green;
    padding: 1px 3px;
}

#custom-media.custom-vlc {
    color: #ffa000;
    padding: 1px 3px;
}

#custom-media.custom-mpv {
    color: @purple;
    padding: 1px 3px;
}

Rofi

 #custom-rofi {
    background-color: @background;
    color: @foreground;
    padding: 1px 6px;
}

Temperature

#temperature {
    color: @orange;
    background-color: @background-darker;
    padding: 1px 3px;
}
#temperature:hover {
    background-color: @orange;
    color: @background-darker;
    padding: 1px 3px;
}

#temperature.critical {
    color: @red;
    background-color: @background-darker;
    padding: 1px 3px;
}

#temperature.critical:hover {
    background-color: @red;
    color: @background-darker;
}

Tray

#tray {
    background-color: @background;
    padding: 1px 6px;
}

#tray > .passive {
    -gtk-icon-effect: dim;
}

#tray > .needs-attention {
    -gtk-icon-effect: highlight;
    background-color: @red;
}

Idle Inhibitor

#idle_inhibitor {
    background-color: @selection;
}

#idle_inhibitor.activated {
    background-color: @foreground;
    color: @selection;
}

Privacy

#privacy {
    padding: 0;
}

#privacy-item {
    padding: 0 5px;
    color: white;
}

#privacy-item.screenshare {
    background-color: #cf5700;
}

#privacy-item.audio-in {
    background-color: #1ca000;
}

#privacy-item.audio-out {
    background-color: #0069d4;
}

FOOTNOTES

specify the background color, and font color fo source code blocks

Specify the background color of code blocks. In my case these somewhat interchangable with regualar quotes, as most of the extensive code is placed in source code blocks.

Waybar Configuration

Table of Contents

About

CONFIG

Waybar Position

Module Declaration

Modules Left

Modules Center

Modules Right

Module Definition

Modules Left

Modules Center

Modules Right

Un-used Modules

CSS

Colors.css

Style.css

Import colors from colors.css

Global Styling

Module Styling

FOOTNOTES

Import colors from `colors.css`