update colors and change mode module

catppuccin-macchiato/style.css

@@ -1,4 +1,5 @@
 @import url("./colors.css");
+@import url("./highlights.css");
 
 * {
   border: none;
@@ -85,7 +86,7 @@ button:hover {
   background-image: linear-gradient(0deg, @surface1, @mantle);
 }
 
-#mode {
+#submap {
   background-color: @base;
   box-shadow: inset 0 -2px @text;
 }
@@ -103,7 +104,7 @@ button:hover {
 #custom-kernel,
 #idle_inhibitor,
 #scratchpad,
-#mode,
+#submap,
 #tray {
   padding: 0 10px;
   margin: 5px 1px;
@@ -167,7 +168,7 @@ label:focus {
 }
 
 #network.disconnected {
-  background-color: red;
+  background-color: @red;
   color: @mantle;
 }
 
@@ -178,7 +179,7 @@ label:focus {
 }
 
 #pulseaudio {
-  background-color: @yellow;
+  background-color: @sapphire;
   color: @mantle;
 }
 
@@ -242,7 +243,7 @@ label:focus {
 
 #custom-mpd-scroll {
   color: @base;
-  background-color: @blue;
+  background-color: @mauve;
   padding: 0 10px;
   margin: 5px 1px;
 }
@@ -261,7 +262,7 @@ label:focus {
 
 #custom-firefox {
   color: @base;
-  background-color: @pink;
+  background-color: @peach;
   padding: 0 10px;
   margin: 5px 1px;
 }