Waybar style

config

{
	// "layer": "top", // Waybar at top layer
	// "position": "bottom", // Waybar position (top|bottom|left|right)
	// "height": 14, // Waybar height (to be removed for auto height)
	// "width": 1280, // Waybar width

	// Choose the order of the modules
	"modules-left": ["sway/workspaces", "sway/mode"],
	// "modules-center": ["sway/window"],
	"modules-right": ["custom/arch_update", "custom/disk_home", "custom/disk_root","temperature", "cpu", "memory", "custom/mail", "network", "backlight", "pulseaudio", "clock", "battery", "idle_inhibitor", "tray"],

	// Modules configuration
	// "sway/workspaces": {
	// 	"disable-scroll": true,
	// 	"all-outputs": true,
	// 	"format": "{name}: {icon}",
	// 	"format-icons": {
	// 		"1": "",
	// 		"2": "",
	// 		"3": "",
	// 		"4": "",
	// 		"5": "",
	// 		"urgent": "",
	// 		"focused": "",
	// 		"default": ""
	// 	}
	// },
	"sway/mode": {
		"format": "{}"
	},
	"custom/arch_update": {
		"format": "<span color='#589df6'></span>{}",
		"interval": 30,
		"exec": "~/.config/i3blocks/bin/arch_update.py -b '#e4e4e4' -u '#e4e4e4' -q"
	},
	"custom/disk_home": {
		"format": "🏠 {} ",
		"interval": 30,
		"exec": "df -h --output=avail $HOME | tail -1 | tr -d ' '"
	},
	"custom/disk_root": {
		"format": "💽 {} ",
		"interval": 30,
		"exec": "df -h --output=avail / | tail -1 | tr -d ' '"
	},
	"temperature": {
		// "thermal-zone": 2,
		// "hwmon-path": "/sys/class/hwmon/hwmon2/temp1_input",
		"critical-threshold": 80,
		// "format-critical": "{temperatureC}°C {icon}",
		"format": "<span color='#e88939'>{icon}</span> {temperatureC}°C",
		"format-icons": ["", "", ""]
	},
	"cpu": {
		"format": "🏭 {usage}%",
		"tooltip": false
	},
	"memory": {
		"format": "💾 {used:0.1f}G"
	},
	"custom/mail": {
		"format": "📩{}",
		"interval": 30,
		"exec": "notmuch count tag:flagged OR tag:inbox AND NOT tag:killed"
	},
	"network": {
		"family": "ipv6",
		// "interface": "wlp2*", // (Optional) To force the use of this interface
		"format-wifi": "<span color='#589df6'></span> <span color='gray'>{essid}</span> {frequency} <span color='#589df6'>{signaldBm} dB</span> <span color='#589df6'>⇵</span> {bandwidthUpBits}/{bandwidthDownBits}",
		"format-ethernet": "{ifname}: {ipaddr}/{cidr} ",
		"format-linked": "{ifname} (No IP) ",
		"format-disconnected": "Disconnected ⚠",
		"format-alt": "{ifname}: {ipaddr}/{cidr}",
		"interval": 5
	},
	"backlight": {
		// "device": "acpi_video1",
		"format": "{icon} {percent}%",
		"format-icons": ["🔅", "🔆"]
	},
	"pulseaudio": {
		// "scroll-step": 1, // %, can be a float
		"format": "{icon} {volume}% {format_source}",
		"format-muted": "🔇 {format_source}",
		"format-bluetooth": "{icon} {volume}% {format_source}",
		"format-bluetooth-muted": "🔇 {format_source}",

		"format-source": " {volume}%",
		"format-source-muted": "",

		"format-icons": {
			"headphones": "",
			"handsfree": "",
			"headset": "",
			"phone": "",
			"portable": "",
			"car": "",
			"default": ["🔈", "🔉", "🔊"]
		},
		"on-click": "ponymix -N -t sink toggle",
		"on-click-right": "ponymix -N -t source toggle"
	},
	"clock": {
		"interval": 1,
		"format": "⏰ {:%H:%M:%S}",
		"tooltip-format": "{:%Y-%m-%d | %H:%M:%S}"
		// "format-alt": "{:%Y-%m-%d}"
	},
	"battery": {
		"states": {
			// "good": 95,
			"warning": 20,
			"critical": 10
		},
		"format": "<span color='#e88939'>{icon}</span> {capacity}% ({time})",
		"format-charging": "<span color='#e88939'> </span> {capacity}%",
		"format-plugged":  "<span color='#e88939'>{icon} </span> {capacity}% ({time})",
		// "format-good": "", // An empty format will hide the module
		// "format-full": "",
		"format-icons": ["", "", "", "", ""]
	},
	"battery#bat2": {
		"bat": "BAT2"
	},
	"idle_inhibitor": {
		"format": "<span color='#589df6'>{icon}</span>",
		"format-icons": {
			"activated": "",
			"deactivated": ""
		},
		"on-click-right": "swaylock -eFfki ~/.config/lockscreen-origin.png"
	},
	"tray": {
		// "icon-size": 21,
		"spacing": 10
	},
    "custom/media": {
        "format": "{icon} {}",
        "return-type": "json",
        "max-length": 40,
        "format-icons": {
            "spotify": "",
            "default": "🎜"
        },
        "escape": true,
        "exec": "$HOME/.config/waybar/mediaplayer.py 2> /dev/null" // Script in resources folder
        // "exec": "$HOME/.config/waybar/mediaplayer.py --player spotify 2> /dev/null" // Filter player based on name
    },
    "mpd": {
        "format": "{stateIcon} {consumeIcon}{randomIcon}{repeatIcon}{singleIcon}{artist} - {album} - {title} ({elapsedTime:%M:%S}/{totalTime:%M:%S}) ",
        "format-disconnected": "Disconnected ",
        "format-stopped": "{consumeIcon}{randomIcon}{repeatIcon}{singleIcon}Stopped ",
        "unknown-tag": "N/A",
        "interval": 2,
        "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)"
    }
}

style.css

* {
	border: none;
	border-radius: 0;
	font-family: "monospace";
	font-size: 9px;
	min-height: 0;
	margin: 0px;
}

window#waybar {
	/*background: #000000;*/
	background: rgba(0, 0, 0, 0.7);
	color: gray;
	color: #ffffff;
}

#window {
	color: #e4e4e4;
	font-weight: bold;
}

#workspaces {
	padding: 0px;
	margin: 0px;
}

#workspaces button {
	padding: 0 2px;
	margin: 0px;
	background: transparent;
	color: #ff8700;
	/*
	color: #00afd7;
	color: #ffffff;
	border: 1px solid #00afd7;
	*/
	border: 1px solid #1b1d1e;
	font-weight: bold;
}
#workspaces button:hover {
	box-shadow: inherit;
	text-shadow: inherit;
}

#workspaces button.focused {
	background: #e88939;
	background: #00afd7;
	color: #1b1d1e;
}

#workspaces button.urgent {
	background: #af005f;
	color: #1b1d1e;
}

#mode {
	background: #af005f;
	color: #1b1d1e;
}
#clock, #battery, #cpu, #memory, #network, #pulseaudio, #custom-spotify, #tray, #mode {
	padding: 0 3px;
	margin: 0 2px;
}

#clock {
}

#battery {
}

#battery icon {
    color: red;
}

#battery.charging {
}

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

#battery.warning:not(.charging) {
	background-color: #ff8700;
	color: #1b1d1e;
}
#battery.critical:not(.charging) {
    color: white;
    animation-name: blink;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

#cpu {
}

#memory {
}

#network {
}

#network.disconnected {
    background: #f53c3c;
}

#pulseaudio {
}

#pulseaudio.muted {
}

#custom-spotify {
    color: rgb(102, 220, 105);
}

#tray {
}