Theme breaking: --submenuColor becomes --submenuBackgroundColor

client/src/app/+accounts/accounts.component.scss

@@ -50,7 +50,7 @@ my-user-moderation-dropdown,
   grid-template-columns: 1fr min-content;
   grid-template-rows: auto auto;
 
-  background-color: pvar(--submenuColor);
+  background-color: pvar(--submenuBackgroundColor);
   margin-bottom: 45px;
   padding-top: var(--myGlobalTopPadding);
   font-size: var(--myFontSize);
@@ -111,7 +111,7 @@ my-user-moderation-dropdown,
   .description:not(.expanded) {
     max-height: 70px;
 
-    @include fade-text(30px, pvar(--submenuColor));
+    @include fade-text(30px, pvar(--submenuBackgroundColor));
   }
 
   .show-more {

client/src/app/+admin/plugins/shared/plugin-list.component.scss

@@ -3,7 +3,7 @@
 
 .plugin {
   margin: 15px 0;
-  background-color: pvar(--submenuColor);
+  background-color: pvar(--submenuBackgroundColor);
 }
 
 .first-row {

client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss

@@ -3,7 +3,7 @@
 @import '_miniature';
 
 .playlist-info {
-  background-color: pvar(--submenuColor);
+  background-color: pvar(--submenuBackgroundColor);
   margin-left: -$not-expanded-horizontal-margins;
   margin-top: -$sub-menu-margin-bottom;
 
@@ -16,7 +16,7 @@
 
   /* fix ellipsis dots background color */
   ::ng-deep .miniature-name::after {
-    background-color: pvar(--submenuColor) !important;
+    background-color: pvar(--submenuBackgroundColor) !important;
   }
 }
 

client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss

@@ -3,8 +3,8 @@
 
 .first-step-block {
   .torrent-or-magnet {
-    @include divider($color: pvar(--inputPlaceholderColor), $background: pvar(--submenuColor));
-    
+    @include divider($color: pvar(--inputPlaceholderColor), $background: pvar(--submenuBackgroundColor));
+
     &[data-content] {
       margin: 1.5rem 0;
     }

client/src/app/+videos/+video-edit/video-add.component.scss

@@ -67,7 +67,7 @@ $nav-link-height: 40px;
     &.active {
       border-color: $border-color;
       border-bottom-color: transparent;
-      background-color: pvar(--submenuColor) !important;
+      background-color: pvar(--submenuBackgroundColor) !important;
 
       span {
         border-bottom-color: pvar(--mainColor);
@@ -84,7 +84,7 @@ $nav-link-height: 40px;
   border: $border-width $border-type $border-color;
   border-top: transparent;
 
-  background-color: pvar(--submenuColor);
+  background-color: pvar(--submenuBackgroundColor);
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
   width: 100%;

client/src/app/shared/shared-instance/instance-about-accordion.component.scss

@@ -31,7 +31,7 @@ ngb-accordion ::ng-deep {
       padding: 0;
 
       & + .collapse.show {
-        background-color: var(--submenuColor);
+        background-color: var(--submenuBackgroundColor);
       }
     }
   }

client/src/sass/application.scss

@@ -39,7 +39,7 @@ body {
   --menuBackgroundColor: #{$menu-background};
   --menuForegroundColor: #{$menu-color};
 
-  --submenuColor: #{$sub-menu-color};
+  --submenuBackgroundColor: #{$sub-menu-background-color};
   --channelBackgroundColor: #{$channel-background-color};
 
   --inputForegroundColor: #{$input-foreground-color};
@@ -156,7 +156,7 @@ my-input-toggle-hidden ::ng-deep input {
   }
 
   .sub-menu {
-    background-color: pvar(--submenuColor);
+    background-color: pvar(--submenuBackgroundColor);
     width: 100%;
     display: flex;
     align-items: center;
@@ -267,7 +267,7 @@ my-input-toggle-hidden ::ng-deep input {
     opacity: 0.6;
 
     &.active {
-      background-color: pvar(--submenuColor);
+      background-color: pvar(--submenuBackgroundColor);
     }
 
     &.active, &:hover, &:active, &:focus {

client/src/sass/include/_mixins.scss

@@ -696,7 +696,7 @@
   padding: 0.75rem 1rem;
   margin-bottom: 1rem;
   list-style: none;
-  background-color: pvar(--submenuColor);
+  background-color: pvar(--submenuBackgroundColor);
   border-radius: 0.25rem;
 
   .breadcrumb-item {
@@ -751,7 +751,7 @@
     & > a,
     & > div {
       padding: 20px;
-      background: pvar(--submenuColor);
+      background: pvar(--submenuBackgroundColor);
       border-radius: 4px;
       box-sizing: border-box;
       height: 100%;
@@ -773,7 +773,7 @@
   }
 }
 
-@mixin divider($color: pvar(--submenuColor), $background: pvar(--mainBackgroundColor)) {
+@mixin divider($color: pvar(--submenuBackgroundColor), $background: pvar(--mainBackgroundColor)) {
   width: 95%;
   border-top: .05rem solid $color;
   height: .05rem;

client/src/sass/include/_variables.scss

@@ -48,7 +48,7 @@ $menu-bottom-color: #C6C6C6;
 $menu-width: 240px;
 $menu-lateral-padding: 26px;
 
-$sub-menu-color: #F7F7F7;
+$sub-menu-background-color: #F7F7F7;
 $sub-menu-height: 81px;
 
 $channel-background-color: #f6ede8;
@@ -103,7 +103,7 @@ $variables: (
   --menuBackgroundColor: var(--menuBackgroundColor),
   --menuForegroundColor: var(--menuForegroundColor),
 
-  --submenuColor: var(--submenuColor),
+  --submenuBackgroundColor: var(--submenuBackgroundColor),
   --channelBackgroundColor: var(--channelBackgroundColor),
 
   --inputForegroundColor: var(--inputForegroundColor),

client/src/sass/primeng-custom.scss

@@ -547,7 +547,7 @@ p-table {
     height: 46px;
 
     &.p-highlight {
-      background-color: pvar(--submenuColor) !important;
+      background-color: pvar(--submenuBackgroundColor) !important;
 
       td, td > a {
         color: pvar(--mainForegroundColor) !important;
@@ -558,7 +558,7 @@ p-table {
   .p-datatable-tbody {
     tr {
       &:hover {
-        background-color: pvar(--submenuColor) !important;
+        background-color: pvar(--submenuBackgroundColor) !important;
       }
 
       td {
@@ -590,16 +590,16 @@ p-table {
   th {
     border: none !important;
     border-bottom: 1px solid !important;
-    border-color: pvar(--submenuColor) !important;
+    border-color: pvar(--submenuBackgroundColor) !important;
     text-align: left !important;
     padding: 5px 0 5px 15px !important;
     font-weight: $font-semibold !important;
     color: pvar(--mainForegroundColor) !important;
 
     &.p-sortable-column:hover {
-      background-color: pvar(--submenuColor) !important;
+      background-color: pvar(--submenuBackgroundColor) !important;
       border: 1px solid !important;
-      border-color: pvar(--submenuColor) !important;
+      border-color: pvar(--submenuBackgroundColor) !important;
       border-width: 0 1px !important;
 
       &:first-child {
@@ -608,7 +608,7 @@ p-table {
     }
 
     &.p-highlight {
-      background-color: pvar(--submenuColor) !important;
+      background-color: pvar(--submenuBackgroundColor) !important;
 
       .pi {
         @extend .glyphicon;
@@ -654,7 +654,7 @@ p-table {
       position: relative;
       border: none;
       border-top: 1px solid !important;
-      border-color: pvar(--submenuColor) !important;
+      border-color: pvar(--submenuBackgroundColor) !important;
       height: 40px;
       display: flex;
       justify-content: center;