Add Mocha colors to polybar

TODO : change icons to use Nerd fonts

.config/polybar/.env

@@ -0,0 +1,35 @@
+# See https://github.com/polybar/polybar/wiki/Formatting#format-tags-inside-polybar-config
+# Only way to use format tags with variables in polybar for now
+export MOCHA_TEXT="#cdd6fa"
+export MOCHA_MAROON="#eba0ac"
+export MOCHA_PEACH="#fab387"
+export MOCHA_LAVENDER="#b4befe"
+export MOCHA_BLUE="#89b4fa"
+export MOCHA_SKY="#89dceb"
+export MOCHA_YELLOW="#f9e2af"
+export MOCHA_GREEN="#a6e3a1"
+export MOCHA_SAPPHIRE="#74c7ec"
+export MOCHA_PINK="#f5c2e7"
+export MOCHA_ROSEWATER="#f2cdcd"
+export MOCHA_MAUVE="#ca9ee6"
+export MOCHA_TEAL="#81c8be"
+export BAR_WINDOW="%{F$MOCHA_TEXT}%title%"
+export BAR_WIFI_CONNECTED="%{F$MOCHA_TEXT}%essid%  %{F$MOCHA_YELLOW}%{F$MOCHA_TEXT}  %local_ip%        %{F$MOCHA_YELLOW}%{F$MOCHA_TEXT} %downspeed%     %{F$MOCHA_YELLOW}%{F$MOCHA_TEXT} %upspeed%"
+export BAR_WIRED_CONNECTED="%{F$MOCHA_TEXT}%ifname%  %{F$MOCHA_YELLOW}%{F$MOCHA_TEXT} %local_ip%        %{F$MOCHA_YELLOW}%{F$MOCHA_TEXT} %downspeed%     %{F$MOCHA_YELLOW}%{F$MOCHA_TEXT} %upspeed%"
+export BAR_CPU="%{F$MOCHA_MAUVE} "
+export BAR_TEMP_OK="%{F$MOCHA_MAUVE} %{F-} %temperature-c%"
+export BAR_TEMP_WARN="%{F$MOCHA_PEACH}  %{F-} %temperature-c%"
+export BAR_MENU_OPEN="%{F$MOCHA_MAUVE}%{F$MOCHA_TEXT}"
+export BAR_MENU_CLOSE="%{F$MOCHA_MAUVE}%{F$MOCHA_TEXT}"
+export BAR_BACKLIGHT="{F$MOCHA_SKY}☀️%{F$MOCHA_TEXT} %percentage%%"
+export BAR_BATTERY_FULL="%{$MOCHA_SAPPHIRE} %percentage%%"
+export BAR_BATTERY_CHARGING="${MOCHA_LAVENDER} %percentage%%"
+export BAR_BATTERY_DISCHARGIN="${MOCHA_PEACH} %percentage%%"
+export BAR_MEMORY_DESKTOP="%{F$MOCHA_MAUVE}"
+export BAR_MEMORY_LAPTOP="%{F$MOCHA_MAUVE}%percentage_used%%"
+export BAR_MEMORY_LAPTOP_WARN="%{F$MOCHA_PEACH}%percentage_used%%"
+export BAR_DATE="%{F$MOCHA_MAUVE}🕓%{F$MOCHA_TEXT} %date%  ·  %time%"
+export BAR_LOW_VOL="%{F$MOCHA_MAUVE}🔈%{F$MOCHA_TEXT}"
+export BAR_MED_VOL="%{F$MOCHA_MAUVE}🔉%{F$MOCHA_TEXT}"
+export BAR_HIGH_VOL="%{F$MOCHA_MAUVE}🔊%{F$MOCHA_TEXT}"
+export BAR_HEAD_VOL="%{F$MOCHA_MAUVE}%{F$MOCHA_TEXT}"

.config/polybar/config.d/desk

@@ -14,19 +14,19 @@ type = internal/memory
 interval = 0.2
 format = <label> <bar-used>
 
-label = %{F#fba922}
+label = ${env:BAR_MEMORY_DESKTOP}
 
 bar-used-width = 50
 bar-used-gradient = true
-bar-used-foreground-0 = #55aa55
+bar-used-foreground-0 = ${colors.sapphire}
-bar-used-foreground-1 = #557755
+bar-used-foreground-1 = ${colors.sapphire}
-bar-used-foreground-2 = #f5a70a
+bar-used-foreground-2 = ${colors.peach}
-bar-used-foreground-3 = #ff5555
+bar-used-foreground-3 = ${colors.red}
 bar-used-indicator =
 bar-used-indicator-font = 2
-bar-used-indicator-foreground = #fff
+bar-used-indicator-foreground = ${colors.sapphire}
 bar-used-fill =▐
 bar-used-fill-font = 2
 bar-used-empty =▐
 bar-used-empty-font = 2
-bar-used-empty-foreground = #444444
+bar-used-empty-foreground = ${colors.overlay2}

.config/polybar/config.d/laptop

@@ -15,5 +15,5 @@ interval = 0.2
 format = <label>
 format-warn = <label-warn>
 warn-percentage = 60
-label = %{F#fba922}%{F#77dd77} %percentage_used%%
+label = ${env:BAR_MEMORY_LAPTOP}
-label-warn = %{F#fba922} %percentage_used%%
+label-warn = ${env:BAR_MEMORY_LAPTOP_WARN}

.config/polybar/config_common

@@ -1,14 +1,6 @@
-[colors]
-; First two letter of background are for transparency
-background = #882f343f
-foreground = #eee
-foreground-alt = #555
-secondary = #e60053
-alert = #bd2c40
-accent = #fba922
-
 [global/wm]
 margin-top=50
+include-file = $HOME/.config/polybar/mocha.ini
 
 ; Common to top and bottom bars
 [bar/common]
@@ -16,10 +8,10 @@ width = 100%
 dpi = ${variables.dpi}
 enable-ipc = true
 height = ${variables.height}
-foreground = ${colors.foreground}
+foreground = ${colors.text}
-background = ${colors.background}
+background = ${colors.surface0}
 line-size = 3
-line-color = #f00
+line-color = ${colors.base}
 
 locale = fr_FR.UTF-8
 monitor = ${env:MONITOR:HDMI-0}
@@ -33,10 +25,10 @@ font-3 = Weather Icons:size=10;3
 
 overline-size = 10
 underline-size = 10
-overline-color = ${self.background}
+overline-color = ${colors.mauve}
-underline-color = ${self.background}
+underline-color = ${colors.mauve}
 border-bottom-size = 1
-border-bottom-color = #333
+border-bottom-color = ${colors.base}
 padding-left = 2
 padding-right = 10
 module-margin-left = 4
@@ -53,9 +45,9 @@ inherit = bar/common
 bottom = true
 
 overline-size = 3
-overline-color = ${colors.accent}
+overline-color = ${colors.mauve}
 underline-size = 3
-underline-color = ${colors.accent}
+underline-color = ${colors.mauve}
 
 spacing = 3
 padding-left = 0
@@ -81,16 +73,16 @@ tail = true
 
 [module/xwindow]
 type = internal/xwindow
-label = %{F#ddd}%title%
+label = ${env:BAR_WINDOW}
 label-maxlen=100
 
 [module/wireless-network]
 type = internal/network
 interface-type = wireless
 interval = 1
-label-connected = %{F#ddd}%essid%    %local_ip%        %{F#77dd77}%{F-} %downspeed%     %{F#dd7777}%{F-} %upspeed%
+label-connected = ${env:BAR_WIFI_CONNECTED}
 label-disconnected = Wireless disconnected
-label-disconnected-foreground = #66
+label-disconnected-foreground = ${colors.text}
 ; Poorly documented and hackish way to have more space between some modules
 label-connected-margin = 10
 label-disconnected-margin = 10
@@ -100,9 +92,9 @@ type = internal/network
 interface = 
 interface-type = wired
 interval = 1
-label-connected = %{F#ddd}%ifname%    %local_ip%        %{F#77dd77}%{F-} %downspeed%     %{F#dd7777}%{F-} %upspeed%
+label-connected = ${env:BAR_WIRED_CONNECTED}
 label-disconnected = Ethernet disconnected
-label-disconnected-foreground = #66
+label-disconnected-foreground = ${colors.text}
 
 [module/i3]
 type = internal/i3
@@ -117,29 +109,31 @@ ws-icon-3 = 4;
 ws-icon-4 = 5;
 ws-icon-5 = 6;
 
-label-dimmed-underline = ${root.background}
 label-separator = |
+
+label-mode-underline = ${colors.surface1}
+
 label-focused = %icon%  %name%
-label-focused-foreground = #f3f3f3
+label-focused-foreground = ${colors.text}
-;label-focused-underline = #${colors.accent}
+label-focused-underline = ${colors.mauve}
-label-focused-underline = #9f78e1
 label-focused-font = 0
 label-focused-padding = 4
 
 label-unfocused = %icon%  %name%
-label-unfocused-underline = #555555
+label-unfocused-underline = ${colors.surface1}
 label-unfocused-font = 0
 label-unfocused-padding = 4
 
 label-urgent = %icon%  %name%
-label-urgent-foreground = #000000
+label-urgent-foreground = ${colors.base}
-label-urgent-background = #bd2c40
+label-urgent-background = ${colors.red}
-label-urgent-underline = #9b0a20
+label-urgent-underline = ${colors.mauve}
 label-urgent-font = 0
 label-urgent-padding = 4
 
 label-visible = %icon%  %name%
-label-visible-foreground = #55ffffff
+label-visible-foreground = ${colors.text}
+label-visible-underline = ${colors.surface1}
 label-visible-font = 0
 label-visible-padding = 4
 
@@ -149,42 +143,39 @@ interval = 0.5
 
 format = <label> <ramp-coreload>
 
-label = %{F#fba922} 
+label = ${env:BAR_CPU}
 
 ramp-coreload-0 = ▁
 ramp-coreload-0-font = 3
-ramp-coreload-0-foreground = #aaff77
+ramp-coreload-0-foreground = ${colors.sapphire}
 ramp-coreload-1 = ▂
 ramp-coreload-1-font = 3
-ramp-coreload-1-foreground = #aaff77
+ramp-coreload-1-foreground = ${colors.sapphire}
 ramp-coreload-2 = ▃
 ramp-coreload-2-font = 3
-ramp-coreload-2-foreground = #aaff77
+ramp-coreload-2-foreground = ${colors.sapphire}
 ramp-coreload-3 = ▄
 ramp-coreload-3-font = 3
-ramp-coreload-3-foreground = #aaff77
+ramp-coreload-3-foreground = ${colors.sapphire}
 ramp-coreload-4 = ▅
 ramp-coreload-4-font = 3
-ramp-coreload-4-foreground = #fba922
+ramp-coreload-4-foreground = ${colors.peach}
 ramp-coreload-5 = ▆
 ramp-coreload-5-font = 3
-ramp-coreload-5-foreground = #fba922
+ramp-coreload-5-foreground = ${colors.peach}
 ramp-coreload-6 = ▇
 ramp-coreload-6-font = 3
-ramp-coreload-6-foreground = #ff5555
+ramp-coreload-6-foreground = ${colors.maroon}
 ramp-coreload-7 = █
 ramp-coreload-7-font = 3
-ramp-coreload-7-foreground = #ff5555
+ramp-coreload-7-foreground = ${colors.red}
 
 [module/date]
 type = internal/date
 interval = 1.0
-
 date = " %A %d %B %Y"
-
 time = %H:%M:%S
-
+label = ${env:BAR_DATE}
-label = %{F#ddd} %date%       %time%
 
 [module/temperature]
 type = internal/temperature
@@ -192,49 +183,42 @@ thermal-zone = 0
 warn-temperature = 60
 interval = 0.5
 
-format = <ramp> <label>
+format = <label>
-format-warn = <ramp> <label-warn>
+format-warn = <label-warn>
 
-label = %{F#77dd77} %{F-} %temperature-c%
+label = ${env:BAR_TEMP_OK}
-label-warn = %{F#dd7777}  %{F-} %temperature-c%
+label-warn = ${env:BAR_TEMP_WARN}
-label-warn-foreground = #dd7777
+label-warn-foreground = ${colors.text}
-
-ramp-0 =
-ramp-1 =
-ramp-2 =
-ramp-foreground = ${colors.foreground-alt}
 
 [module/powermenu]
 type = custom/menu
-
 format-padding = 3
-
+label-open = ${env:BAR_MENU_OPEN}
-label-open = %{F#dd7777}%{F#ddd}
+label-close = ${env:BAR_MENU_CLOSE} 
-label-close = %{F#dd7777}%{F#ddd}
 label-separator = " · "
 
 menu-0-0 = Exit i3
-menu-0-0-foreground = ${colors.accent}
+menu-0-0-foreground = ${colors.text}
 menu-0-0-exec = i3-msg exit
 menu-0-1 = Reboot
-menu-0-1-foreground = ${colors.accent}
+menu-0-1-foreground = ${colors.text}
 menu-0-1-exec = menu-open-1
 menu-0-2 = Power off
-menu-0-2-foreground = ${colors.accent}
+menu-0-2-foreground = ${colors.text}
 menu-0-2-exec = menu-open-2
 
 menu-1-0 = Cancel
-menu-1-0-foreground = ${colors.accent}
+menu-1-0-foreground = ${colors.mauve}
 menu-1-0-exec = menu-open-0
 menu-1-1 = Reboot
-menu-1-1-foreground = ${colors.accent}
+menu-1-1-foreground = ${colors.mauve}
 menu-1-1-exec = systemctl reboot -i
 
 menu-2-0 = Cancel
-menu-2-0-foreground = ${colors.accent}
+menu-2-0-foreground = ${colors.mauve}
 menu-2-0-exec = menu-open-0
 menu-2-1 = Power off
-menu-2-1-foreground = ${colors.accent}
+menu-2-1-foreground = ${colors.mauve}
 menu-2-1-exec = systemctl poweroff
 
 [module/system-usb-udev]
@@ -262,7 +246,7 @@ interval = 30
 [module/backlight]
 type = internal/backlight
 card = intel_backlight
-label = %{F#77dd77}☀️%{F#ddd} %percentage%%
+label = ${env:BAR_BACKLIGHT}
 bar-width = 10
 bar-indicator = |
 bar-fill = ─
@@ -275,7 +259,7 @@ interval = 5
 
 format-volume = <ramp-volume> <label-volume>
 label-muted = 🔇 muted
-label-muted-foreground = #666
+label-muted-foreground = ${colors.rosewater}
 
 ramp-volume-0 = 🔈
 ramp-volume-1 = 🔉
@@ -293,9 +277,9 @@ poll-interval = 5
 format-charging = <label-charging>
 format-discharging = <label-discharging>
 format-full = <label-full>
-label-charging =  %percentage%%
+label-charging = ${env:BAR_BATTERY_CHARGING}
-label-discharging =  %percentage%%
+label-discharging = ${env:BAR_BATTERY_DISCHARGING}
-label-full = %{F#77dd77}
+label-full = ${env:BAR_BATTERY_FULL}
 
 [module/alsa]
 type = internal/alsa
@@ -308,13 +292,13 @@ master-mixer = Master
 
 format-volume = <ramp-volume> <label-volume>
 label-muted = 🔇 muted
-label-muted-foreground = #66
+label-muted-foreground = ${colors.rosewater}
 
-ramp-volume-0 = 🔈
+ramp-volume-0 = ${env:BAR_LOW_VOL}
-ramp-volume-1 = 🔉
+ramp-volume-1 = ${env:BAR_MED_VOL}
-ramp-volume-2 = 🔊
+ramp-volume-2 = ${env:BAR_HIGH_VOL}
 
-ramp-headphones-0 = 
+ramp-headphones-0 = ${env:BAR_HEAD_VOL}
-ramp-headphones-1 = 
+ramp-headphones-1 = ${env:BAR_HEAD_VOL}
 
 interval = 3

.config/polybar/scripts/filesystem.sh

@@ -1,6 +1,8 @@
 #/bin/sh
 
+source $(dirname $0)/../.env
 source $(dirname $0)/filesystem.data
+
 output=""
 for i in "${!parts[@]}"; do 
 	avail=$(df -h ${parts[$i]} | tail -1 | tr -s ' ' | cut -d' ' -f4)
@@ -8,13 +10,13 @@ for i in "${!parts[@]}"; do
 	num=$(echo ${used} | cut -d'%' -f1)
 
 	if [ "$num" -gt 80 ] ; then
-		color="#dd7777"
+		color="$MOCHA_RED"
 	elif [ "$num" -gt 50 ] ; then
-		color="#fba922"
+		color="$MOCHA_PEACH"
 	else
-		color="#77dd77"
+		color="$MOCHA_MAUVE"
 	fi
-	output=$output"%{F${color}}${icons[$i]} $used%{F#555} · $avail%{F-}"
+	output=$output"%{F${color}}${icons[$i]}   $used%{F$MOCHA_TEXT}  ·  $avail"
 	if [ $(($i + 1)) -ne "${#parts[@]}" ] ; then
 		output=$output"               "
 	fi

.config/polybar/scripts/launch_polybar.sh

@@ -1,5 +1,5 @@
 #!/usr/bin/env bash
-
+source ~/.config/polybar/.env
 names=("chostybottombar" "chostytopbar")
 killall -q polybar
 while pgrep -u $UID -x polybar >/dev/null; do sleep 1; done

.config/polybar/scripts/system-uptime-pretty.sh

@@ -1,3 +1,3 @@
 #!/bin/sh
-
+source $(dirname $0)/../.env
-echo "%{F#77dd77}%{F#ddd} " $(uptime --pretty | sed 's/up //')
+echo "%{F$MOCHA_MAUVE}%{F$MOCHA_TEXT} " $(uptime --pretty | sed 's/up //')

.config/polybar/scripts/system-usb-udev.sh

@@ -1,5 +1,6 @@
 #!/bin/sh
 
+source $(dirname $0)/../.env
 # Dependencies : jq ; udisks2
 # Some updates by Quentin Duchemin on 18/03/07
 # - Add label in lsblk selection
@@ -41,7 +42,7 @@ usb_print() {
         output="$output$space $mounted"
     done
 
-    echo "%{F#ddd}$output"
+    echo "%{F$MOCHA_TEXT}$output"
 }
 
 usb_update() {

.config/polybar/scripts/updates-arch-combined.sh

@@ -1,5 +1,6 @@
 #!/bin/sh
 
+source $(dirname $0)/../.env
 connect=$(ping -q -w 1 -c 1 `ip r | grep default | cut -d ' ' -f 3` &> /dev/null)
 if [ $? -eq 0 ]; then
     updates_arch=$(/usr/bin/checkupdates | wc -l)
@@ -7,9 +8,9 @@ if [ $? -eq 0 ]; then
     updates_aur=$(yay -Qua | wc -l)
     updates=$(("$updates_arch" + "$updates_aur"))
     if [ "$updates" -gt 0 ]; then
-        echo "%{F#dd7777}%{F#ddd} $updates_arch | $updates_aur"
+        echo "%{F$MOCHA_MAUVE}%{F$MOCHA_TEXT} $updates_arch | $updates_aur"
     else
-        echo "%{F#77dd77}%{F#ddd} 0"
+        echo "%{F$MOCHA_GREEN}%{F$MOCHA_TEXT} 0"
     fi
 else
     echo "%{F#77dd77}%{F#ddd} Offline"

.init_config.sh

@@ -124,6 +124,9 @@ if [ ! -z "$INIT" ]; then
 	sudo git clone https://github.com/zdharma-continuum/fast-syntax-highlighting.git /usr/share/oh-my-zsh/plugins/zsh-fast-syntax-highlighting
 	sudo git clone https://github.com/zsh-users/zsh-autosuggestions /usr/share/oh-my-zsh/plugins/zsh-autosuggestions
 	sudo git clone https://github.com/unixorn/fzf-zsh-plugin.git /usr/share/oh-my-zsh/plugins/fzf-zsh-plugin
+	echo -e "* Install everything we need for Catppuccin themes..."
+	echo -e "\tFor polybar..."
+	wget https://github.com/catppuccin/polybar/blob/main/themes/mocha.ini -O ~/.config/polybar/mocha.ini
 	sudo wget https://raw.githubusercontent.com/catppuccin/zsh-fsh/main/themes/catppuccin-macchiato.ini -O /usr/share/oh-my-zsh/plugins/fast-syntax-highlighting
 	# Basic directory structure
 	echo -e "* Create base home directories..."

.zshrc

@@ -61,7 +61,7 @@ source $ZSH/oh-my-zsh.sh
 eval "$(oh-my-posh init zsh --config https://raw.githubusercontent.com/JanDeDobbeleer/oh-my-posh/main/themes/quick-term.omp.json)"
 
 # And use Catppuccin Mocha theme for ZSH fast hightlight plugin (LOCAL means searching in /usr/local/fsh)
-fast-theme LOCAL:catppuccin-mocha
+fast-theme LOCAL:catppuccin-mocha >/dev/null
 
 # Preferred editor for local and remote sessions
 export EDITOR=vim