waybar config now supports light/dark mode switch

dot-config/hypr/scripts/toggle-theme.sh

@@ -1,12 +1,21 @@
 #!/usr/bin/env bash
 
-# Check current color scheme
+# Set this to where Waybar reads its config files
+WAYBAR_DIR="$HOME/.config/waybar"
+
 CURRENT_SCHEME=$(gsettings get org.gnome.desktop.interface color-scheme)
 
 if [ "$CURRENT_SCHEME" == "'prefer-dark'" ]; then
     gsettings set org.gnome.desktop.interface color-scheme 'prefer-light'
+    # Copy the light theme to theme.css
+    cp "$WAYBAR_DIR/light.css" "$WAYBAR_DIR/theme.css"
     notify-send "Light Mode" -a "System"
 else
     gsettings set org.gnome.desktop.interface color-scheme 'prefer-dark'
+    # Copy the dark theme to theme.css
+    cp "$WAYBAR_DIR/dark.css" "$WAYBAR_DIR/theme.css"
     notify-send "Dark Mode" -a "System"
 fi
+
+# Send SIGUSR2 to Waybar so it dynamically reloads style.css (which now imports theme.css)
+killall -SIGUSR2 waybar

dot-config/waybar/dark.css

@@ -0,0 +1,16 @@
+@define-color bg rgba(26, 27, 38, 0.8);
+@define-color bg_workspace rgba(26, 27, 38, 0.5);
+@define-color bg_module rgba(36, 40, 59, 0.8);
+@define-color text #ffffff;
+@define-color active_text #33ccff;
+@define-color inactive_text #565f89;
+@define-color urgent #f7768e;
+@define-color occupied #bb9af7;
+@define-color active_border #33ccff;
+@define-color active_bg1 rgba(51, 204, 255, 0.2);
+@define-color active_bg2 rgba(0, 255, 153, 0.2);
+@define-color hover_bg rgba(122, 162, 247, 0.2);
+@define-color hover_border #7aa2f7;
+@define-color clock #7aa2f7;
+@define-color network #9ece6a;
+@define-color tooltip_bg rgba(26, 27, 38, 0.9);

dot-config/waybar/light.css

@@ -0,0 +1,16 @@
+@define-color bg rgba(225, 226, 231, 0.9);
+@define-color bg_workspace rgba(225, 226, 231, 0.6);
+@define-color bg_module rgba(204, 208, 218, 0.9);
+@define-color text #4c4f69;
+@define-color active_text #1e66f5;
+@define-color inactive_text #8c8fa1;
+@define-color urgent #d20f39;
+@define-color occupied #8839ef;
+@define-color active_border #1e66f5;
+@define-color active_bg1 rgba(30, 102, 245, 0.2);
+@define-color active_bg2 rgba(32, 159, 181, 0.2);
+@define-color hover_bg rgba(4, 165, 229, 0.2);
+@define-color hover_border #04a5e5;
+@define-color clock #1e66f5;
+@define-color network #40a02b;
+@define-color tooltip_bg rgba(225, 226, 231, 0.95);

dot-config/waybar/style.css

@@ -1,3 +1,5 @@
+@import "theme.css";
+
 * {
     border: none;
     border-radius: 0;
@@ -7,49 +9,48 @@
 }
 
 window#waybar {
-    background-color: rgba(26, 27, 38, 0.8);
-    color: #ffffff;
+    background-color: @bg;
+    color: @text;
     transition-property: background-color;
     transition-duration: .5s;
     border-radius: 10px;
 }
 
 #workspaces {
-    background-color: rgba(26, 27, 38, 0.5);
+    background-color: @bg_workspace;
     margin: 5px;
     padding: 0 5px;
     border-radius: 10px;
 }
 
-/* Styling for our workspaces module */
 #workspaces button {
     padding: 0 10px;
-    color: #565f89;
+    color: @inactive_text;
     transition: all 0.3s ease;
     border-radius: 8px;
 }
 
 #workspaces button:hover {
-    background-color: rgba(122, 162, 247, 0.2);
-    box-shadow: inset 0 0 0 1px #7aa2f7;
+    background-color: @hover_bg;
+    box-shadow: inset 0 0 0 1px @hover_border;
 }
 
 #workspaces button.active {
-    color: #33ccff;
-    border-bottom: 2px solid #33ccff;
-    background: linear-gradient(45deg, rgba(51, 204, 255, 0.2), rgba(0, 255, 153, 0.2));
+    color: @active_text;
+    border-bottom: 2px solid @active_border;
+    background: linear-gradient(45deg, @active_bg1, @active_bg2);
 }
 
 #workspaces button.urgent {
-    color: #f7768e;
+    color: @urgent;
 }
 
 #workspaces button.persistent {
-    color: #565f89;
+    color: @inactive_text;
 }
 
 #workspaces button.occupied {
-    color: #bb9af7;
+    color: @occupied;
 }
 
 #clock,
@@ -58,38 +59,38 @@ window#waybar {
 #custom-vpn {
     padding: 0 15px;
     margin: 5px;
-    background-color: rgba(36, 40, 59, 0.8);
+    background-color: @bg_module;
     border-radius: 8px;
 }
 
 #clock {
-    color: #7aa2f7;
+    color: @clock;
 }
 
 #network {
-    color: #9ece6a;
+    color: @network;
 }
 
 #network.vpn {
-    color: #bb9af7;
+    color: @occupied;
     margin-right: 0;
     padding-right: 5px;
 }
 
 #pulseaudio {
-    color: #f7768e;
+    color: @urgent;
 }
 
 #pulseaudio.muted {
-    color: #565f89;
+    color: @inactive_text;
 }
 
 tooltip {
-    background: rgba(26, 27, 38, 0.9);
-    border: 1px solid #33ccff;
+    background: @tooltip_bg;
+    border: 1px solid @active_border;
     border-radius: 10px;
 }
 
 tooltip label {
-    color: #ffffff;
-}
+    color: @text;
+}

dot-config/waybar/theme.css

@@ -0,0 +1,16 @@
+@define-color bg rgba(225, 226, 231, 0.9);
+@define-color bg_workspace rgba(225, 226, 231, 0.6);
+@define-color bg_module rgba(204, 208, 218, 0.9);
+@define-color text #4c4f69;
+@define-color active_text #1e66f5;
+@define-color inactive_text #8c8fa1;
+@define-color urgent #d20f39;
+@define-color occupied #8839ef;
+@define-color active_border #1e66f5;
+@define-color active_bg1 rgba(30, 102, 245, 0.2);
+@define-color active_bg2 rgba(32, 159, 181, 0.2);
+@define-color hover_bg rgba(4, 165, 229, 0.2);
+@define-color hover_border #04a5e5;
+@define-color clock #1e66f5;
+@define-color network #40a02b;
+@define-color tooltip_bg rgba(225, 226, 231, 0.95);