waybar.css now as nix with substitution

modules/niri/default.nix

@@ -41,7 +41,7 @@ in {
       programs.waybar = {
         enable = true;
         settings = import ./waybar.conf.nix { config = config; };
-        style = builtins.readFile(./waybar.conf.css);
+        style = (import ./waybar.css.nix { config = config; }).style;
       };
 
       programs.swaylock = {

modules/niri/niri.conf.nix

@@ -50,8 +50,8 @@
         { proportion = 0.75; }
       ];
 
-      default-column-width = { proportion = 0.25; };
-      gaps = 4;
+      default-column-width = { proportion = 0.5; };
+      gaps = 16;
   };
 
   window-rules = [
@@ -78,7 +78,7 @@
     { command = ["waybar"]; }
     { command = ["wpctl" "set-volume" "@DEFAULT_AUDIO_SINK@" "0"]; }
     { command = ["brightnessctl" "s" "50%"]; }
-    { command = ["swaybg" "-c" "1f1d2e"]; }
+    { command = ["swaybg" "-i" "${./wallpaper.png}"]; }
     { command = ["swayidle" "-w" "before-sleep" "swaylock"]; }
   ];
 

modules/niri/waybar.conf.css

@@ -1,53 +0,0 @@
-* {
-    border: none;
-    font-family: FiraCodeNerdFont;
-    font-size: 13px;
-    color: #191724;
-    border-radius: 20px;
-}
-
-window#waybar {
-    background: rgba(0, 0, 0, 0);
-}
-
-/*-----module groups----*/
-.modules-right {
-    background-color: #c4a7e7;
-    margin: 2px 10px 0 0;
-}
-.modules-center {
-    background-color: #c4a7e7;
-    margin: 2px 0 0 0;
-}
-.modules-left {
-    margin: 2px 0 0 10px;
-    background-color: #c4a7e7;
-}
-
-#clock,
-#battery,
-#memory,
-#network,
-#temperature,
-#wireplumber {
-    padding: 0 15px;
-}
-
-#cpu {
-    padding: 0 0 0 15px;
-}
-
-/*-----Indicators----*/
-#battery.charging {
-    color: #31748f;
-}
-#battery.warning:not(.charging) {
-	color: #eb6f92;
-}
-#battery.critical:not(.charging) {
-    color: #eb6f92;
-}
-
-#temperature.critical {
-    color: #eb6f92;
-}

modules/niri/waybar.css.nix

@@ -0,0 +1,63 @@
+{ config, ... }: let
+    background = config.theme.base;
+    font = config.theme.text;
+    charging = config.theme.pine;
+    warning = config.theme.rose;
+    critical = config.theme.love;
+in {
+    style = ''
+        * {
+            border: none;
+            font-family: FiraCodeNerdFont;
+            font-size: 18px;
+            color: ${font};
+            border-radius: 20px;
+        }
+
+        window#waybar {
+            background: rgba(0, 0, 0, 0);
+        }
+
+        /*-----module groups----*/
+        .modules-right {
+            background-color: ${background};
+            margin: 2px 10px 0 0;
+        }
+        .modules-center {
+            background-color: ${background};
+            margin: 2px 0 0 0;
+        }
+        .modules-left {
+            margin: 2px 0 0 10px;
+            background-color: ${background};
+        }
+
+        #clock,
+        #battery,
+        #memory,
+        #network,
+        #temperature,
+        #wireplumber {
+            padding: 0 15px;
+        }
+
+        #cpu {
+            padding: 0 0 0 15px;
+        }
+
+        /*-----Indicators----*/
+        #battery.charging {
+            color: ${charging};
+        }
+        #battery.warning:not(.charging) {
+        	color: ${warning};
+        }
+        #battery.critical:not(.charging) {
+            color: ${critical};
+        }
+
+        #temperature.critical {
+            color: ${critical};
+        }
+    '';
+}