Customize Waybar with Catppuccin theme
This commit is contained in:
Fabio Scotto di Santolo
@@ -1,73 +1,132 @@
|
|||||||
{
|
{
|
||||||
"layer": "top",
|
"layer": "top", // Waybar at top layer
|
||||||
"position": "top",
|
"position": "top", // Waybar position (top|bottom|left|right)
|
||||||
"height": 32,
|
// "width": 1280, // Waybar width
|
||||||
"spacing": 4,
|
// Choose the order of the modules
|
||||||
"exclusive": true,
|
|
||||||
"gtk-layer-shell": true,
|
|
||||||
"passthrough": false,
|
|
||||||
"fixed-center": true,
|
|
||||||
"modules-left": [
|
"modules-left": [
|
||||||
"hyprland/workspaces",
|
"hyprland/workspaces",
|
||||||
"hyprland/window"
|
"hyprland/window"
|
||||||
],
|
],
|
||||||
"modules-center": [
|
"modules-center": [
|
||||||
"custom/spotify"
|
"clock"
|
||||||
],
|
],
|
||||||
"modules-right": [
|
"modules-right": [
|
||||||
"cpu",
|
|
||||||
"memory",
|
|
||||||
"pulseaudio",
|
"pulseaudio",
|
||||||
"clock",
|
|
||||||
"clock#simpleclock",
|
|
||||||
"tray",
|
"tray",
|
||||||
|
"bluetooth",
|
||||||
|
"battery",
|
||||||
"custom/power"
|
"custom/power"
|
||||||
],
|
],
|
||||||
"custom/spotify": {
|
"hyprland/workspaces": {
|
||||||
"format": "{}",
|
"disable-scroll": true,
|
||||||
"return-type": "json",
|
"disable-markup": false,
|
||||||
"on-click": "playerctl -p spotify play-pause",
|
|
||||||
"on-click-right": "spotifatius toggle-liked",
|
|
||||||
"on-click-middle": "playerctl -p spotify next",
|
|
||||||
"exec": "spotifatius monitor"
|
|
||||||
},
|
|
||||||
"wlr/workspaces": {
|
|
||||||
"on-click": "activate",
|
|
||||||
"format": "{name}",
|
|
||||||
"all-outputs": true,
|
"all-outputs": true,
|
||||||
"disable-scroll": false,
|
"format": " {icon} ",
|
||||||
"active-only": false
|
"on-click": "activate",
|
||||||
|
"sort-by-number": true,
|
||||||
|
"format-icons": {
|
||||||
|
"1": "",
|
||||||
|
"2": "",
|
||||||
|
"3": "",
|
||||||
|
"4": "",
|
||||||
|
"5": "",
|
||||||
|
"urgent": "",
|
||||||
|
"active": "",
|
||||||
|
"default": ""
|
||||||
|
},
|
||||||
|
"persistent-workspaces": {
|
||||||
|
"1": [
|
||||||
|
"HDMI-A-1"
|
||||||
|
],
|
||||||
|
"2": [
|
||||||
|
"HDMI-A-1"
|
||||||
|
],
|
||||||
|
"3": [
|
||||||
|
"HDMI-A-1"
|
||||||
|
],
|
||||||
|
"4": [
|
||||||
|
"HDMI-A-1"
|
||||||
|
],
|
||||||
|
"5": [
|
||||||
|
"HDMI-A-1"
|
||||||
|
],
|
||||||
|
"6": [
|
||||||
|
"HDMI-A-1"
|
||||||
|
],
|
||||||
|
"7": [
|
||||||
|
"HDMI-A-1"
|
||||||
|
],
|
||||||
|
"8": [
|
||||||
|
"HDMI-A-1"
|
||||||
|
],
|
||||||
|
"9": [
|
||||||
|
"HDMI-A-1"
|
||||||
|
],
|
||||||
|
"10": [
|
||||||
|
"eDP-1"
|
||||||
|
]
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"tray": {
|
"tray": {
|
||||||
"show-passive-items": true,
|
"icon-size": 24,
|
||||||
"spacing": 10
|
"spacing": 5
|
||||||
},
|
},
|
||||||
"clock#simpleclock": {
|
"custom/spotify": {
|
||||||
|
"format": " {}",
|
||||||
|
"escape": true,
|
||||||
|
"interval": 5,
|
||||||
"tooltip": false,
|
"tooltip": false,
|
||||||
"format": " {:%H:%M}"
|
"exec": "playerctl metadata --format='{{ title }}'",
|
||||||
|
"on-click": "playerctl play-pause",
|
||||||
|
"max-length": 50
|
||||||
},
|
},
|
||||||
"clock": {
|
"clock": {
|
||||||
"format": " {:L%a %d %b}",
|
"timezone": "Europe/Rome",
|
||||||
"tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>"
|
"tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
|
||||||
|
"format-alt": "{:%d/%m/%Y}",
|
||||||
|
"format": "{:%a %b %d %I:%M %p}"
|
||||||
},
|
},
|
||||||
"cpu": {
|
"backlight": {
|
||||||
"format": " {usage}%",
|
"device": "intel_backlight",
|
||||||
"tooltip": true,
|
"format": "{icon} {percent}%",
|
||||||
"interval": 1
|
"format-icons": [
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
""
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"memory": {
|
"battery": {
|
||||||
"format": " {used:0.2f}G"
|
"states": {
|
||||||
|
"warning": 30,
|
||||||
|
"critical": 15
|
||||||
|
},
|
||||||
|
"format": "{icon} {capacity}%",
|
||||||
|
"format-charging": "",
|
||||||
|
"format-plugged": "",
|
||||||
|
"format-alt": "{icon}",
|
||||||
|
"format-icons": [
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
""
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"pulseaudio": {
|
"pulseaudio": {
|
||||||
|
// "scroll-step": 1, // %, can be a float
|
||||||
"format": "{icon} {volume}%",
|
"format": "{icon} {volume}%",
|
||||||
"format-muted": " muted",
|
"format-muted": "",
|
||||||
"format-icons": {
|
"format-icons": {
|
||||||
"headphone": " ",
|
|
||||||
"hands-free": "",
|
|
||||||
"headset": "",
|
|
||||||
"phone": "",
|
|
||||||
"portable": "",
|
|
||||||
"car": "",
|
|
||||||
"default": [
|
"default": [
|
||||||
"",
|
"",
|
||||||
"",
|
"",
|
||||||
@@ -76,17 +135,24 @@
|
|||||||
},
|
},
|
||||||
"on-click": "pavucontrol"
|
"on-click": "pavucontrol"
|
||||||
},
|
},
|
||||||
"custom/logo": {
|
"custom/lock": {
|
||||||
"format": "",
|
"tooltip": false,
|
||||||
"tooltip": false
|
"on-click": "sh -c '(sleep 0.5s; swaylock --grace 0)' & disown",
|
||||||
},
|
"format": ""
|
||||||
"custom/sep": {
|
|
||||||
"format": "|",
|
|
||||||
"tooltip": false
|
|
||||||
},
|
},
|
||||||
"custom/power": {
|
"custom/power": {
|
||||||
"tooltip": false,
|
"tooltip": false,
|
||||||
"on-click": "wlogout -p layer-shell &",
|
"on-click": "wlogout &",
|
||||||
"format": "⏻ "
|
"format": ""
|
||||||
|
},
|
||||||
|
"bluetooth": {
|
||||||
|
"format": " {status}",
|
||||||
|
"format-connected": " {device_alias}",
|
||||||
|
"format-connected-battery": " {device_alias} {device_battery_percentage}%",
|
||||||
|
"format-off": "", // "format-device-preference": [ "device1", "device2" ], // preference list deciding the displayed device
|
||||||
|
"tooltip-format": "{controller_alias}\t{controller_address}\n\n{num_connections} connected",
|
||||||
|
"tooltip-format-connected": "{controller_alias}\t{controller_address}\n\n{num_connections} connected\n\n{device_enumerate}",
|
||||||
|
"tooltip-format-enumerate-connected": "{device_alias}\t{device_address}",
|
||||||
|
"tooltip-format-enumerate-connected-battery": "{device_alias}\t{device_address}\t{device_battery_percentage}%"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,143 +1,103 @@
|
|||||||
|
@import "themes/frappe.css";
|
||||||
|
|
||||||
* {
|
* {
|
||||||
|
font-family: FiraCode Nerd Font;
|
||||||
|
font-size: 17px;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
font-family: Lexend, "Font Awesome 6 Free Solid";
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
window#waybar {
|
#waybar {
|
||||||
transition-property: background-color;
|
background: transparent;
|
||||||
transition-duration: 0.5s;
|
color: @text;
|
||||||
/* background-color: #1e1e2e; */
|
margin: 5px 5px;
|
||||||
/* background-color: #181825; */
|
|
||||||
background-color: rgba(24, 24, 37, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
window#waybar.hidden {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#workspaces {
|
#workspaces {
|
||||||
background-color: transparent;
|
border-radius: 1rem;
|
||||||
|
margin: 5px;
|
||||||
|
background-color: @surface0;
|
||||||
|
margin-left: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workspaces button {
|
#workspaces button {
|
||||||
all: initial;
|
color: @lavender;
|
||||||
min-width: 0;
|
border-radius: 1rem;
|
||||||
box-shadow: inset 0 -3px transparent;
|
padding: 0.4rem;
|
||||||
padding: 2px 10px;
|
|
||||||
min-height: 0;
|
|
||||||
margin: 4px 4px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: #181825;
|
|
||||||
color: #cdd6f4;
|
|
||||||
}
|
|
||||||
|
|
||||||
#workspaces button:hover {
|
|
||||||
box-shadow: inherit;
|
|
||||||
text-shadow: inherit;
|
|
||||||
color: #1e1e2e;
|
|
||||||
background-color: #cdd6f4;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#workspaces button.active {
|
#workspaces button.active {
|
||||||
color: #1e1e2e;
|
color: @sky;
|
||||||
background-color: #89b4fa;
|
border-radius: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workspaces button.urgent {
|
#workspaces button:hover {
|
||||||
background-color: #f38ba8;
|
color: @sapphire;
|
||||||
|
border-radius: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#clock,
|
#custom-music,
|
||||||
#pulseaudio,
|
|
||||||
#custom-logo,
|
|
||||||
#custom-power,
|
|
||||||
#custom-spotify,
|
|
||||||
#cpu,
|
|
||||||
#tray,
|
#tray,
|
||||||
#memory,
|
#backlight,
|
||||||
#window {
|
#bluetooth,
|
||||||
min-height: 0;
|
#clock,
|
||||||
padding: 2px 10px;
|
#battery,
|
||||||
border-radius: 8px;
|
#pulseaudio,
|
||||||
margin: 4px 4px;
|
#custom-lock,
|
||||||
background-color: #181825;
|
#custom-power {
|
||||||
}
|
background-color: @surface0;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
#custom-sep {
|
margin: 5px 0;
|
||||||
padding: 0px;
|
|
||||||
color: #585b70;
|
|
||||||
}
|
|
||||||
|
|
||||||
#custom-spotify.playing {
|
|
||||||
color: #cdd6f4;
|
|
||||||
}
|
|
||||||
|
|
||||||
#custom-spotify.liked {
|
|
||||||
color: #f9e2af;
|
|
||||||
}
|
|
||||||
#custom-spotify.added {
|
|
||||||
color: #cba6f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
#custom-spotify.removed {
|
|
||||||
color: #f38ba8;
|
|
||||||
}
|
|
||||||
|
|
||||||
#custom-spotify.paused {
|
|
||||||
color: #9399b2;
|
|
||||||
}
|
|
||||||
|
|
||||||
window#waybar.empty #window {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
#cpu {
|
|
||||||
color: #94e2d5;
|
|
||||||
}
|
|
||||||
|
|
||||||
#memory {
|
|
||||||
color: #cba6f7;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#clock {
|
#clock {
|
||||||
color: #74c7ec;
|
color: @blue;
|
||||||
|
border-radius: 0px 1rem 1rem 0px;
|
||||||
|
margin-right: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#clock.simpleclock {
|
#battery {
|
||||||
color: #89b4fa;
|
color: @green;
|
||||||
}
|
}
|
||||||
|
|
||||||
#window {
|
#battery.charging {
|
||||||
color: #a6e3a1;
|
color: @green;
|
||||||
|
}
|
||||||
|
|
||||||
|
#battery.warning:not(.charging) {
|
||||||
|
color: @red;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bluetooth {
|
||||||
|
color: @blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bluetooth, #battery {
|
||||||
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#pulseaudio {
|
#pulseaudio {
|
||||||
color: #b4befe;
|
color: @maroon;
|
||||||
|
border-radius: 1rem 0px 0px 1rem;
|
||||||
|
margin-left: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#pulseaudio.muted {
|
#clock, #custom-music {
|
||||||
color: #a6adc8;
|
color: @mauve;
|
||||||
|
border-radius: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#custom-logo {
|
#custom-lock {
|
||||||
color: #89b4fa;
|
border-radius: 1rem 0px 0px 1rem;
|
||||||
|
color: @lavender;
|
||||||
}
|
}
|
||||||
|
|
||||||
#custom-power {
|
#custom-power {
|
||||||
color: #f38ba8;
|
margin-right: 1rem;
|
||||||
padding-right: 5px;
|
border-radius: 0px 1rem 1rem 0px;
|
||||||
font-size: 14px;
|
color: @red;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes blink {
|
#tray {
|
||||||
to {
|
margin-right: 1rem;
|
||||||
background-color: #f38ba8;
|
border-radius: 1rem;
|
||||||
color: #181825;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
tooltip {
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
}
|
||||||
|
|||||||
26
waybar/dot-config/waybar/themes/frappe.css
Normal file
26
waybar/dot-config/waybar/themes/frappe.css
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
@define-color rosewater #f2d5cf;
|
||||||
|
@define-color flamingo #eebebe;
|
||||||
|
@define-color pink #f4b8e4;
|
||||||
|
@define-color mauve #ca9ee6;
|
||||||
|
@define-color red #e78284;
|
||||||
|
@define-color maroon #ea999c;
|
||||||
|
@define-color peach #ef9f76;
|
||||||
|
@define-color yellow #e5c890;
|
||||||
|
@define-color green #a6d189;
|
||||||
|
@define-color teal #81c8be;
|
||||||
|
@define-color sky #99d1db;
|
||||||
|
@define-color sapphire #85c1dc;
|
||||||
|
@define-color blue #8caaee;
|
||||||
|
@define-color lavender #babbf1;
|
||||||
|
@define-color text #c6d0f5;
|
||||||
|
@define-color subtext1 #b5bfe2;
|
||||||
|
@define-color subtext0 #a5adce;
|
||||||
|
@define-color overlay2 #949cbb;
|
||||||
|
@define-color overlay1 #838ba7;
|
||||||
|
@define-color overlay0 #737994;
|
||||||
|
@define-color surface2 #626880;
|
||||||
|
@define-color surface1 #51576d;
|
||||||
|
@define-color surface0 #414559;
|
||||||
|
@define-color base #303446;
|
||||||
|
@define-color mantle #292c3c;
|
||||||
|
@define-color crust #232634;
|
||||||
26
waybar/dot-config/waybar/themes/latte.css
Normal file
26
waybar/dot-config/waybar/themes/latte.css
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
@define-color rosewater #dc8a78;
|
||||||
|
@define-color flamingo #dd7878;
|
||||||
|
@define-color pink #ea76cb;
|
||||||
|
@define-color mauve #8839ef;
|
||||||
|
@define-color red #d20f39;
|
||||||
|
@define-color maroon #e64553;
|
||||||
|
@define-color peach #fe640b;
|
||||||
|
@define-color yellow #df8e1d;
|
||||||
|
@define-color green #40a02b;
|
||||||
|
@define-color teal #179299;
|
||||||
|
@define-color sky #04a5e5;
|
||||||
|
@define-color sapphire #209fb5;
|
||||||
|
@define-color blue #1e66f5;
|
||||||
|
@define-color lavender #7287fd;
|
||||||
|
@define-color text #4c4f69;
|
||||||
|
@define-color subtext1 #5c5f77;
|
||||||
|
@define-color subtext0 #6c6f85;
|
||||||
|
@define-color overlay2 #7c7f93;
|
||||||
|
@define-color overlay1 #8c8fa1;
|
||||||
|
@define-color overlay0 #9ca0b0;
|
||||||
|
@define-color surface2 #acb0be;
|
||||||
|
@define-color surface1 #bcc0cc;
|
||||||
|
@define-color surface0 #ccd0da;
|
||||||
|
@define-color base #eff1f5;
|
||||||
|
@define-color mantle #e6e9ef;
|
||||||
|
@define-color crust #dce0e8;
|
||||||
26
waybar/dot-config/waybar/themes/macchiato.css
Normal file
26
waybar/dot-config/waybar/themes/macchiato.css
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
@define-color rosewater #f4dbd6;
|
||||||
|
@define-color flamingo #f0c6c6;
|
||||||
|
@define-color pink #f5bde6;
|
||||||
|
@define-color mauve #c6a0f6;
|
||||||
|
@define-color red #ed8796;
|
||||||
|
@define-color maroon #ee99a0;
|
||||||
|
@define-color peach #f5a97f;
|
||||||
|
@define-color yellow #eed49f;
|
||||||
|
@define-color green #a6da95;
|
||||||
|
@define-color teal #8bd5ca;
|
||||||
|
@define-color sky #91d7e3;
|
||||||
|
@define-color sapphire #7dc4e4;
|
||||||
|
@define-color blue #8aadf4;
|
||||||
|
@define-color lavender #b7bdf8;
|
||||||
|
@define-color text #cad3f5;
|
||||||
|
@define-color subtext1 #b8c0e0;
|
||||||
|
@define-color subtext0 #a5adcb;
|
||||||
|
@define-color overlay2 #939ab7;
|
||||||
|
@define-color overlay1 #8087a2;
|
||||||
|
@define-color overlay0 #6e738d;
|
||||||
|
@define-color surface2 #5b6078;
|
||||||
|
@define-color surface1 #494d64;
|
||||||
|
@define-color surface0 #363a4f;
|
||||||
|
@define-color base #24273a;
|
||||||
|
@define-color mantle #1e2030;
|
||||||
|
@define-color crust #181926;
|
||||||
26
waybar/dot-config/waybar/themes/mocha.css
Normal file
26
waybar/dot-config/waybar/themes/mocha.css
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
@define-color rosewater #f5e0dc;
|
||||||
|
@define-color flamingo #f2cdcd;
|
||||||
|
@define-color pink #f5c2e7;
|
||||||
|
@define-color mauve #cba6f7;
|
||||||
|
@define-color red #f38ba8;
|
||||||
|
@define-color maroon #eba0ac;
|
||||||
|
@define-color peach #fab387;
|
||||||
|
@define-color yellow #f9e2af;
|
||||||
|
@define-color green #a6e3a1;
|
||||||
|
@define-color teal #94e2d5;
|
||||||
|
@define-color sky #89dceb;
|
||||||
|
@define-color sapphire #74c7ec;
|
||||||
|
@define-color blue #89b4fa;
|
||||||
|
@define-color lavender #b4befe;
|
||||||
|
@define-color text #cdd6f4;
|
||||||
|
@define-color subtext1 #bac2de;
|
||||||
|
@define-color subtext0 #a6adc8;
|
||||||
|
@define-color overlay2 #9399b2;
|
||||||
|
@define-color overlay1 #7f849c;
|
||||||
|
@define-color overlay0 #6c7086;
|
||||||
|
@define-color surface2 #585b70;
|
||||||
|
@define-color surface1 #45475a;
|
||||||
|
@define-color surface0 #313244;
|
||||||
|
@define-color base #1e1e2e;
|
||||||
|
@define-color mantle #181825;
|
||||||
|
@define-color crust #11111b;
|
||||||
Reference in New Issue
Block a user