Finishing theming for waybar with stylix

config/hyprland.nix

@@ -9,7 +9,6 @@
 }:
 
 let
-  theme = config.colorScheme.palette;
   hyprplugins = inputs.hyprland-plugins.packages.${pkgs.system};
   inherit (import ../hosts/${host}/variables.nix)
     browser
@@ -141,6 +140,7 @@ with lib;
                 bind = ${modifier},S,exec,screenshootin
                 bind = ${modifier},D,exec,discord
                 bind = ${modifier},O,exec,obs
+                bind = ${modifier},C,exec,hyprpicker
                 bind = ${modifier},G,exec,gimp
                 bind = ${modifier}SHIFT,G,exec,godot4
                 bind = ${modifier},T,exec,thunar

config/waybar.nix

@@ -2,6 +2,7 @@
   pkgs,
   lib,
   host,
+  config,
   ...
 }:
 
@@ -188,17 +189,20 @@ with lib;
     style = concatStrings [
       ''
         * {
+          font-family: JetBrainsMono Nerd Font Mono;
           font-size: 16px;
           border-radius: 0px;
           border: none;
-          font-family: JetBrainsMono Nerd Font Mono;
           min-height: 0px;
         }
-          window#waybar {
+        window#waybar {
+          background: #${config.stylix.base16Scheme.base00};
         }
         #workspaces {
+          color: #${config.stylix.base16Scheme.base00};
+          background: #${config.stylix.base16Scheme.base01};
           margin: 4px 4px;
-          padding: 8px 5px;
+          padding: 5px 5px;
           border-radius: 16px;
         }
         #workspaces button {
@@ -206,6 +210,8 @@ with lib;
           padding: 0px 5px;
           margin: 0px 3px;
           border-radius: 16px;
+          color: #${config.stylix.base16Scheme.base00};
+          background: linear-gradient(45deg, #${config.stylix.base16Scheme.base08}, #${config.stylix.base16Scheme.base0D});
           opacity: 0.5;
           transition: ${betterTransition};
         }
@@ -214,6 +220,8 @@ with lib;
           padding: 0px 5px;
           margin: 0px 3px;
           border-radius: 16px;
+          color: #${config.stylix.base16Scheme.base00};
+          background: linear-gradient(45deg, #${config.stylix.base16Scheme.base08}, #${config.stylix.base16Scheme.base0D});
           transition: ${betterTransition};
           opacity: 1.0;
           min-width: 40px;
@@ -221,20 +229,31 @@ with lib;
         #workspaces button:hover {
           font-weight: bold;
           border-radius: 16px;
+          color: #${config.stylix.base16Scheme.base00};
+          background: linear-gradient(45deg, #${config.stylix.base16Scheme.base08}, #${config.stylix.base16Scheme.base0D});
           opacity: 0.8;
           transition: ${betterTransition};
         }
         tooltip {
-          border-radius: 14px;
+          background: #${config.stylix.base16Scheme.base00};
+          border: 1px solid #${config.stylix.base16Scheme.base08};
+          border-radius: 12px;
+        }
+        tooltip label {
+          color: #${config.stylix.base16Scheme.base08};
         }
         #window, #pulseaudio, #cpu, #memory, #idle_inhibitor {
           font-weight: bold;
           margin: 4px 0px;
           margin-left: 7px;
           padding: 0px 18px;
+          background: #${config.stylix.base16Scheme.base04};
+          color: #${config.stylix.base16Scheme.base00};
           border-radius: 24px 10px 24px 10px;
         }
         #custom-startmenu {
+          color: #${config.stylix.base16Scheme.base0B};
+          background: #${config.stylix.base16Scheme.base02};
           font-size: 28px;
           margin: 0px;
           padding: 0px 30px 0px 15px;
@@ -243,6 +262,8 @@ with lib;
         #custom-hyprbindings, #network, #custom-themeselector, #battery,
         #custom-notification, #tray, #custom-exit {
           font-weight: bold;
+          background: #${config.stylix.base16Scheme.base0F};
+          color: #${config.stylix.base16Scheme.base05};
           margin: 4px 0px;
           margin-right: 7px;
           border-radius: 10px 24px 10px 24px;
@@ -250,6 +271,8 @@ with lib;
         }
         #clock {
           font-weight: bold;
+          color: #0D0E15;
+          background: linear-gradient(90deg, #${config.stylix.base16Scheme.base0E}, #${config.stylix.base16Scheme.base0C});
           margin: 0px;
           padding: 0px 15px 0px 30px;
           border-radius: 0px 0px 0px 40px;

hosts/default/variables.nix

@@ -12,7 +12,6 @@
 
   # Waybar Settings
   clock24h = false;
-  waybarAnimations = false;
 
   # Program Options
   browser = "firefox"; # Set Default Browser (google-chrome-stable for google-chrome)

hosts/familypc/config.nix

@@ -47,6 +47,24 @@
 
   # Styling Options
   stylix.image = ../../config/wallpapers/zaney-wallpaper.jpg;
+  stylix.base16Scheme = {
+    base00 = "232136";
+    base01 = "2a273f";
+    base02 = "393552";
+    base03 = "6e6a86";
+    base04 = "908caa";
+    base05 = "e0def4";
+    base06 = "e0def4";
+    base07 = "56526e";
+    base08 = "eb6f92";
+    base09 = "f6c177";
+    base0A = "ea9a97";
+    base0B = "3e8fb0";
+    base0C = "9ccfd8";
+    base0D = "c4a7e7";
+    base0E = "f6c177";
+    base0F = "56526e";
+  };
   stylix.polarity = "dark";
   stylix.cursor.package = pkgs.bibata-cursors;
   stylix.cursor.name = "Bibata-Modern-Ice";
@@ -170,6 +188,7 @@
       lshw
       pkg-config
       meson
+      hyprpicker
       gnumake
       ninja
       symbola

hosts/familypc/home.nix

@@ -113,6 +113,9 @@ in
     };
   };
 
+  # Styling Options
+  stylix.targets.waybar.enable = false;
+
   # Scripts
   home.packages = [
     (import ../../scripts/emopicker9000.nix { inherit pkgs; })
@@ -321,7 +324,7 @@ in
             path = "/home/${username}/.config/face.jpg";
             size = 150;
             border_size = 4;
-            border_color = "rgb(${lib.stylix.colors.base08})";
+            border_color = "rgb(0C96F9)";
             rounding = -1; # Negative means circle
             position = "0, 200";
             halign = "center";
@@ -335,9 +338,9 @@ in
             monitor = "";
             dots_center = true;
             fade_on_empty = false;
-            font_color = "rgb(${lib.stylix.colors.base08})";
-            inner_color = "rgb(${lib.stylix.colors.base01})";
-            outer_color = "rgb(${lib.stylix.colors.base00})";
+            font_color = "rgb(CFE6F4)";
+            inner_color = "rgb(657DC2)";
+            outer_color = "rgb(0D0E15)";
             outline_thickness = 5;
             placeholder_text = "Password...";
             shadow_passes = 2;

hosts/familypc/variables.nix

@@ -12,7 +12,6 @@
 
   # Waybar Settings
   clock24h = false;
-  waybarAnimations = false;
 
   # Program Options
   browser = "firefox"; # Set Default Browser (google-chrome-stable for google-chrome)