Fixed an issue where the correct global colors to the icon weren't being applied in split variant. (#409)

* Fix global icon coloring

* Fix themes

* Update custom modules to use global colors if enabled

* Fix icons

* Fix custom module icon color

scss/style/bar/audio.scss

@@ -13,7 +13,7 @@
     .bar-button-icon.volume {
         border-top-left-radius: $bar-buttons-radius;
         border-bottom-left-radius: $bar-buttons-radius;
-        background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-volume-icon_background);
+        background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-volume-icon_background);
         padding: $bar-buttons-padding_y 0em;
         padding-left: $bar-buttons-padding_x;
         padding-right: $bar-buttons-volume-spacing;
@@ -27,6 +27,7 @@
             $bar-buttons-radius * 0.4,
             $bar-buttons-radius
         );
+        color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-volume-icon);
     }
 
     .bar-button-label.volume {

scss/style/bar/battery.scss

@@ -11,7 +11,7 @@
     .bar-button-icon.battery {
         border-top-left-radius: $bar-buttons-radius;
         border-bottom-left-radius: $bar-buttons-radius;
-        background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-battery-icon_background);
+        background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-battery-icon_background);
         padding: $bar-buttons-padding_y 0em;
         padding-left: $bar-buttons-padding_x;
         padding-right: $bar-buttons-battery-spacing;
@@ -29,6 +29,7 @@
         &:last-child {
             border-radius: $bar-buttons-radius;
         }
+        color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-battery-icon);
     }
 
     .bar-button-label.battery {
@@ -60,4 +61,3 @@
         0em
     );
 }
-

scss/style/bar/bluetooth.scss

@@ -23,7 +23,7 @@
     .bar-button-icon.bluetooth {
         border-top-left-radius: $bar-buttons-radius;
         border-bottom-left-radius: $bar-buttons-radius;
-        background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-bluetooth-icon_background);
+        background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-bluetooth-icon_background);
         padding: $bar-buttons-padding_y 0em;
         padding-left: $bar-buttons-padding_x;
         padding-right: $bar-buttons-bluetooth-spacing;
@@ -37,6 +37,7 @@
             $bar-buttons-radius * 0.4,
             $bar-buttons-radius
         );
+        color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-bluetooth-icon);
     }
 
     .bar-button-label.bluetooth {

scss/style/bar/clock.scss

@@ -12,7 +12,7 @@
     .bar-button-icon.clock {
         border-top-left-radius: $bar-buttons-radius;
         border-bottom-left-radius: $bar-buttons-radius;
-        background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-clock-icon_background);
+        background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-clock-icon_background);
         padding: $bar-buttons-padding_y 0em;
         padding-left: $bar-buttons-padding_x;
         padding-right: $bar-buttons-clock-spacing;
@@ -26,6 +26,7 @@
             $bar-buttons-radius * 0.4,
             $bar-buttons-radius
         );
+        color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-clock-icon);
     }
 
     .bar-button-label.clock {

scss/style/bar/media.scss

@@ -10,7 +10,7 @@
 
 .style2 {
     .bar-button-icon.media {
-        background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-media-icon_background);
+        background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-media-icon_background);
         padding: $bar-buttons-padding_y 0em;
         padding-left: $bar-buttons-padding_x;
         padding-right: $bar-buttons-media-spacing;
@@ -24,6 +24,7 @@
             $bar-buttons-radius * 0.4,
             $bar-buttons-radius
         );
+        color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-media-icon);
     }
 
     .bar-button-label.media {

scss/style/bar/menu.scss

@@ -5,7 +5,7 @@
 }
 
 .bar_item_box_visible.style2.dashboard {
-    background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-dashboard-background);
+    background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-dashboard-background);
 
     .bar-menu_label {
         color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-dashboard-icon);

scss/style/bar/network.scss

@@ -11,7 +11,7 @@
     .bar-button-icon.network-icon {
         border-top-left-radius: $bar-buttons-radius;
         border-bottom-left-radius: $bar-buttons-radius;
-        background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-network-icon_background);
+        background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-network-icon_background);
         padding: $bar-buttons-padding_y 0em;
         padding-left: $bar-buttons-padding_x;
         padding-right: $bar-buttons-network-spacing;
@@ -25,6 +25,7 @@
             $bar-buttons-radius * 0.4,
             $bar-buttons-radius
         );
+        color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-network-icon);
     }
 
     .bar-button-label.network-label {

scss/style/bar/notifications.scss

@@ -13,7 +13,11 @@
     .bar-button-icon.notifications {
         border-top-left-radius: $bar-buttons-radius;
         border-bottom-left-radius: $bar-buttons-radius;
-        background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-notifications-icon_background);
+        background: if(
+            $bar-buttons-monochrome,
+            $bar-buttons-icon_background,
+            $bar-buttons-notifications-icon_background
+        );
         padding: $bar-buttons-padding_y 0em;
         padding-left: $bar-buttons-padding_x;
         padding-right: $bar-buttons-notifications-spacing;
@@ -27,11 +31,11 @@
             $bar-buttons-radius * 0.4,
             $bar-buttons-radius
         );
-        color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-notifications-icon);
-
         &:last-child {
             border-radius: $bar-buttons-radius;
         }
+
+        color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-notifications-icon);
     }
 
     .bar-button-label.notifications {

scss/style/bar/window_title.scss

@@ -15,7 +15,7 @@
     .bar-button-icon.windowtitle {
         border-top-left-radius: $bar-buttons-radius;
         border-bottom-left-radius: $bar-buttons-radius;
-        background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-windowtitle-icon_background);
+        background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-windowtitle-icon_background);
         padding: $bar-buttons-padding_y 0em;
         padding-left: $bar-buttons-padding_x;
         padding-right: $bar-buttons-windowtitle-spacing;
@@ -29,6 +29,7 @@
             $bar-buttons-radius * 0.4,
             $bar-buttons-radius
         );
+        color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-windowtitle-icon);
     }
 
     .bar-button-label.windowtitle {

scss/style/customModules/style.scss

@@ -54,7 +54,10 @@
     $transparency-value-hover: 1 - $bar-button-background-hover-opacity-ratio;
     .bar_item_box_visible {
         &.#{$class} {
-            background: transparentize($labelBackground, $transparency-value);
+            background: transparentize(
+                if($bar-buttons-monochrome, $bar-buttons-background, $labelBackground),
+                $transparency-value
+            );
             border: if(
                 $borderEnabled or $bar-buttons-enableBorders,
                 $bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-icon, $borderColor),
@@ -84,9 +87,9 @@
 
     .style2 {
         .module-icon.#{$class} {
-            background: if($bar-buttons-monochrome, $bar-buttons-icon, $iconBackground);
+            background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $iconBackground);
             padding-right: $spacing;
-            color: if($bar-buttons-monochrome, $bar-buttons-background, $iconColor);
+            color: if($bar-buttons-monochrome, $bar-buttons-icon, $iconColor);
             border-top-left-radius: if(
                 $borderEnabled or $bar-buttons-enableBorders,
                 $bar-buttons-radius * 0.4,

themes/catppuccin_frappe_split.json

@@ -3,7 +3,7 @@
   "theme.bar.background": "#232634",
   "theme.bar.buttons.media.icon": "#303446",
   "theme.bar.buttons.media.text": "#babbf1",
-  "theme.bar.buttons.icon": "#babbf1",
+  "theme.bar.buttons.icon": "#242438",
   "theme.bar.buttons.text": "#babbf1",
   "theme.bar.buttons.hover": "#51576d",
   "theme.bar.buttons.background": "#303446",
@@ -251,7 +251,7 @@
   "theme.bar.menus.check_radio_button.background": "#232534",
   "theme.bar.menus.check_radio_button.active": "#b9baf1",
   "theme.bar.buttons.style": "split",
-  "theme.bar.buttons.icon_background": "#242438",
+  "theme.bar.buttons.icon_background": "#babbf1",
   "theme.bar.buttons.volume.icon_background": "#ea999c",
   "theme.bar.buttons.network.icon_background": "#ca9ee6",
   "theme.bar.buttons.bluetooth.icon_background": "#99d1db",

themes/catppuccin_latte_split.json

@@ -309,10 +309,10 @@
   "theme.bar.buttons.dashboard.icon": "#dcdee8",
   "theme.bar.buttons.dashboard.border": "#df8e1d",
   "theme.bar.buttons.dashboard.background": "#df8e1d",
-  "theme.bar.buttons.icon": "#7287fd",
+  "theme.bar.buttons.icon": "#242438",
   "theme.bar.buttons.text": "#7287fd",
   "theme.bar.buttons.hover": "#bcc0cc",
-  "theme.bar.buttons.icon_background": "#242438",
+  "theme.bar.buttons.icon_background": "#7287fd",
   "theme.bar.buttons.background": "#e6e9ef",
   "theme.bar.buttons.style": "split",
   "theme.bar.background": "#eff1f5",

themes/catppuccin_macchiato_split.json

@@ -3,7 +3,7 @@
   "theme.bar.background": "#181926",
   "theme.bar.buttons.media.icon": "#24273a",
   "theme.bar.buttons.media.text": "#b7bdf8",
-  "theme.bar.buttons.icon": "#b7bdf8",
+  "theme.bar.buttons.icon": "#242438",
   "theme.bar.buttons.text": "#b7bdf8",
   "theme.bar.buttons.hover": "#494d64",
   "theme.bar.buttons.background": "#24273a",
@@ -251,7 +251,7 @@
   "theme.bar.menus.check_radio_button.background": "#181826",
   "theme.bar.menus.check_radio_button.active": "#b7bcf8",
   "theme.bar.buttons.style": "split",
-  "theme.bar.buttons.icon_background": "#242438",
+  "theme.bar.buttons.icon_background": "#b7bdf8",
   "theme.bar.buttons.volume.icon_background": "#ee999f",
   "theme.bar.buttons.network.icon_background": "#c5a0f6",
   "theme.bar.buttons.bluetooth.icon_background": "#91d7e3",

themes/catppuccin_mocha_split.json

@@ -3,7 +3,7 @@
   "theme.bar.background": "#11111b",
   "theme.bar.buttons.media.icon": "#1e1e2e",
   "theme.bar.buttons.media.text": "#b4befe",
-    "theme.bar.buttons.icon": "#b4befe",
+  "theme.bar.buttons.icon": "#242438",
   "theme.bar.buttons.text": "#b4befe",
   "theme.bar.buttons.hover": "#45475a",
   "theme.bar.buttons.background": "#242438",
@@ -251,7 +251,7 @@
   "theme.bar.menus.check_radio_button.background": "#45475a",
   "theme.bar.menus.check_radio_button.active": "#b4beff",
   "theme.bar.buttons.style": "split",
-    "theme.bar.buttons.icon_background": "#242438",
+  "theme.bar.buttons.icon_background": "#b4befe",
   "theme.bar.buttons.volume.icon_background": "#eba0ac",
   "theme.bar.buttons.network.icon_background": "#caa6f7",
   "theme.bar.buttons.bluetooth.icon_background": "#89dbeb",

themes/cyberpunk_split.json

@@ -290,10 +290,10 @@
   "theme.bar.buttons.workspaces.background": "#121212",
   "theme.bar.buttons.dashboard.icon": "#121212",
   "theme.bar.buttons.dashboard.background": "#f7d04b",
-  "theme.bar.buttons.icon": "#FFD700",
+  "theme.bar.buttons.icon": "#242438",
   "theme.bar.buttons.text": "#00FFFF",
   "theme.bar.buttons.hover": "#333333",
-  "theme.bar.buttons.icon_background": "#242438",
+  "theme.bar.buttons.icon_background": "#FFD700",
   "theme.bar.buttons.background": "#111111",
   "theme.bar.buttons.style": "split",
   "theme.bar.background": "#0A0A0A",

themes/dracula_split.json

@@ -309,10 +309,10 @@
   "theme.bar.buttons.dashboard.icon": "#44475a",
   "theme.bar.buttons.dashboard.border": "#8be8fd",
   "theme.bar.buttons.dashboard.background": "#8be8fd",
-  "theme.bar.buttons.icon": "#bd93f9",
+  "theme.bar.buttons.icon": "#242438",
   "theme.bar.buttons.text": "#bd93f9",
   "theme.bar.buttons.hover": "#44475a",
-  "theme.bar.buttons.icon_background": "#242438",
+  "theme.bar.buttons.icon_background": "#bd93f9",
   "theme.bar.buttons.background": "#282936",
   "theme.bar.buttons.style": "split",
   "theme.bar.background": "#282a36",

themes/everforest_split.json

@@ -3,7 +3,7 @@
   "theme.bar.background": "#2b3339",
   "theme.bar.buttons.media.icon": "#323d43",
   "theme.bar.buttons.media.text": "#a7c080",
-  "theme.bar.buttons.icon": "#a7c080",
+  "theme.bar.buttons.icon": "#242438",
   "theme.bar.buttons.text": "#a7c080",
   "theme.bar.buttons.hover": "#445055",
   "theme.bar.buttons.background": "#323d43",
@@ -251,7 +251,7 @@
   "theme.bar.menus.check_radio_button.background": "#000000",
   "theme.bar.menus.check_radio_button.active": "#ffffff",
   "theme.bar.buttons.style": "split",
-  "theme.bar.buttons.icon_background": "#242438",
+  "theme.bar.buttons.icon_background": "#a7c080",
   "theme.bar.buttons.volume.icon_background": "#dbbc7f",
   "theme.bar.buttons.network.icon_background": "#e69875",
   "theme.bar.buttons.bluetooth.icon_background": "#a7c080",

themes/gruvbox_split.json

@@ -290,10 +290,10 @@
   "theme.bar.buttons.workspaces.background": "#282828",
   "theme.bar.buttons.dashboard.icon": "#282828",
   "theme.bar.buttons.dashboard.background": "#fabc2f",
-  "theme.bar.buttons.icon": "#83a598",
+  "theme.bar.buttons.icon": "#242438",
   "theme.bar.buttons.text": "#83a598",
   "theme.bar.buttons.hover": "#504945",
-  "theme.bar.buttons.icon_background": "#242438",
+  "theme.bar.buttons.icon_background": "#83a598",
   "theme.bar.buttons.background": "#282828",
   "theme.bar.buttons.style": "split",
   "theme.bar.background": "#1d2021",

themes/monochrome_split.json

@@ -3,7 +3,7 @@
   "theme.bar.background": "#000000",
   "theme.bar.buttons.media.icon": "#090909",
   "theme.bar.buttons.media.text": "#FFFFFF",
-  "theme.bar.buttons.icon": "#FFFFFF",
+  "theme.bar.buttons.icon": "#242438",
   "theme.bar.buttons.text": "#FFFFFF",
   "theme.bar.buttons.hover": "#333333",
   "theme.bar.buttons.background": "#1A1A1A",
@@ -251,7 +251,7 @@
   "theme.bar.menus.check_radio_button.background": "#000000",
   "theme.bar.menus.check_radio_button.active": "#ffffff",
   "theme.bar.buttons.style": "split",
-  "theme.bar.buttons.icon_background": "#242438",
+  "theme.bar.buttons.icon_background": "#FFFFFF",
   "theme.bar.buttons.volume.icon_background": "#ffffff",
   "theme.bar.buttons.network.icon_background": "#ffffff",
   "theme.bar.buttons.bluetooth.icon_background": "#ffffff",

themes/nord_split.json

@@ -3,7 +3,7 @@
   "theme.bar.background": "#2e3440",
   "theme.bar.buttons.media.icon": "#3b4252",
   "theme.bar.buttons.media.text": "#88c0d0",
-  "theme.bar.buttons.icon": "#88c0d0",
+  "theme.bar.buttons.icon": "#242438",
   "theme.bar.buttons.text": "#88c0d0",
   "theme.bar.buttons.hover": "#434c53",
   "theme.bar.buttons.background": "#3b4252",
@@ -251,7 +251,7 @@
   "theme.bar.menus.check_radio_button.background": "#2e3440",
   "theme.bar.menus.check_radio_button.active": "#88c0d0",
   "theme.bar.buttons.style": "split",
-  "theme.bar.buttons.icon_background": "#242438",
+  "theme.bar.buttons.icon_background": "#88c0d0",
   "theme.bar.buttons.volume.icon_background": "#81a1c1",
   "theme.bar.buttons.network.icon_background": "#88c0d0",
   "theme.bar.buttons.bluetooth.icon_background": "#88c0d0",

themes/one_dark_split.json

@@ -3,7 +3,7 @@
   "theme.bar.background": "#282c34",
   "theme.bar.buttons.media.icon": "#21252b",
   "theme.bar.buttons.media.text": "#61afef",
-  "theme.bar.buttons.icon": "#61afef",
+  "theme.bar.buttons.icon": "#242438",
   "theme.bar.buttons.text": "#61afef",
   "theme.bar.buttons.hover": "#3e4451",
   "theme.bar.buttons.background": "#3e4451",
@@ -251,7 +251,7 @@
   "theme.bar.menus.check_radio_button.background": "#2e3440",
   "theme.bar.menus.check_radio_button.active": "#88c0d0",
   "theme.bar.buttons.style": "split",
-  "theme.bar.buttons.icon_background": "#242438",
+  "theme.bar.buttons.icon_background": "#61afef",
   "theme.bar.buttons.volume.icon_background": "#e06c75",
   "theme.bar.buttons.network.icon_background": "#c678dd",
   "theme.bar.buttons.bluetooth.icon_background": "#61afef",

themes/rose_pine_moon_split.json

@@ -3,7 +3,7 @@
   "theme.bar.background": "#232136",
   "theme.bar.buttons.media.icon": "#2a283e",
   "theme.bar.buttons.media.text": "#c4a7e7",
-  "theme.bar.buttons.icon": "#c4a7e7",
+  "theme.bar.buttons.icon": "#242438",
   "theme.bar.buttons.text": "#c4a7e7",
   "theme.bar.buttons.hover": "#393552",
   "theme.bar.buttons.background": "#2a283e",
@@ -251,7 +251,7 @@
   "theme.bar.menus.check_radio_button.background": "#393452",
   "theme.bar.menus.check_radio_button.active": "#c4a7e7",
   "theme.bar.buttons.style": "split",
-  "theme.bar.buttons.icon_background": "#242438",
+  "theme.bar.buttons.icon_background": "#c4a7e7",
   "theme.bar.buttons.volume.icon_background": "#eb6f92",
   "theme.bar.buttons.network.icon_background": "#c4a7e7",
   "theme.bar.buttons.bluetooth.icon_background": "#9ccfd8",

themes/rose_pine_split.json

@@ -3,7 +3,7 @@
   "theme.bar.background": "#191724",
   "theme.bar.buttons.media.icon": "#21202e",
   "theme.bar.buttons.media.text": "#c4a7e7",
-  "theme.bar.buttons.icon": "#c4a7e7",
+  "theme.bar.buttons.icon": "#242438",
   "theme.bar.buttons.text": "#c4a7e7",
   "theme.bar.buttons.hover": "#26233a",
   "theme.bar.buttons.background": "#21202e",
@@ -251,7 +251,7 @@
   "theme.bar.menus.check_radio_button.background": "#393452",
   "theme.bar.menus.check_radio_button.active": "#c4a7e7",
   "theme.bar.buttons.style": "split",
-  "theme.bar.buttons.icon_background": "#242438",
+  "theme.bar.buttons.icon_background": "#c4a7e7",
   "theme.bar.buttons.volume.icon_background": "#eb6f92",
   "theme.bar.buttons.network.icon_background": "#c4a7e7",
   "theme.bar.buttons.bluetooth.icon_background": "#9ccfd8",

themes/tokyo_night_split.json

@@ -3,7 +3,7 @@
   "theme.bar.background": "#1a1b26",
   "theme.bar.buttons.media.icon": "#272a3d",
   "theme.bar.buttons.media.text": "#bb9af7",
-  "theme.bar.buttons.icon": "#bb9af7",
+  "theme.bar.buttons.icon": "#242438",
   "theme.bar.buttons.text": "#bb9af7",
   "theme.bar.buttons.hover": "#414868",
   "theme.bar.buttons.background": "#272a3d",
@@ -251,7 +251,7 @@
   "theme.bar.menus.check_radio_button.background": "#3b4261",
   "theme.bar.menus.check_radio_button.active": "#bb9af7",
   "theme.bar.buttons.style": "split",
-  "theme.bar.buttons.icon_background": "#242438",
+  "theme.bar.buttons.icon_background": "#bb9af7",
   "theme.bar.buttons.volume.icon_background": "#f7768e",
   "theme.bar.buttons.network.icon_background": "#bb9af7",
   "theme.bar.buttons.bluetooth.icon_background": "#7dcfff",

widget/settings/pages/config/menus/volume.ts

@@ -16,6 +16,7 @@ export const VolumeMenuSettings = (): Scrollable<Child, Attribute> => {
                 Option({
                     opt: options.menus.volume.raiseMaximumVolume,
                     title: 'Allow Raising Volume Above 100%',
+                    subtitle: 'Allows the volume slider in the menu to go up to 150% volume',
                     type: 'boolean',
                 }),
             ],