fix: no colors set for cpu, mem or temp on waybar

home-manager/dotfiles/waybar/config.jsonc

@@ -18,7 +18,6 @@
         "cpu",
         "memory",
         "temperature",
-        "keyboard-state",
         "battery",
         "clock",
         "tray"
@@ -43,7 +42,7 @@
     "keyboard-state": {
         "numlock": true,
         "capslock": true,
-        "format": "{name} {icon}",
+        "format": "{name} {icon} ",
         "format-icons": {
             "locked": "",
             "unlocked": ""

home-manager/dotfiles/waybar/style.css

@@ -1,57 +1,57 @@
 @import "mocha.css"; 
 
 * {
-    font-family: "ComicCodeLigatures";
-    font-size: 16px;
-    min-height: 0;
-    font-weight: bold;
+  font-family: "ComicCodeLigatures";
+  font-size: 16px;
+  min-height: 0;
+  font-weight: bold;
 }
 
 window#waybar {
-    background: transparent;
-    background-color: @crust;
-    color: @overlay0;
-    transition-property: background-color;
-    transition-duration: 0.1s;
-    border-bottom: 1px solid @overlay1;
+  background: transparent;
+  background-color: @crust;
+  color: @overlay0;
+  transition-property: background-color;
+  transition-duration: 0.1s;
+border-bottom: 1px solid @overlay1;
 }
 
 #window {
-    margin: 8px;
-    padding-left: 8;
-    padding-right: 8;
+  margin: 8px;
+  padding-left: 8;
+  padding-right: 8;
 }
 
 button {
-    box-shadow: inset 0 -3px transparent;
-    border: none;
-    border-radius: 0;
+  box-shadow: inset 0 -3px transparent;
+  border: none;
+  border-radius: 0;
 }
 
 button:hover {
-    background: inherit;
-    color: @mauve;
-    border-top: 2px solid @mauve;
+  background: inherit;
+  color: @mauve;
+  border-top: 2px solid @mauve;
 }
 
 #workspaces button {
-    padding: 0 4px;
+  padding: 0 4px;
 }
 
 #workspaces button.focused {
-    background-color: rgba(0, 0, 0, 0.3);
-    color: @rosewater;
-    border-top: 2px solid @rosewater;
+  background-color: rgba(0, 0, 0, 0.3);
+  color: @rosewater;
+  border-top: 2px solid @rosewater;
 }
 
 #workspaces button.active {
-    background-color: rgba(0, 0, 0, 0.3);
-    color: @mauve;
-    border-top: 2px solid @mauve;
+  background-color: rgba(0, 0, 0, 0.3);
+  color: @mauve;
+  border-top: 2px solid @mauve;
 }
 
 #workspaces button.urgent {
-    background-color: #eb4d4b;
+  background-color: #eb4d4b;
 }
 
 #pulseaudio,
@@ -75,53 +75,68 @@ button:hover {
   padding-right: 4px;
 }
 
+#cpu {
+  color: @mauve;
+  border-bottom: 2px solid @mauve;
+}
+
+#memory {
+  color: @teal;
+  border-bottom: 2px solid @teal;
+}
+
+#temperature {
+  color: @red;
+  border-bottom: 2px solid @red;
+}
+
 #clock {
-    color: @maroon;
-    border-bottom: 2px solid @maroon;
+  color: @maroon;
+  border-bottom: 2px solid @maroon;
 }
 
 #clock.date {
-    color: @mauve;
-    border-bottom: 2px solid @mauve;
+  color: @mauve;
+  border-bottom: 2px solid @mauve;
 }
 
 #pulseaudio {
-    color: @blue;
-    border-bottom: 2px solid @blue;
+  color: @blue;
+  border-bottom: 2px solid @blue;
 }
 
 #network {
-    color: @yellow;
-    border-bottom: 2px solid @yellow;
+  color: @yellow;
+  border-bottom: 2px solid @yellow;
 }
 
 #idle_inhibitor {
-    margin-right: 12px;
-    color: #7cb342;
+  margin-right: 12px;
+  color: #7cb342;
 }
 
 #idle_inhibitor.activated {
-    color: @red;
+  color: @red;
 }
 
 #battery {
-    color: @green;
-    border-bottom: 2px solid @green;
+  color: @green;
+  border-bottom: 2px solid @green;
 }
 
 /* If workspaces is the leftmost module, omit left margin */
 .modules-left>widget:first-child>#workspaces {
-    margin-left: 0;
+  margin-left: 0;
 }
 
 /* If workspaces is the rightmost module, omit right margin */
 .modules-right>widget:last-child>#workspaces {
-    margin-right: 0;
+  margin-right: 0;
 }
 
 #custom-vpn {
-    color: @lavender;
-    border-radius: 15px;
-    padding-left: 6px;
-    padding-right: 6px;
+  color: @lavender;
+  border-radius: 15px;
+  padding-left: 6px;
+  padding-right: 6px;
 }