Merge pull request #6012 from weseek/imprv/94754-theme-sidebar-color-fix

imprv: 94754-each-theme-sidebar-color-fix

packages/app/src/styles/theme/_apply-colors-light.scss

@@ -178,7 +178,11 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
 .grw-sidebar {
   // List
   @include override-list-group-item($color-list, $bgcolor-sidebar-list-group, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
-
+  // sidebar-centent-bg
+  .grw-navigation-wrap {
+    // Drop a shadow on the light theme. The dark theme makes '$ bgcolor-sidebar-context' brighter than the body.
+    box-shadow: 0px 0px 3px rgba(black, 0.24);
+  }
   // Pagetree
   .grw-pagetree {
     @include override-list-group-item-for-pagetree(

packages/app/src/styles/theme/blackboard.scss

@@ -60,7 +60,7 @@ html[dark] {
   $color-resize-button-hover: $color-global;
   $bgcolor-resize-button-hover: darken($bgcolor-resize-button, 5%);
   // Sidebar contents
-  $bgcolor-sidebar-context: $subthemecolor;
+  $bgcolor-sidebar-context: lighten($subthemecolor, 8%);
   $color-sidebar-context: $color-global;
   // Sidebar list group
   // $bgcolor-sidebar-list-group: #; // optional

packages/app/src/styles/theme/christmas.scss

@@ -85,7 +85,7 @@ html[dark] {
   $color-resize-button-hover: $color-reversal;
   $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
   $color-sidebar-context: $linktext;
-  $bgcolor-sidebar-context: #f4f6fc;
+  $bgcolor-sidebar-context: #f4fcf6;
   // Sidebar list group
   $bgcolor-sidebar-list-group: #fafbff; // optional
 

packages/app/src/styles/theme/fire-red.scss

@@ -56,7 +56,7 @@ html[light] {
   $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
   // Sidebar contents
   $color-sidebar-context: $color-global;
-  $bgcolor-sidebar-context: #ebebeb;
+  $bgcolor-sidebar-context: #ececec;
   // Sidebar list group
   // $bgcolor-sidebar-list-group: #; // optional
 
@@ -152,7 +152,7 @@ html[dark] {
   $color-resize-button-hover: $color-global;
   $bgcolor-resize-button-hover: darken($bgcolor-resize-button, 5%);
   // Sidebar contents
-  $bgcolor-sidebar-context: #2e2e2e;
+  $bgcolor-sidebar-context: #413f3f;
   $color-sidebar-context: $color-global;
   // Sidebar list group
   // $bgcolor-sidebar-list-group: #; // optional

packages/app/src/styles/theme/future.scss

@@ -55,8 +55,8 @@ html[dark] {
   $text-shadow-sidebar-nav-item-active: 0px 0px 10px #969494; // optional
 
   // Sidebar contents
-  $color-sidebar-context: #00c2c4;
-  $bgcolor-sidebar-context: #020b0b;
+  $color-sidebar-context: #2cfbff;
+  $bgcolor-sidebar-context: #184040;
 
   // Sidebar list group
   $bgcolor-sidebar-list-group: #162126; // optional

packages/app/src/styles/theme/halloween.scss

@@ -80,7 +80,7 @@ html[dark] {
 
   // Sidebar contents
   $color-sidebar-context: #aa97cb;
-  $bgcolor-sidebar-context: #1d2126;
+  $bgcolor-sidebar-context: #302b3c;
 
   // Sidebar list group
   $bgcolor-sidebar-list-group: #2c2926; // optional

packages/app/src/styles/theme/hufflepuff.scss

@@ -216,7 +216,7 @@ html[dark] {
   $bgcolor-resize-button-hover: darken($bgcolor-resize-button, 7%);
   // Sidebar contents
   $color-sidebar-context: $color-global;
-  $bgcolor-sidebar-context: $subthemecolor;
+  $bgcolor-sidebar-context: lighten($themedark, 5%);
   // Sidebar list group
   $bgcolor-sidebar-list-group: lighten($subthemecolor, 5%);
 

packages/app/src/styles/theme/jade-green.scss

@@ -152,7 +152,7 @@ html[dark] {
   $color-resize-button-hover: $color-global;
   $bgcolor-resize-button-hover: darken($bgcolor-resize-button, 5%);
   // Sidebar contents
-  $bgcolor-sidebar-context: #2e2e2e;
+  $bgcolor-sidebar-context: #3c403c;
   $color-sidebar-context: $color-global;
   // Sidebar list group
   // $bgcolor-sidebar-list-group: #; // optional

packages/app/src/styles/theme/nature.scss

@@ -72,7 +72,7 @@ html[dark] {
   $bgcolor-sidebar: #188f64;
   // Sidebar contents
   $color-sidebar-context: #7e0044;
-  $bgcolor-sidebar-context: #f7f9e9;
+  $bgcolor-sidebar-context: #f4f5ec;
   // Sidebar resize button
   $color-resize-button: white;
   $bgcolor-resize-button: $themecolor;

packages/app/src/styles/theme/spring.scss

@@ -73,7 +73,7 @@ html[dark] {
   $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
   // Sidebar contents
   $color-sidebar-context: $subthemecolor;
-  $bgcolor-sidebar-context: #f4f6fc;
+  $bgcolor-sidebar-context: #fdfffe;
   // Sidebar list group
   $bgcolor-sidebar-list-group: #fafbff; // optional
 

packages/app/src/styles/theme/wood.scss

@@ -91,7 +91,7 @@ html[dark] {
   $bgcolor-sidebar: $themecolor;
   // Sidebar contents
   $color-sidebar-context: #9d7406;
-  $bgcolor-sidebar-context: lighten($themecolor, 32%);
+  $bgcolor-sidebar-context: lighten($themecolor, 38%);
   // Sidebar list group
   $bgcolor-sidebar-list-group: rgba(#f7f5f1, 0.5);
   // Sidebar resize button