[NTP] Add dark mode support to shortcuts submenu

Screenshots:
http://screen/WTjRzjawxg6.png
http://screen/e9MfGSpBMtu.png
http://screen/nWOM2XTy8R2.png
http://screen/8UJGZFTXrGx.png

Bug: 953822, 976494
Change-Id: Iaf3f5a9598a982075861777fb4fd93312efa24f5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1688436
Commit-Queue: Kristi Park <kristipark@chromium.org>
Reviewed-by: Kyle Milka <kmilka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#675756}

chrome/browser/resources/local_ntp/local_ntp.css

@@ -1257,7 +1257,6 @@ html[dir=rtl] #customization-menu .bg-sel-tile .selected-check {
 }
 
 .sh-option-image {
-  background-color: white;
   border: 1px solid rgb(var(--GG300-rgb));
   border-radius: 4px;
   box-sizing: border-box;
@@ -1266,11 +1265,24 @@ html[dir=rtl] #customization-menu .bg-sel-tile .selected-check {
   width: 268px;
 }
 
+@media (prefers-color-scheme: dark) {
+  .sh-option-image {
+    border-color: rgb(var(--GG700-rgb));
+  }
+}
+
 .selected .sh-option-image {
   background-color: rgb(var(--GB050-rgb));
   border-color: rgb(var(--GB600-rgb));
 }
 
+@media (prefers-color-scheme: dark) {
+  .selected .sh-option-image {
+    background-color: rgba(var(--GB200-rgb), .1);
+    border-color: rgb(var(--GB300-rgb));
+  }
+}
+
 .sh-option-mini {
   background-color: white;
   border: 1px solid rgb(var(--GG300-rgb));
@@ -1283,6 +1295,13 @@ html[dir=rtl] #customization-menu .bg-sel-tile .selected-check {
   width: 144px;
 }
 
+@media (prefers-color-scheme: dark) {
+  .sh-option-mini {
+    background-color: rgb(41, 42, 45);
+    border-color: rgb(var(--GG700-rgb));
+  }
+}
+
 html[dir=rtl] .sh-option-mini {
   left: 40px;
   right: unset;
@@ -1293,6 +1312,14 @@ html[dir=rtl] .sh-option-mini {
       0 4px 8px 3px rgba(var(--GG800-rgb), .15);
 }
 
+@media (prefers-color-scheme: dark) {
+  .selected .sh-option-mini {
+    border-color: transparent;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .3),
+        0 4px 8px 3px rgba(0, 0, 0, .15);
+  }
+}
+
 .sh-option-mini .mini-shortcuts {
   background-color: rgb(var(--GG500-rgb));
 }
@@ -1301,6 +1328,12 @@ html[dir=rtl] .sh-option-mini {
   background-color: rgb(var(--GB600-rgb));
 }
 
+@media (prefers-color-scheme: dark) {
+  .selected .sh-option-mini .mini-shortcuts {
+    background-color: rgb(var(--GB300-rgb));
+  }
+}
+
 .sh-option-icon {
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-size: 100%;
@@ -1324,10 +1357,22 @@ html[dir=rtl] .sh-option-icon {
   right: 16px;
 }
 
+@media (prefers-color-scheme: dark) {
+  .sh-option-icon {
+    background-color: rgb(var(--GG700-rgb));
+  }
+}
+
 .selected .sh-option-icon {
   background-color: rgba(var(--GB600-rgb), .24);
 }
 
+@media (prefers-color-scheme: dark) {
+  .selected .sh-option-icon {
+    background-color: rgb(var(--GB300-rgb));
+  }
+}
+
 .sh-option-image .selected-circle {
   box-shadow: 0 3px 6px 1px rgba(0, 0, 0, .16),
       0 1px 2px 1px rgba(0, 0, 0, .23);
@@ -1359,7 +1404,6 @@ html[dir=rtl] .sh-option-image .selected-check {
 }
 
 #sh-hide {
-  background-color: white;
   border: 1px solid rgb(var(--GG300-rgb));
   border-radius: 4px;
   box-sizing: border-box;
@@ -1370,12 +1414,26 @@ html[dir=rtl] .sh-option-image .selected-check {
   width: 100%;
 }
 
+@media (prefers-color-scheme: dark) {
+  #sh-hide {
+    border-color: rgb(var(--GG700-rgb));
+  }
+}
+
 #sh-hide.selected {
   background-color: rgb(var(--GB050-rgb));
   border-color: rgb(var(--GB600-rgb));
   color: rgb(var(--GB600-rgb));
 }
 
+@media (prefers-color-scheme: dark) {
+  #sh-hide.selected {
+    background-color: rgba(var(--GB200-rgb), .1);
+    border-color: rgb(var(--GB300-rgb));
+    color: rgb(var(--GB300-rgb));
+  }
+}
+
 #sh-hide > div {
   margin-bottom: auto;
   margin-top: auto;
@@ -1396,6 +1454,12 @@ html[dir=rtl] .sh-option-image .selected-check {
   background-color: rgb(var(--GB600-rgb));
 }
 
+@media (prefers-color-scheme: dark) {
+  .selected #sh-hide-icon {
+    background-color: rgb(var(--GB300-rgb));
+  }
+}
+
 #sh-hide-title {
   font-weight: bold;
 }
@@ -1422,6 +1486,12 @@ html[dir=rtl] .sh-option-image .selected-check {
   z-index: 0;
 }
 
+@media (prefers-color-scheme: dark) {
+  .switch {
+    background-color: rgb(41, 42, 45);
+  }
+}
+
 /* Hide the toggle's default checkbox. */
 .switch input {
   opacity: 0;
@@ -1434,7 +1504,7 @@ html[dir=rtl] .sh-option-image .selected-check {
   bottom: 0;
   cursor: pointer;
   display: block;
-  left: -3px;
+  left: 0;
   position: absolute;
   right: 0;
   top: 0;
@@ -1450,7 +1520,7 @@ html[dir=rtl] .sh-option-image .selected-check {
   content: '';
   display: block;
   height: 16px;
-  left: 0;
+  left: -3px;
   position: absolute;
   transition: transform linear 80ms, background-color linear 80ms;
   width: 16px;
@@ -1461,7 +1531,7 @@ html[dir=rtl] .sh-option-image .selected-check {
   background-color: rgb(128, 134, 139);
   border-radius: 50%;
   height: 40px;
-  left: -12px;
+  left: -15px;
   opacity: 0;
   position: absolute;
   top: -14px;
@@ -1469,10 +1539,22 @@ html[dir=rtl] .sh-option-image .selected-check {
   width: 40px;
 }
 
+@media (prefers-color-scheme: dark) {
+  .toggle .highlight {
+    background-color: rgb(var(--GG300-rgb));
+  }
+}
+
 input:checked + .toggle {
   background-color: rgba(var(--GB600-rgb), .5);
 }
 
+@media (prefers-color-scheme: dark) {
+  input:checked + .toggle {
+    background-color: rgba(var(--GB300-rgb), .5);
+  }
+}
+
 input:focus + .toggle {
   box-shadow: 0 0 1px rgb(33, 150, 243);
 }
@@ -1482,12 +1564,26 @@ input:active + .toggle .highlight,
   opacity: .15;
 }
 
+@media (prefers-color-scheme: dark) {
+  input:active + .toggle .highlight,
+  #customization-menu:not(.using-mouse-nav) input:focus + .toggle .highlight {
+    opacity: .4;
+  }
+}
+
 input:checked + .toggle .knob,
 input:checked + .toggle .highlight {
   background-color: rgb(var(--GB600-rgb));
   transform: translateX(18px);
 }
 
+@media (prefers-color-scheme: dark) {
+  input:checked + .toggle .knob,
+  input:checked + .toggle .highlight {
+    background-color: rgb(var(--GB300-rgb));
+  }
+}
+
 #colors-default-icon {
   background-image: url(icons/default-theme.svg);
   background-repeat: no-repeat;
@@ -1505,8 +1601,10 @@ input:checked + .toggle .highlight {
   width: 100%;
 }
 
-html[darkmode=true] #colors-theme {
-  border-color: rgb(var(--GG700-rgb));
+@media (prefers-color-scheme: dark) {
+  #colors-theme {
+    border-color: rgb(var(--GG700-rgb));
+  }
 }
 
 #colors-theme.visible {
@@ -1529,8 +1627,10 @@ html[darkmode=true] #colors-theme {
   width: 24px;
 }
 
-html[darkmode=true] #colors-theme-icon {
- background-color: rgb(var(--GG200-rgb));
+@media (prefers-color-scheme: dark) {
+  #colors-theme-icon {
+    background-color: rgb(var(--GG200-rgb));
+  }
 }
 
 #colors-theme-name {
@@ -1552,11 +1652,13 @@ html[darkmode=true] #colors-theme-icon {
   width: 20px;
 }
 
-html[darkmode=true] #colors-theme-link-icon {
- background-color: rgb(var(--GG200-rgb));
+@media (prefers-color-scheme: dark) {
+  #colors-theme-link-icon {
+    background-color: rgb(var(--GG200-rgb));
+  }
 }
 
 #colors-theme-uninstall {
   height: fit-content;
   margin-inline-end: 16px;
-}
\ No newline at end of file
+}