tweak to style sub-menus

core.sh

@@ -257,6 +257,10 @@ round_corner() {
   sed -i "/\$default_corner:/s/12px/${corner}/" ${SRC_DIR}/_sass/_tweaks-temp.scss
 }
 
+install_submenu() {
+  sed -i "/\$submenu_style:/s/false/true/" ${SRC_DIR}/gnome-shell/sass/_tweaks-temp.scss
+}
+
 install_theme_color() {
   if [[ "$theme" != '' ]]; then
     case "$theme" in
@@ -320,6 +324,11 @@ theme_tweaks() {
   if [[ "$macstyle" == "true" ]] ; then
     install_mac
   fi
+  
+  if [[ "$submenu" == "true" ]] ; then
+    install_submenu
+  fi
+  
 }
 
 check_shell() {

install.sh

@@ -28,6 +28,7 @@ OPTIONS:
                           3. black:    Full black variant
                           4. primary:  Change radio icon checked color to primary theme color (Default is Green)
                           5. macos:    Change window buttons to MacOS style
+                          6. submenu:  Theme sub-menus, by Default submenus contrast
 
   --shell                 install gnome-shell version [38|40|42]
                           1. 38:       Gnome-shell version < 40.0
@@ -127,6 +128,11 @@ while [[ "$#" -gt 0 ]]; do
             echo -e "Install MacOS style window button version ..."
             shift
             ;;
+          submenu)
+            submenu="true"
+            echo -e "Install with themed sub-menus ..."
+            shift
+            ;;
           -*)
             break
             ;;

src/gnome-shell/sass/_colors.scss

@@ -104,3 +104,9 @@ $error_bg_color:        $red-400;
 $border_color:          if($variant == 'light', rgba($black, 0.12), rgba($white, 0.12));
 $highlight_color:       if($variant == 'light', rgba($white, 0.4),  rgba($white, 0.1));
 $alt_highlight_color:   rgba($white, 0.2);
+
+
+// extra colors for submenu_style
+$selected_fg_color: $fg_color;
+$selected_bg_color: rgba($accent_color, 0.2);
+$bg_color: $base_color;

src/gnome-shell/sass/_tweaks.scss

@@ -20,3 +20,6 @@ $corner_style: 'default';
 } @else {
   $corner_style: 'square';
 }
+
+// Default sub-menu styling
+$submenu_style: 'false';

src/gnome-shell/sass/widgets/_popovers-42.scss

@@ -16,6 +16,7 @@
 .popup-menu {
   min-width: if($laptop == 'true', 10em, 12em);
   color: $fg_color;
+  background-color: if($submenu_style == 'true', $bg_color !important, none);
   border: none;
   padding: 0;
   margin: 0;
@@ -37,6 +38,7 @@
     spacing: $container_padding;
     padding: $container_padding $container_padding * 2;
     color: $fg_color !important;
+    background-color: if($submenu_style == 'true', $bg_color !important, none);
     transition-duration: $shorter_duration;
     border-radius: if($corner_style == 'circular', $circular_radius, $submenu_item_radius);
     background-image: none;
@@ -48,6 +50,10 @@
     &:checked {
       background-color: if($variant == 'light', rgba(black, 0.10), rgba(white, 0.95)) !important;
       color: rgba(black, 0.75) !important;
+      @if ($submenu_style == 'true') {
+        color: $fg_color !important;
+        background-color: lighten($bg_color, 10%) !important;
+      }
       font-weight: normal;
       border-radius: $submenu_item_radius $submenu_item_radius 0 0;
       border: none;
@@ -56,24 +62,47 @@
       &:hover, &:focus, &.selected {
         background-color: if($variant == 'light', rgba(black, 0.2), #e5e5e5) !important;
         color: rgba(black, 0.85) !important;
+        @if ($submenu_style == 'true') {
+          color: $selected_fg_color !important;
+          background-color: darken($selected_bg_color, 10%) !important;
+        }
       }
 
       &:active {
         background-color: #dfdfdf !important;
         color: rgba(black, 0.75) !important;
+        @if ($submenu_style == 'true') {
+          color: $fg_color !important;
+          background-color: $bg_color !important;
+        }
+
       }
 
       &.selected:active {
         background-color: if($variant == 'light', rgba(black, 0.15), #e0e0e0) !important;
         color: rgba(black, 0.75) !important;
+        @if ($submenu_style == 'true') {
+          color: $selected_fg_color !important;
+          background-color: darken($selected_bg_color, 10%) !important;
+        }
       }
 
-      &:insensitive { color: rgba(black, 0.35) !important; }
+      &:insensitive { 
+        color: rgba(black, 0.35) !important;
+        @if ($submenu_style == 'true') {
+          color: $fg_color !important;
+          background-color: $bg_color !important;
+        }
+      }
     }
 
     &:hover, &:focus, &.selected {
       background-color: $divider_color !important;
       color: $fg_color !important;
+      @if ($submenu_style == 'true') {
+        color: $selected_fg_color !important;
+        background-color: darken($selected_bg_color, 10%) !important;
+      }
       transition-duration: 0ms;
     }
 
@@ -90,10 +119,15 @@
   // all icons and other graphical elements
   .popup-inactive-menu-item {
     color: $fg_color !important;
+    background-color: if($submenu_style == 'true', $bg_color !important, none);
 
     &.selected:active {
       background-color: if($variant == 'light', rgba(black, 0.15), #e0e0e0) !important;
       color: rgba(black, 0.75) !important;
+      @if ($submenu_style == 'true') {
+        color: $selected_fg_color !important;
+        background-color: $selected_bg_color !important;
+      }
     }
 
     &:insensitive { color: $hint_fg_color !important; }
@@ -108,6 +142,10 @@
     margin: 0;
     color: rgba(black, 0.75) !important;
     background-color: if($variant == 'light', rgba(black, 0.10), rgba(white, 0.95)) !important;
+    @if ($submenu_style == 'true') {
+      color: $fg_color !important;
+      background-color: lighten($bg_color, 10%) !important;
+    }
     border-radius: 0 0 $submenu_item_radius $submenu_item_radius;
     border: none;
     box-shadow: none;
@@ -117,21 +155,45 @@
       margin: 0;
       border-radius: $submenu_item_radius;
       color: rgba(black, 0.75) !important;
+      @if ($submenu_style == 'true') {
+        color: $fg_color !important;
+        background-color: lighten($bg_color, 10%) !important;
+      }
       background-image: none;
 
       &:hover, &:focus, &.selected {
         color: rgba(black, 0.85) !important;
         background-color: rgba(black, 0.15) !important;
+        @if ($submenu_style == 'true') {
+          color: $selected_fg_color !important;
+          background-color: darken($selected_bg_color, 10%) !important;
+        }
       }
 
       &:active {
         color: rgba(black, 0.85) !important;
         background-color: rgba(black, 0.2) !important;
+        @if ($submenu_style == 'true') {
+          color: $fg_color !important;
+          background-color: $bg_color !important;
+        }
       }
 
-      &.selected:active { color: rgba(black, 0.75) !important; }
+      &.selected:active { 
+        color: rgba(black, 0.75) !important;
+        @if ($submenu_style == 'true') {
+          color: $fg_color !important;
+          background-color: $bg_color !important;
+        }
+      }
 
-      &:insensitive { color: rgba(black, 0.35) !important; }
+      &:insensitive { 
+        color: rgba(black, 0.35) !important;
+        @if ($submenu_style == 'true') {
+          color: $fg_color !important;
+          // background-color: $bg_color !important;  // if enabled this will screw over separator colors in submenus
+        }
+      }
     }
 
     @extend %scrollbar_on_light;
@@ -148,17 +210,18 @@
 
   // separator
   .popup-separator-menu-item {
-    background: none;
+    // menu separator color
+    background: if($submenu_style == 'true', $bg_color !important, none); 
     border: none;
 
     .popup-separator-menu-item-separator {
-      height: 1px; //not really the whole box
+      height: if($submenu_style == 'true', 2px, 1px); // increase visibility with a themed menu
       margin: $container_padding $container_padding * 8;
       background-color: $border_color;
 
       .popup-sub-menu & { //submenu separators
         margin: $container_padding $container_padding * 9 $container_padding $container_padding * 4;
-        background-color: rgba(black, 0.10);
+        background-color: rgba(black, 0.10);  // FIXME: this does not actually do anything, try `pink`
       }
     }
   }