Updated waybar to use catppuccin colors

This commit is contained in:
alejandro-angulo 2024-08-12 20:03:31 -07:00
parent 6bc6da1cd6
commit 3916f21962
Signed by: alejandro-angulo
GPG key ID: 75579581C74554B6
3 changed files with 51 additions and 31 deletions

View file

@ -24,7 +24,9 @@ in {
enable = true; enable = true;
systemd.enable = true; systemd.enable = true;
style = builtins.readFile ./waybar_style.css; style =
builtins.readFile "${pkgs.aa.catppuccin-waybar}/catppuccin.css"
+ builtins.readFile ./waybar_style.css;
settings = [ settings = [
{ {

View file

@ -5,9 +5,8 @@
} }
window#waybar { window#waybar {
background-color: rgba(29, 32, 33, 0.9); background-color: @base;
border-bottom: 3px solid #1d2021; color: @text;
color: #ffffdf;
transition-property: background-color; transition-property: background-color;
transition-duration: .5s; transition-duration: .5s;
} }
@ -30,10 +29,10 @@ window#waybar.hidden {
#network, #network,
#tray, #tray,
#custom-notification { #custom-notification {
background-color: #303030; background-color: @crust;
padding: 0 10px; padding: 0 10px;
margin: 3px; margin: 3px;
border: 3px solid rgba(0, 0, 0, 0); /* border: 3px solid rgba(0, 0, 0, 0); */
border-radius: 90px; border-radius: 90px;
background-clip: padding-box; background-clip: padding-box;
} }
@ -41,7 +40,7 @@ window#waybar.hidden {
#workspaces button { #workspaces button {
padding: 0 5px; padding: 0 5px;
min-width: 20px; min-width: 20px;
color: #87afaf; color: @blue;
} }
#workspaces button:hover { #workspaces button:hover {
@ -49,63 +48,58 @@ window#waybar.hidden {
} }
#workspaces button.focused { #workspaces button.focused {
color: #ffaf00; color: @yellow;
} }
#workspaces button.urgent { #workspaces button.urgent {
color: #e06c75; color: @red;
} }
#clock { #clock {
color: #61afef; color: @sky;
} }
#idle_inhibitor { #idle_inhibitor {
color: #abb2bf; color: @sky;
} }
#idle_inhibitor.activated { #idle_inhibitor.activated {
background-color: #abb2bf; background-color: @overlay0;
color: #1e222a;
} }
#temperature { #temperature {
color: #fb4934; color: @red;
} }
#temperature.critical { #temperature.critical {
color: #1d2021; background-color: @overlay0;
background-color: #9d0006;
} }
#cpu { #cpu {
color: #ff8700; color: @peach;
} }
#memory { #memory {
color: #87af87; color: @sky;
} }
#battery { #battery {
color: #b8bb26; color: @green;
} }
#battery.charging, #battery.charging,
#battery.plugged { #battery.plugged {
background-color: #1f321c; background-color: @overlay0;
color: #ffffaf;
} }
@keyframes blink { @keyframes blink {
to { to {
background-color: #1f321c; background-color: @overlay0;
color: #ffffaf;
} }
} }
#battery.critical:not(.charging) { #battery.critical:not(.charging) {
background-color: #afaf00; background-color: @overlay0;
color: #303030;
animation-name: blink; animation-name: blink;
animation-duration: 0.5s; animation-duration: 0.5s;
animation-timing-function: linear; animation-timing-function: linear;
@ -114,25 +108,25 @@ window#waybar.hidden {
} }
#pulseaudio { #pulseaudio {
color: #fabd2f; color: @yellow;
} }
#pulseaudio.muted { #pulseaudio.muted {
color: #b57614; color: @peach;
} }
#backlight { #backlight {
color: #17ccd5; color: @blue;
} }
#network { #network {
color: #d787af; color: @mauve;
} }
#network.disconnected { #network.disconnected {
color: #875f87; color: @rosewater;
} }
#custom\/notification { #custom\/notification {
color: red; color: @red;
} }

View file

@ -0,0 +1,24 @@
{
stdenv,
flavor ? "mocha",
font ? "Hack Nerd Font",
fetchurl,
...
}:
stdenv.mkDerivation rec {
pname = "catpuccin-waybar";
version = "1.1";
src = fetchurl {
url = "https://github.com/catppuccin/waybar/releases/download/v${version}/${flavor}.css";
hash = "sha256-llnz9uTFmEiQtbfMGSyfLb4tVspKnt9Fe5lo9GbrVpE=";
};
dontBuild = true;
dontUnpack = true;
installPhase = ''
mkdir -p "$out"
cp "$src" "$out/catppuccin.css"
'';
}