From f2cbab620ffe79ebba0c575e05330a2b7e535078 Mon Sep 17 00:00:00 2001 From: Stephan Raabe Date: Mon, 9 Oct 2023 15:50:47 +0200 Subject: [PATCH] Add Waybar Theme switcher --- hypr/conf/keybindings.conf | 1 + waybar/launch.sh | 18 +++- waybar/styles/default/dark/style.css | 14 +++ waybar/styles/default/light/style.css | 14 +++ waybar/styles/default/mixed/style.css | 14 +++ waybar/{ => styles/default}/style.css | 126 +++++++++++++------------- waybar/themestyle.sh | 16 ++++ 7 files changed, 138 insertions(+), 65 deletions(-) create mode 100644 waybar/styles/default/dark/style.css create mode 100644 waybar/styles/default/light/style.css create mode 100644 waybar/styles/default/mixed/style.css rename waybar/{ => styles/default}/style.css (80%) create mode 100755 waybar/themestyle.sh diff --git a/hypr/conf/keybindings.conf b/hypr/conf/keybindings.conf index bb11cc1..5bd74db 100644 --- a/hypr/conf/keybindings.conf +++ b/hypr/conf/keybindings.conf @@ -25,6 +25,7 @@ bind = $mainMod CTRL, RETURN, exec, ~/dotfiles/scripts/applauncher.sh bind = $mainMod SHIFT, B, exec, ~/dotfiles/waybar/launch.sh bind = $mainMod CTRL, F, exec, ~/dotfiles/scripts/filemanager.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, 2, workspace, 2 diff --git a/waybar/launch.sh b/waybar/launch.sh index 7eb606b..d112653 100755 --- a/waybar/launch.sh +++ b/waybar/launch.sh @@ -13,12 +13,26 @@ # ----------------------------------------------------- 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 # ----------------------------------------------------- if [[ $USER = "raabe" ]] then - waybar -c ~/dotfiles/waybar/myconfig & -s ~/dotfiles/waybar/style.css + waybar -c ~/dotfiles/waybar/myconfig -s ~/dotfiles/waybar/styles$themestyle/style.css & else - waybar & + waybar -s ~/dotfiles/waybar/styles$themestyle/style.css & fi diff --git a/waybar/styles/default/dark/style.css b/waybar/styles/default/dark/style.css new file mode 100644 index 0000000..cbdaab5 --- /dev/null +++ b/waybar/styles/default/dark/style.css @@ -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'; diff --git a/waybar/styles/default/light/style.css b/waybar/styles/default/light/style.css new file mode 100644 index 0000000..929a84a --- /dev/null +++ b/waybar/styles/default/light/style.css @@ -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'; \ No newline at end of file diff --git a/waybar/styles/default/mixed/style.css b/waybar/styles/default/mixed/style.css new file mode 100644 index 0000000..90d9dc5 --- /dev/null +++ b/waybar/styles/default/mixed/style.css @@ -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'; diff --git a/waybar/style.css b/waybar/styles/default/style.css similarity index 80% rename from waybar/style.css rename to waybar/styles/default/style.css index f2e3c91..15795d9 100644 --- a/waybar/style.css +++ b/waybar/styles/default/style.css @@ -13,7 +13,7 @@ /* ----------------------------------------------------- * Import Pywal colors * ----------------------------------------------------- */ -@import '../../.cache/wal/colors-waybar.css'; +/* @import 'style-light.css'; */ /* ----------------------------------------------------- * General @@ -39,32 +39,32 @@ window#waybar { * ----------------------------------------------------- */ #workspaces { - background: #FFFFFF; + background: @backgroundlight; margin: 2px 1px 3px 1px; padding: 0px 1px; border-radius: 15px; - border:0px; + border: 0px; font-weight: bold; font-style: normal; - opacity:0.8; - font-size:16px; - color:#FFFFFF; + opacity: 0.8; + font-size: 16px; + color: @textcolor1; } #workspaces button { - padding: 1px 9px; - margin: 3px 3px; + padding: 0px 5px; + margin: 4px 3px; border-radius: 15px; - border:0px; - color: #FFFFFF; - background-color: @color11; + border: 0px; + color: @textcolor1; + background-color: @backgrounddark; transition: all 0.3s ease-in-out; - opacity:0.4; + opacity: 0.4; } #workspaces button.active { - color: #FFFFFF; - background: @color11; + color: @textcolor1; + background: @backgrounddark; border-radius: 15px; min-width: 40px; transition: all 0.3s ease-in-out; @@ -72,8 +72,8 @@ window#waybar { } #workspaces button:hover { - color: #FFFFFF; - background: @color11; + color: @textcolor1; + background: @backgrounddark; border-radius: 15px; opacity:0.7; } @@ -84,14 +84,14 @@ window#waybar { tooltip { border-radius: 10px; - background-color: #FFFFFF; + background-color: @backgroundlight; opacity:0.8; padding:20px; margin:0px; } tooltip label { - color: @color11; + color: @textcolor2; } /* ----------------------------------------------------- @@ -99,11 +99,11 @@ tooltip label { * ----------------------------------------------------- */ #window { - background: #FFFFFF; + background: @backgroundlight; margin: 5px 15px 5px 0px; padding: 2px 10px 0px 10px; border-radius: 12px; - color:@background; + color:@textcolor2; font-size:16px; font-weight:normal; opacity:0.8; @@ -119,7 +119,7 @@ window#waybar.empty #window { #taskbar { /* background: @color11; */ - background: #FFFFFF; + background: @backgroundlight; margin: 3px 15px 3px 0px; padding:0px; /*padding: 2px 3px 1px 3px;*/ @@ -127,11 +127,12 @@ window#waybar.empty #window { font-weight: normal; font-style: normal; opacity:0.8; - border: 3px solid #FFFFFF; + border: 3px solid @backgroundlight; } #taskbar button { margin:0; + border-radius: 15px; padding: 0px 5px 0px 5px; } @@ -152,11 +153,11 @@ window#waybar.empty #window { * ----------------------------------------------------- */ #custom-brave, #custom-outlook, #custom-filemanager, #custom-teams, #custom-chatgpt, #custom-calculator, #custom-windowsvm, #custom-cliphist, #custom-wallpaper { - margin-right:20px; - font-size:20px; - font-weight:bold; - opacity:0.8; - color:#FFFFFF; + margin-right: 20px; + font-size: 20px; + font-weight: bold; + opacity: 0.8; + color: @iconcolor; } #custom-wallpaper { @@ -168,14 +169,14 @@ window#waybar.empty #window { * ----------------------------------------------------- */ #custom-appmenu { - background-color: @color11; + background-color: @backgrounddark; font-size: 16px; - color: #FFFFFF; + color: @textcolor1; border-radius: 15px; padding: 0px 10px 0px 10px; margin: 3px 15px 3px 14px; opacity:0.8; - border:3px solid #FFFFFF; + border:3px solid @bordercolor; } /* ----------------------------------------------------- @@ -186,7 +187,7 @@ window#waybar.empty #window { margin: 0px 15px 0px 0px; padding:0px; font-size:20px; - color:#FFFFFF; + color: @iconcolor; } /* ----------------------------------------------------- @@ -194,9 +195,9 @@ window#waybar.empty #window { * ----------------------------------------------------- */ #custom-updates { - background-color: #FFFFFF; + background-color: @backgroundlight; font-size: 16px; - color: @background; + color: @textcolor2; border-radius: 15px; padding: 2px 10px 0px 10px; margin: 5px 15px 5px 0px; @@ -204,17 +205,17 @@ window#waybar.empty #window { } #custom-updates.green { - background-color: #FFFFFF; + background-color: @backgroundlight; } #custom-updates.yellow { background-color: #ff9a3c; - color: #ffffff; + color: #FFFFFF; } #custom-updates.red { background-color: #dc2f2f; - color: #ffffff; + color: #FFFFFF; } /* ----------------------------------------------------- @@ -222,9 +223,9 @@ window#waybar.empty #window { * ----------------------------------------------------- */ #custom-youtube { - background-color: #FFFFFF; + background-color: @backgroundlight; font-size: 16px; - color: @background; + color: @textcolor2; border-radius: 15px; padding: 2px 10px 0px 10px; margin: 5px 15px 5px 0px; @@ -239,7 +240,7 @@ window#waybar.empty #window { margin:0px; padding:0px; font-size:16px; - color:#FFFFFF; + color:@iconcolor; } #memory { @@ -251,14 +252,14 @@ window#waybar.empty #window { * ----------------------------------------------------- */ #clock { - background-color: @color11; + background-color: @backgrounddark; font-size: 16px; - color: #FFFFFF; + color: @textcolor1; border-radius: 15px; padding: 1px 10px 0px 10px; margin: 3px 15px 3px 0px; opacity:0.8; - border:3px solid #FFFFFF; + border:3px solid @bordercolor; } /* ----------------------------------------------------- @@ -266,9 +267,9 @@ window#waybar.empty #window { * ----------------------------------------------------- */ #pulseaudio { - background-color: #FFFFFF; + background-color: @backgroundlight; font-size: 16px; - color: @background; + color: @textcolor2; border-radius: 15px; padding: 2px 10px 0px 10px; margin: 5px 15px 5px 0px; @@ -276,8 +277,8 @@ window#waybar.empty #window { } #pulseaudio.muted { - background-color: @color11; - color: #FFFFFF; + background-color: @backgrounddark; + color: @textcolor1; } /* ----------------------------------------------------- @@ -285,24 +286,23 @@ window#waybar.empty #window { * ----------------------------------------------------- */ #network { - background-color: #FFFFFF; + background-color: @backgroundlight; font-size: 16px; - color: @background; + color: @textcolor2; border-radius: 15px; padding: 2px 10px 0px 10px; - margin: 3px 10px 3px 0px; + margin: 5px 15px 5px 0px; opacity:0.8; - border: 3px solid #FFFFFF } #network.ethernet { - background-color: @color11; - color:#FFFFFF; + background-color: @backgroundlight; + color: @textcolor2; } #network.wifi { - background-color: @color11; - color:#FFFFFF; + background-color: @backgroundlight; + color: @textcolor1; } /* ----------------------------------------------------- @@ -310,9 +310,9 @@ window#waybar.empty #window { * ----------------------------------------------------- */ #bluetooth.on, #bluetooth.connected { - background-color: #FFFFFF; + background-color: @backgroundlight; font-size: 16px; - color: @background; + color: @textcolor2; border-radius: 15px; padding: 2px 10px 0px 10px; margin: 5px 15px 5px 0px; @@ -330,9 +330,9 @@ window#waybar.empty #window { * ----------------------------------------------------- */ #battery { - background-color: #FFFFFF; + background-color: @backgroundlight; font-size: 16px; - color: @background; + color: @textcolor2; border-radius: 15px; padding: 2px 15px 0px 10px; margin: 5px 15px 5px 0px; @@ -340,20 +340,20 @@ window#waybar.empty #window { } #battery.charging, #battery.plugged { - color: #ffffff; - background-color: @color11; + color: @textcolor2; + background-color: @backgroundlight; } @keyframes blink { to { - background-color: #ffffff; - color: #000000; + background-color: @backgroundlight; + color: @textcolor2; } } #battery.critical:not(.charging) { background-color: #f53c3c; - color: #ffffff; + color: @textcolor3; animation-name: blink; animation-duration: 0.5s; animation-timing-function: linear; diff --git a/waybar/themestyle.sh b/waybar/themestyle.sh new file mode 100755 index 0000000..0a25975 --- /dev/null +++ b/waybar/themestyle.sh @@ -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 \ No newline at end of file