wyj/Hyprland-dotfiles
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Add Waybar Theme switcher

Browse Source
This commit is contained in:
Stephan Raabe 2023-10-09 15:50:47 +02:00
parent e272300293
commit f2cbab620f
7 changed files with 138 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
hypr/conf/keybindings.conf
View File

@ -25,6 +25,7 @@ bind = $mainMod CTRL, RETURN, exec, ~/dotfiles/scripts/applauncher.sh
bind = $mainMod SHIFT, B, exec, ~/dotfiles/waybar/launch.sh bind = $mainMod SHIFT, B, exec, ~/dotfiles/waybar/launch.sh
bind = $mainMod CTRL, F, exec, ~/dotfiles/scripts/filemanager.sh bind = $mainMod CTRL, F, exec, ~/dotfiles/scripts/filemanager.sh
bind = $mainMod CTRL, C, exec, ~/dotfiles/scripts/cliphist.sh bind = $mainMod CTRL, C, exec, ~/dotfiles/scripts/cliphist.sh
bind = $mainMod CTRL, T, exec, ~/dotfiles/waybar/themestyle.sh
bind = $mainMod, 1, workspace, 1 bind = $mainMod, 1, workspace, 1
bind = $mainMod, 2, workspace, 2 bind = $mainMod, 2, workspace, 2

18
waybar/launch.sh
View File

@ -13,12 +13,26 @@
# ----------------------------------------------------- # -----------------------------------------------------
killall waybar killall waybar
# -----------------------------------------------------
# Get current theme information
# -----------------------------------------------------
themestyle="/default/light"
if [ -f ~/.cache/.themestyle.sh ]; then
themestyle=$(cat ~/.cache/.themestyle.sh)
else
touch ~/.cache/.themestyle.sh
echo "$themestyle" > ~/.cache/.themestyle.sh
fi
if [ ! -f ~/dotfiles/waybar/styles$themestyle/style.css ]; then
themestyle="/default/light"
fi
# ----------------------------------------------------- # -----------------------------------------------------
# Loading the configuration based on the username # Loading the configuration based on the username
# ----------------------------------------------------- # -----------------------------------------------------
if [[ $USER = "raabe" ]] if [[ $USER = "raabe" ]]
then then
waybar -c ~/dotfiles/waybar/myconfig & -s ~/dotfiles/waybar/style.css waybar -c ~/dotfiles/waybar/myconfig -s ~/dotfiles/waybar/styles$themestyle/style.css &
else else
waybar & waybar -s ~/dotfiles/waybar/styles$themestyle/style.css &
fi fi

14
waybar/styles/default/dark/style.css Normal file
View File

@ -0,0 +1,14 @@
/* -----------------------------------------------------
* Import Pywal colors
* ----------------------------------------------------- */
@import '../../../../../.cache/wal/colors-waybar.css';
@define-color backgroundlight @color8;
@define-color backgrounddark #FFFFFF;
@define-color bordercolor @color8;
@define-color textcolor1 @color8;
@define-color textcolor2 #FFFFFF;
@define-color textcolor3 #FFFFFF;
@define-color iconcolor @color8;
@import '../style.css';

14
waybar/styles/default/light/style.css Normal file
View File

@ -0,0 +1,14 @@
/* -----------------------------------------------------
* Import Pywal colors
* ----------------------------------------------------- */
@import '../../../../../.cache/wal/colors-waybar.css';
@define-color backgroundlight #FFFFFF;
@define-color backgrounddark @color11;
@define-color bordercolor #FFFFFF;
@define-color textcolor1 #FFFFFF;
@define-color textcolor2 @color11;
@define-color textcolor3 #FFFFFF;
@define-color iconcolor #FFFFFF;
@import '../style.css';

14
waybar/styles/default/mixed/style.css Normal file
View File

@ -0,0 +1,14 @@
/* -----------------------------------------------------
* Import Pywal colors
* ----------------------------------------------------- */
@import '../../../../../.cache/wal/colors-waybar.css';
@define-color backgroundlight @color8;
@define-color backgrounddark #FFFFFF;
@define-color bordercolor @color8;
@define-color textcolor1 @color8;
@define-color textcolor2 #FFFFFF;
@define-color textcolor3 #FFFFFF;
@define-color iconcolor #FFFFFF;
@import '../style.css';

108
waybar/style.css → waybar/styles/default/style.css
View File

@ -13,7 +13,7 @@
/* ----------------------------------------------------- /* -----------------------------------------------------
* Import Pywal colors * Import Pywal colors
* ----------------------------------------------------- */ * ----------------------------------------------------- */
@import '../../.cache/wal/colors-waybar.css'; /* @import 'style-light.css'; */
/* ----------------------------------------------------- /* -----------------------------------------------------
* General * General
@ -39,7 +39,7 @@ window#waybar {
* ----------------------------------------------------- */ * ----------------------------------------------------- */
#workspaces { #workspaces {
background: #FFFFFF; background: @backgroundlight;
margin: 2px 1px 3px 1px; margin: 2px 1px 3px 1px;
padding: 0px 1px; padding: 0px 1px;
border-radius: 15px; border-radius: 15px;
@ -48,23 +48,23 @@ window#waybar {
font-style: normal; font-style: normal;
opacity: 0.8; opacity: 0.8;
font-size: 16px; font-size: 16px;
color:#FFFFFF; color: @textcolor1;
} }
#workspaces button { #workspaces button {
padding: 1px 9px; padding: 0px 5px;
margin: 3px 3px; margin: 4px 3px;
border-radius: 15px; border-radius: 15px;
border: 0px; border: 0px;
color: #FFFFFF; color: @textcolor1;
background-color: @color11; background-color: @backgrounddark;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
opacity: 0.4; opacity: 0.4;
} }
#workspaces button.active { #workspaces button.active {
color: #FFFFFF; color: @textcolor1;
background: @color11; background: @backgrounddark;
border-radius: 15px; border-radius: 15px;
min-width: 40px; min-width: 40px;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
@ -72,8 +72,8 @@ window#waybar {
} }
#workspaces button:hover { #workspaces button:hover {
color: #FFFFFF; color: @textcolor1;
background: @color11; background: @backgrounddark;
border-radius: 15px; border-radius: 15px;
opacity:0.7; opacity:0.7;
} }
@ -84,14 +84,14 @@ window#waybar {
tooltip { tooltip {
border-radius: 10px; border-radius: 10px;
background-color: #FFFFFF; background-color: @backgroundlight;
opacity:0.8; opacity:0.8;
padding:20px; padding:20px;
margin:0px; margin:0px;
} }
tooltip label { tooltip label {
color: @color11; color: @textcolor2;
} }
/* ----------------------------------------------------- /* -----------------------------------------------------
@ -99,11 +99,11 @@ tooltip label {
* ----------------------------------------------------- */ * ----------------------------------------------------- */
#window { #window {
background: #FFFFFF; background: @backgroundlight;
margin: 5px 15px 5px 0px; margin: 5px 15px 5px 0px;
padding: 2px 10px 0px 10px; padding: 2px 10px 0px 10px;
border-radius: 12px; border-radius: 12px;
color:@background; color:@textcolor2;
font-size:16px; font-size:16px;
font-weight:normal; font-weight:normal;
opacity:0.8; opacity:0.8;
@ -119,7 +119,7 @@ window#waybar.empty #window {
#taskbar { #taskbar {
/* background: @color11; */ /* background: @color11; */
background: #FFFFFF; background: @backgroundlight;
margin: 3px 15px 3px 0px; margin: 3px 15px 3px 0px;
padding:0px; padding:0px;
/*padding: 2px 3px 1px 3px;*/ /*padding: 2px 3px 1px 3px;*/
@ -127,11 +127,12 @@ window#waybar.empty #window {
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
opacity:0.8; opacity:0.8;
border: 3px solid #FFFFFF; border: 3px solid @backgroundlight;
} }
#taskbar button { #taskbar button {
margin:0; margin:0;
border-radius: 15px;
padding: 0px 5px 0px 5px; padding: 0px 5px 0px 5px;
} }
@ -156,7 +157,7 @@ window#waybar.empty #window {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
opacity: 0.8; opacity: 0.8;
color:#FFFFFF; color: @iconcolor;
} }
#custom-wallpaper { #custom-wallpaper {
@ -168,14 +169,14 @@ window#waybar.empty #window {
* ----------------------------------------------------- */ * ----------------------------------------------------- */
#custom-appmenu { #custom-appmenu {
background-color: @color11; background-color: @backgrounddark;
font-size: 16px; font-size: 16px;
color: #FFFFFF; color: @textcolor1;
border-radius: 15px; border-radius: 15px;
padding: 0px 10px 0px 10px; padding: 0px 10px 0px 10px;
margin: 3px 15px 3px 14px; margin: 3px 15px 3px 14px;
opacity:0.8; opacity:0.8;
border:3px solid #FFFFFF; border:3px solid @bordercolor;
} }
/* ----------------------------------------------------- /* -----------------------------------------------------
@ -186,7 +187,7 @@ window#waybar.empty #window {
margin: 0px 15px 0px 0px; margin: 0px 15px 0px 0px;
padding:0px; padding:0px;
font-size:20px; font-size:20px;
color:#FFFFFF; color: @iconcolor;
} }
/* ----------------------------------------------------- /* -----------------------------------------------------
@ -194,9 +195,9 @@ window#waybar.empty #window {
* ----------------------------------------------------- */ * ----------------------------------------------------- */
#custom-updates { #custom-updates {
background-color: #FFFFFF; background-color: @backgroundlight;
font-size: 16px; font-size: 16px;
color: @background; color: @textcolor2;
border-radius: 15px; border-radius: 15px;
padding: 2px 10px 0px 10px; padding: 2px 10px 0px 10px;
margin: 5px 15px 5px 0px; margin: 5px 15px 5px 0px;
@ -204,17 +205,17 @@ window#waybar.empty #window {
} }
#custom-updates.green { #custom-updates.green {
background-color: #FFFFFF; background-color: @backgroundlight;
} }
#custom-updates.yellow { #custom-updates.yellow {
background-color: #ff9a3c; background-color: #ff9a3c;
color: #ffffff; color: #FFFFFF;
} }
#custom-updates.red { #custom-updates.red {
background-color: #dc2f2f; background-color: #dc2f2f;
color: #ffffff; color: #FFFFFF;
} }
/* ----------------------------------------------------- /* -----------------------------------------------------
@ -222,9 +223,9 @@ window#waybar.empty #window {
* ----------------------------------------------------- */ * ----------------------------------------------------- */
#custom-youtube { #custom-youtube {
background-color: #FFFFFF; background-color: @backgroundlight;
font-size: 16px; font-size: 16px;
color: @background; color: @textcolor2;
border-radius: 15px; border-radius: 15px;
padding: 2px 10px 0px 10px; padding: 2px 10px 0px 10px;
margin: 5px 15px 5px 0px; margin: 5px 15px 5px 0px;
@ -239,7 +240,7 @@ window#waybar.empty #window {
margin:0px; margin:0px;
padding:0px; padding:0px;
font-size:16px; font-size:16px;
color:#FFFFFF; color:@iconcolor;
} }
#memory { #memory {
@ -251,14 +252,14 @@ window#waybar.empty #window {
* ----------------------------------------------------- */ * ----------------------------------------------------- */
#clock { #clock {
background-color: @color11; background-color: @backgrounddark;
font-size: 16px; font-size: 16px;
color: #FFFFFF; color: @textcolor1;
border-radius: 15px; border-radius: 15px;
padding: 1px 10px 0px 10px; padding: 1px 10px 0px 10px;
margin: 3px 15px 3px 0px; margin: 3px 15px 3px 0px;
opacity:0.8; opacity:0.8;
border:3px solid #FFFFFF; border:3px solid @bordercolor;
} }
/* ----------------------------------------------------- /* -----------------------------------------------------
@ -266,9 +267,9 @@ window#waybar.empty #window {
* ----------------------------------------------------- */ * ----------------------------------------------------- */
#pulseaudio { #pulseaudio {
background-color: #FFFFFF; background-color: @backgroundlight;
font-size: 16px; font-size: 16px;
color: @background; color: @textcolor2;
border-radius: 15px; border-radius: 15px;
padding: 2px 10px 0px 10px; padding: 2px 10px 0px 10px;
margin: 5px 15px 5px 0px; margin: 5px 15px 5px 0px;
@ -276,8 +277,8 @@ window#waybar.empty #window {
} }
#pulseaudio.muted { #pulseaudio.muted {
background-color: @color11; background-color: @backgrounddark;
color: #FFFFFF; color: @textcolor1;
} }
/* ----------------------------------------------------- /* -----------------------------------------------------
@ -285,24 +286,23 @@ window#waybar.empty #window {
* ----------------------------------------------------- */ * ----------------------------------------------------- */
#network { #network {
background-color: #FFFFFF; background-color: @backgroundlight;
font-size: 16px; font-size: 16px;
color: @background; color: @textcolor2;
border-radius: 15px; border-radius: 15px;
padding: 2px 10px 0px 10px; padding: 2px 10px 0px 10px;
margin: 3px 10px 3px 0px; margin: 5px 15px 5px 0px;
opacity:0.8; opacity:0.8;
border: 3px solid #FFFFFF
} }
#network.ethernet { #network.ethernet {
background-color: @color11; background-color: @backgroundlight;
color:#FFFFFF; color: @textcolor2;
} }
#network.wifi { #network.wifi {
background-color: @color11; background-color: @backgroundlight;
color:#FFFFFF; color: @textcolor1;
} }
/* ----------------------------------------------------- /* -----------------------------------------------------
@ -310,9 +310,9 @@ window#waybar.empty #window {
* ----------------------------------------------------- */ * ----------------------------------------------------- */
#bluetooth.on, #bluetooth.connected { #bluetooth.on, #bluetooth.connected {
background-color: #FFFFFF; background-color: @backgroundlight;
font-size: 16px; font-size: 16px;
color: @background; color: @textcolor2;
border-radius: 15px; border-radius: 15px;
padding: 2px 10px 0px 10px; padding: 2px 10px 0px 10px;
margin: 5px 15px 5px 0px; margin: 5px 15px 5px 0px;
@ -330,9 +330,9 @@ window#waybar.empty #window {
* ----------------------------------------------------- */ * ----------------------------------------------------- */
#battery { #battery {
background-color: #FFFFFF; background-color: @backgroundlight;
font-size: 16px; font-size: 16px;
color: @background; color: @textcolor2;
border-radius: 15px; border-radius: 15px;
padding: 2px 15px 0px 10px; padding: 2px 15px 0px 10px;
margin: 5px 15px 5px 0px; margin: 5px 15px 5px 0px;
@ -340,20 +340,20 @@ window#waybar.empty #window {
} }
#battery.charging, #battery.plugged { #battery.charging, #battery.plugged {
color: #ffffff; color: @textcolor2;
background-color: @color11; background-color: @backgroundlight;
} }
@keyframes blink { @keyframes blink {
to { to {
background-color: #ffffff; background-color: @backgroundlight;
color: #000000; color: @textcolor2;
} }
} }
#battery.critical:not(.charging) { #battery.critical:not(.charging) {
background-color: #f53c3c; background-color: #f53c3c;
color: #ffffff; color: @textcolor3;
animation-name: blink; animation-name: blink;
animation-duration: 0.5s; animation-duration: 0.5s;
animation-timing-function: linear; animation-timing-function: linear;

16
waybar/themestyle.sh Executable file
View File

@ -0,0 +1,16 @@
#!/bin/bash
options=$(find ~/dotfiles/waybar/styles/ -maxdepth 2 -type d)
listThemes=""
for value in $options
do
if [ ! $value == "$HOME/dotfiles/waybar/styles/" ]; then
if [ $(find $value -maxdepth 1 -type d | wc -l) = 1 ]; then
result=$(echo $value | sed "s#$HOME/dotfiles/waybar/styles/#/#g")
listThemes+="$result\n"
fi
fi
done
listThemes=${listThemes::-2}
choice=$(echo -e "$listThemes" | rofi -dmenu -config ~/dotfiles/rofi/config-wallpaper.rasi -no-show-icons -width 30 -p "Themes")
echo "$choice" > ~/.cache/.themestyle.sh
~/dotfiles/waybar/launch.sh