[NTP] Improve dark mode support in richer picker

Changes include:
- Tile selection color darkened for Backgrounds and Color submenus.
- Dark mode support added to submenu sidebar.
- Dark mode support added to local background and default background
  tiles in Backgrounds submenu.

Screenshots:
http://screen/hE6jRaeXxhz.png
http://screen/daVG9S8r7b1.png
http://screen/a7FH96kYYnF.png
http://screen/5ytaAPDr3KT.png

Bug: 937570, 960982
Change-Id: I0f397be59363b378f262a6b79416765db7b0992f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1691553
Commit-Queue: Kristi Park <kristipark@chromium.org>
Reviewed-by: Kyle Milka <kmilka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#675861}

chrome/browser/resources/local_ntp/local_ntp.css

@@ -853,12 +853,27 @@ html[dir=rtl] .menu-option {
   background-color: rgba(var(--GB900-rgb), .1);
 }
 
+@media (prefers-color-scheme: dark) {
+  .menu-option:hover,
+  .menu-option:focus {
+    background-color: rgba(var(--GB200-rgb), .03);
+  }
+}
+
 .menu-option:active,
 .menu-option.selected {
   background-color: rgb(232, 240, 254);
   color: rgb(var(--GB600-rgb));
 }
 
+@media (prefers-color-scheme: dark) {
+  .menu-option:active,
+  .menu-option.selected {
+    background-color: rgba(var(--GB200-rgb), .1);
+    color: rgb(var(--GB300-rgb));
+  }
+}
+
 .menu-option-icon-wrapper {
   display: inline-block;
   height: 32px;
@@ -889,6 +904,13 @@ html[dir=rtl] .menu-option {
   background-color: rgb(var(--GB600-rgb));
 }
 
+@media (prefers-color-scheme: dark) {
+  .menu-option:active .menu-option-icon-wrapper .menu-option-icon,
+  .menu-option.selected .menu-option-icon-wrapper .menu-option-icon {
+    background-color: rgb(var(--GB300-rgb));
+  }
+}
+
 #shortcuts-icon {
   -webkit-mask-image: url(icons/link.svg);
 }
@@ -1052,14 +1074,20 @@ html[dir=rtl] .menu-option {
   width: 176px;
 }
 
+@media (prefers-color-scheme: dark) {
+  #backgrounds-default.bg-sel-tile-bg {
+    background-color: transparent;
+  }
+}
+
 #customization-menu .bg-sel-tile-bg.selected  {
   background-color: rgba(var(--GB900-rgb), .08);
 }
 
 @media (prefers-color-scheme: dark) {
   #backgrounds-default.selected,
-  #backgrounds-image-menu .bg-sel-tile-bg.selected {
-    background-color: rgba(var(--GB200-rgb), .5);
+  #customization-menu .bg-sel-tile-bg.selected {
+    background-color: rgba(var(--GB200-rgb), .1);
   }
 }
 
@@ -1069,7 +1097,7 @@ html[dir=rtl] .menu-option {
 }
 
 #backgrounds-upload.bg-sel-tile-bg {
-  background-color: white;
+  background-color: transparent;
   vertical-align: top;
 }
 
@@ -1147,6 +1175,12 @@ html[dir=rtl] #menu-back {
   top: 0;
 }
 
+@media (prefers-color-scheme: dark) {
+  #backgrounds-upload-wrapper {
+    border-color: rgb(var(--GG700-rgb));
+  }
+}
+
 #backgrounds-upload-icon {
   -webkit-mask-image: url(icons/upload.svg);
   -webkit-mask-repeat: no-repeat;
@@ -1166,6 +1200,12 @@ html[dir=rtl] #menu-back {
   width: 100%;
 }
 
+@media (prefers-color-scheme: dark) {
+  #backgrounds-upload-text {
+    color: inherit;
+  }
+}
+
 #customization-menu .bg-sel-tile .selected-circle {
   height: 20px;
   left: initial;
@@ -1201,6 +1241,17 @@ html[dir=rtl] #customization-menu .bg-sel-tile .selected-check {
   opacity: 1;
 }
 
+@media (prefers-color-scheme: dark) {
+  #backgrounds-default-icon {
+    background-color: rgb(41, 42, 45);
+    border-color: rgb(var(--GG700-rgb));
+  }
+
+  .selected #backgrounds-default-icon {
+    border-color: transparent;
+  }
+}
+
 .mini-page {
   margin: auto;
   padding-top: 26px;