WebUI Dark Mode: update ui/webui to use @media queries

This changes the implementation around how dark mode is queried in CSS.

Bug: 965811
Change-Id: I6d45507907364cdccdeeb4273562e4f81664f74b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1626350
Commit-Queue: Dan Beam <dbeam@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Auto-Submit: Dan Beam <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#667331}

ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.html

@@ -50,13 +50,15 @@ List of customizable styles:
         --cr-checkbox-unchecked-ripple-opacity: .15;
       }
 
-      :host-context([dark]) {
-        /* Dark mode colors. */
-        --cr-checkbox-checked-ripple-opacity: .4;
-        --cr-checkbox-mark-color: var(--google-grey-900);
-        --cr-checkbox-ripple-unchecked-color: var(--google-grey-refresh-700);
-        --cr-checkbox-unchecked-box-color: var(--google-grey-refresh-500);
-        --cr-checkbox-unchecked-ripple-opacity: .4;
+      @media (prefers-color-scheme: dark) {
+        :host {
+          /* Dark mode colors. */
+          --cr-checkbox-checked-ripple-opacity: .4;
+          --cr-checkbox-mark-color: var(--google-grey-900);
+          --cr-checkbox-ripple-unchecked-color: var(--google-grey-refresh-700);
+          --cr-checkbox-unchecked-box-color: var(--google-grey-refresh-500);
+          --cr-checkbox-unchecked-ripple-opacity: .4;
+        }
       }
 
       :host([disabled]) {

ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html

@@ -26,13 +26,15 @@
         @apply --cr-dialog-native;
       }
 
-      :host-context([dark]) dialog {
-        --scroll-border-color: var(--google-grey-refresh-700);
-        background-color: var(--google-grey-900);
-        /* Note: the colors in linear-gradient() are intentionally the same to
-         * add a 4% white layer on top of the fully opaque background-color. */
-        background-image: linear-gradient(rgba(255, 255, 255, .04),
-                                          rgba(255, 255, 255, .04));
+      @media (prefers-color-scheme: dark) {
+        dialog {
+          --scroll-border-color: var(--google-grey-refresh-700);
+          background-color: var(--google-grey-900);
+          /* Note: the colors in linear-gradient() are intentionally the same to
+           * add a 4% white layer on top of the fully opaque background-color. */
+          background-image: linear-gradient(rgba(255, 255, 255, .04),
+                                            rgba(255, 255, 255, .04));
+        }
       }
 
       dialog[open] #content-wrapper {
@@ -123,8 +125,10 @@
         padding: 16px 20px;
       }
 
-      :host-context([dark]) ::slotted([slot=footer]) {
-        border-top-color: var(--cr-separator-color);
+      @media (prefers-color-scheme: dark) {
+        :host ::slotted([slot=footer]) {
+          border-top-color: var(--cr-separator-color);
+        }
       }
 
       .body-container {

ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html

@@ -23,9 +23,11 @@
         width: var(--drawer-width);
       }
 
-      :host-context([dark]) dialog {
-        background: var(--google-grey-900)
-            linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04));
+      @media (prefers-color-scheme: dark) {
+        :host dialog {
+          background: var(--google-grey-900)
+              linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04));
+        }
       }
 
       :host dialog,
@@ -73,8 +75,10 @@
         padding-inline-start: 24px;
       }
 
-      :host-context([dark]) .drawer-header {
-        color: var(--cr-primary-text-color);
+      @media (prefers-color-scheme: dark) {
+        .drawer-header {
+          color: var(--cr-primary-text-color);
+        }
       }
 
       :host ::slotted(.drawer-content) {

ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.html

@@ -41,8 +41,10 @@
         transform: scaleX(-1);  /* Invert X: flip on the Y axis (aka mirror). */
       }
 
-      :host-context([dark]) {
-        --cr-icon-button-color: var(--google-grey-refresh-500);
+      @media (prefers-color-scheme: dark) {
+        :host {
+          --cr-icon-button-color: var(--google-grey-refresh-500);
+        }
       }
 
       :host paper-ripple {
@@ -50,8 +52,10 @@
         --paper-ripple-opacity: var(--cr-icon-button-ripple-opacity, .21);
       }
 
-      :host-context([dark]) paper-ripple {
-        --paper-ripple-opacity: var(--cr-icon-button-ripple-opacity, .4);
+      @media (prefers-color-scheme: dark) {
+        :host paper-ripple {
+          --paper-ripple-opacity: var(--cr-icon-button-ripple-opacity, .4);
+        }
       }
 
       #icon {

ui/webui/resources/cr_elements/cr_icons_css.html

@@ -27,63 +27,73 @@
       :-webkit-any(cr-icon-button, .cr-icon).icon-arrow-back {
         background-image: url(../images/icon_arrow_back.svg);
       }
-      :host-context([dark]) :-webkit-any(cr-icon-button,
-                                         .cr-icon).icon-arrow-back {
-        background-image: url(../images/dark/icon_arrow_back.svg);
+      @media (prefers-color-scheme: dark) {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-arrow-back {
+          background-image: url(../images/dark/icon_arrow_back.svg);
+        }
       }
 
       :-webkit-any(cr-icon-button, .cr-icon).icon-cancel {
         background-image: url(../images/icon_cancel.svg);
       }
-      :host-context([dark]) :-webkit-any(cr-icon-button, .cr-icon).icon-cancel {
-        background-image: url(../images/dark/icon_cancel.svg);
+      @media (prefers-color-scheme: dark) {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-cancel {
+          background-image: url(../images/dark/icon_cancel.svg);
+        }
       }
 
       :-webkit-any(cr-icon-button, .cr-icon).icon-toolbar-cancel {
         background-image: url(../images/icon_toolbar_cancel.svg);
       }
-      :host-context([dark]) :-webkit-any(cr-icon-button,
-                                         .cr-icon).icon-toolbar-cancel {
-        background-image: url(../images/dark/icon_toolbar_cancel.svg);
+      @media (prefers-color-scheme: dark) {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-toolbar-cancel {
+          background-image: url(../images/dark/icon_toolbar_cancel.svg);
+        }
       }
 
       :-webkit-any(cr-icon-button, .cr-icon).icon-clear {
         background-image: url(../images/icon_clear.svg);
       }
-      :host-context([dark]) :-webkit-any(cr-icon-button, .cr-icon).icon-clear {
-        background-image: url(../images/dark/icon_clear.svg);
+      @media (prefers-color-scheme: dark) {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-clear {
+          background-image: url(../images/dark/icon_clear.svg);
+        }
       }
 
       :-webkit-any(cr-icon-button, .cr-icon).icon-delete-gray {
         background-image: url(../images/icon_delete_gray.svg);
       }
-      :host-context([dark]) :-webkit-any(cr-icon-button,
-                                         .cr-icon).icon-delete-gray {
-        background-image: url(../images/dark/icon_delete_gray.svg);
+      @media (prefers-color-scheme: dark) {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-delete-gray {
+          background-image: url(../images/dark/icon_delete_gray.svg);
+        }
       }
 
       :-webkit-any(cr-icon-button, .cr-icon).icon-picture-delete {
         background-image: url(../images/icon_picture_delete.svg);
       }
-      :host-context([dark]) :-webkit-any(cr-icon-button,
-                                         .cr-icon).icon-picture-delete {
-        background-image: url(../images/dark/icon_picture_delete.svg);
+      @media (prefers-color-scheme: dark) {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-picture-delete {
+          background-image: url(../images/dark/icon_picture_delete.svg);
+        }
       }
 
       :-webkit-any(cr-icon-button, .cr-icon).icon-expand-less {
         background-image: url(../images/icon_expand_less.svg);
       }
-      :host-context([dark]) :-webkit-any(cr-icon-button,
-                                         .cr-icon).icon-expand-less {
-        background-image: url(../images/dark/icon_expand_less.svg);
+      @media (prefers-color-scheme: dark) {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-expand-less {
+          background-image: url(../images/dark/icon_expand_less.svg);
+        }
       }
 
       :-webkit-any(cr-icon-button, .cr-icon).icon-expand-more {
         background-image: url(../images/icon_expand_more.svg);
       }
-      :host-context([dark]) :-webkit-any(cr-icon-button,
-                                         .cr-icon).icon-expand-more {
-        background-image: url(../images/dark/icon_expand_more.svg);
+      @media (prefers-color-scheme: dark) {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-expand-more {
+          background-image: url(../images/dark/icon_expand_more.svg);
+        }
       }
 
       :-webkit-any(cr-icon-button, .cr-icon).icon-external {
@@ -94,9 +104,10 @@
       :-webkit-any(cr-icon-button, .cr-icon).icon-more-vert {
         background-image: url(../images/icon_more_vert.svg);
       }
-      :host-context([dark]) :-webkit-any(cr-icon-button,
-                                         .cr-icon).icon-more-vert {
-        background-image: url(../images/dark/icon_more_vert.svg);
+      @media (prefers-color-scheme: dark) {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-more-vert {
+          background-image: url(../images/dark/icon_more_vert.svg);
+        }
       }
       :-webkit-any(cr-icon-button, .cr-icon).icon-more-vert-light-mode {
         background-image: url(../images/icon_more_vert.svg);
@@ -105,56 +116,64 @@
       :-webkit-any(cr-icon-button, .cr-icon).icon-refresh {
         background-image: url(../images/icon_refresh.svg);
       }
-      :host-context([dark]) :-webkit-any(cr-icon-button,
-                                         .cr-icon).icon-refresh {
-        background-image: url(../images/dark/icon_refresh.svg);
+      @media (prefers-color-scheme: dark) {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-refresh {
+          background-image: url(../images/dark/icon_refresh.svg);
+        }
       }
 
       :-webkit-any(cr-icon-button, .cr-icon).icon-settings {
         background-image: url(../images/icon_settings.svg);
       }
-      :host-context([dark]) :-webkit-any(cr-icon-button,
-                                         .cr-icon).icon-settings {
-        background-image: url(../images/dark/icon_settings.svg);
+      @media (prefers-color-scheme: dark) {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-settings {
+          background-image: url(../images/dark/icon_settings.svg);
+        }
       }
 
       :-webkit-any(cr-icon-button, .cr-icon).icon-search {
         background-image: url(../images/icon_search.svg);
       }
-      :host-context([dark]) :-webkit-any(cr-icon-button, .cr-icon).icon-search {
-        background-image: url(../images/dark/icon_search.svg);
+      @media (prefers-color-scheme: dark) {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-search {
+          background-image: url(../images/dark/icon_search.svg);
+        }
       }
 
       :-webkit-any(cr-icon-button, .cr-icon).icon-arrow-dropdown {
         background-image: url(../images/icon_arrow_dropdown.svg);
       }
-      :host-context([dark]) :-webkit-any(cr-icon-button,
-                                         .cr-icon).icon-arrow-dropdown {
-        background-image: url(../images/dark/icon_arrow_dropdown.svg);
+      @media (prefers-color-scheme: dark) {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-arrow-dropdown {
+          background-image: url(../images/dark/icon_arrow_dropdown.svg);
+        }
       }
 
       :-webkit-any(cr-icon-button, .cr-icon).subpage-arrow {
         background-image: url(../images/arrow_right.svg);
       }
-      :host-context([dark]) :-webkit-any(cr-icon-button,
-                                         .cr-icon).subpage-arrow {
-        background-image: url(../images/dark/arrow_right.svg);
+      @media (prefers-color-scheme: dark) {
+        :-webkit-any(cr-icon-button, .cr-icon).subpage-arrow {
+          background-image: url(../images/dark/arrow_right.svg);
+        }
       }
 
       :-webkit-any(cr-icon-button, .cr-icon).icon-visibility {
         background-image: url(../images/icon_visibility.svg);
       }
-      :host-context([dark]) :-webkit-any(cr-icon-button,
-                                         .cr-icon).icon-visibility {
-        background-image: url(../images/dark/icon_visibility.svg);
+      @media (prefers-color-scheme: dark) {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-visibility {
+          background-image: url(../images/dark/icon_visibility.svg);
+        }
       }
 
       :-webkit-any(cr-icon-button, .cr-icon).icon-visibility-off {
         background-image: url(../images/icon_visibility_off.svg);
       }
-      :host-context([dark]) :-webkit-any(cr-icon-button,
-                                         .cr-icon).icon-visibility-off {
-        background-image: url(../images/dark/icon_visibility_off.svg);
+      @media (prefers-color-scheme: dark) {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-visibility-off {
+          background-image: url(../images/dark/icon_visibility_off.svg);
+        }
       }
     </style>
   </template>

ui/webui/resources/cr_elements/cr_input/cr_input_style_css.html

@@ -19,12 +19,14 @@
         outline: none;
       }
 
-      :host-context([dark]) {
-        --cr-input-background-color: rgba(0, 0, 0, .3);
-        --cr-input-color: var(--google-grey-refresh-500);
-        --cr-input-error-color: var(--google-red-refresh-300);
-        --cr-input-focus-color: var(--google-blue-refresh-300);
-        --cr-input-placeholder-color: var(--google-grey-refresh-500);
+      @media (prefers-color-scheme: dark) {
+        :host {
+          --cr-input-background-color: rgba(0, 0, 0, .3);
+          --cr-input-color: var(--google-grey-refresh-500);
+          --cr-input-error-color: var(--google-red-refresh-300);
+          --cr-input-focus-color: var(--google-blue-refresh-300);
+          --cr-input-placeholder-color: var(--google-grey-refresh-500);
+        }
       }
 
       /* Label styling below. */

ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html

@@ -41,10 +41,12 @@
         @apply --avatar-selector-avatar;
       }
 
-      :host-context([dark]) #avatar-grid .avatar {
-        --avatar-focus-color: var(--google-grey-refresh-500);
-        --avatar-gap-color: var(--google-grey-800);
-        --avatar-selected-color: var(--google-blue-refresh-300);
+      @media (prefers-color-scheme: dark) {
+        #avatar-grid .avatar {
+          --avatar-focus-color: var(--google-grey-refresh-500);
+          --avatar-gap-color: var(--google-grey-800);
+          --avatar-selected-color: var(--google-blue-refresh-300);
+        }
       }
 
       #avatar-grid .avatar.iron-selected {

ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html

@@ -25,13 +25,15 @@
         outline: none;
       }
 
-      :host-context([dark]) {
-        --cr-radio-button-checked-color: var(--google-blue-refresh-300);
-        --cr-radio-button-checked-ripple-color:
-            rgba(var(--google-blue-refresh-300-rgb), .4);
-        --cr-radio-button-unchecked-color: var(--google-grey-refresh-500);
-        --cr-radio-button-unchecked-ripple-color:
-            rgba(var(--google-grey-refresh-300-rgb), .4);
+      @media (prefers-color-scheme: dark) {
+        :host {
+          --cr-radio-button-checked-color: var(--google-blue-refresh-300);
+          --cr-radio-button-checked-ripple-color:
+              rgba(var(--google-blue-refresh-300-rgb), .4);
+          --cr-radio-button-unchecked-color: var(--google-grey-refresh-500);
+          --cr-radio-button-unchecked-ripple-color:
+              rgba(var(--google-grey-refresh-300-rgb), .4);
+        }
       }
 
       :host([disabled]) {

ui/webui/resources/cr_elements/cr_search_field/cr_search_field.html

@@ -51,13 +51,15 @@
         width: 160px;  /* Special width for search input. */
       }
 
-      :host-context([dark]) cr-input {
-        /* TODO(dbeam): needing to use inherit here seems silly. In light mode,
-         * the background color is just matched (i.e. the parent's background is
-         * white, but this element also explicitly sets its background and the
-         * background of the container cr-input to white). Can we just not set
-         * these rules? */
-        --cr-input-background-color: inherit;
+      @media (prefers-color-scheme: dark) {
+        cr-input {
+          /* TODO(dbeam): needing to use inherit here seems silly. In light mode,
+           * the background color is just matched (i.e. the parent's background is
+           * white, but this element also explicitly sets its background and the
+           * background of the container cr-input to white). Can we just not set
+           * these rules? */
+          --cr-input-background-color: inherit;
+        }
       }
 
       :host([has-search-text]) cr-input {

ui/webui/resources/cr_elements/cr_slider/cr_slider.html

@@ -31,20 +31,22 @@
         user-select: none;
       }
 
-      :host-context([dark]) {
-        --cr-slider-active-color: var(--google-blue-refresh-300);
-        --cr-slider-container-color:
-            rgba(var(--google-blue-refresh-500-rgb, .48));
-        --cr-slider-container-disabled-color:
-            rgba(var(--google-grey-600-rgb), .48);
-        /* --cr-slider-disabled-color is the same in dark mode (GG600). */
-        --cr-slider-knob-color: var(--google-blue-refresh-300);
-        /* --google-grey-900 + 4% white blended together. */
-        --cr-slider-knob-disabled-color: #28292c;
-        --cr-slider-marker-active-color: var(--google-blue-refresh-300);
-        --cr-slider-marker-color: var(--google-blue-refresh-300);
-        --cr-slider-marker-disabled-color: rgba(255, 255, 255, .54);
-        --cr-slider-ripple-opacity: .4;
+      @media (prefers-color-scheme: dark) {
+        :host {
+          --cr-slider-active-color: var(--google-blue-refresh-300);
+          --cr-slider-container-color:
+              rgba(var(--google-blue-refresh-500-rgb, .48));
+          --cr-slider-container-disabled-color:
+              rgba(var(--google-grey-600-rgb), .48);
+          /* --cr-slider-disabled-color is the same in dark mode (GG600). */
+          --cr-slider-knob-color: var(--google-blue-refresh-300);
+          /* --google-grey-900 + 4% white blended together. */
+          --cr-slider-knob-disabled-color: #28292c;
+          --cr-slider-marker-active-color: var(--google-blue-refresh-300);
+          --cr-slider-marker-color: var(--google-blue-refresh-300);
+          --cr-slider-marker-disabled-color: rgba(255, 255, 255, .54);
+          --cr-slider-ripple-opacity: .4;
+        }
       }
 
       :host([dragging]) {

ui/webui/resources/cr_elements/cr_tabs/cr_tabs.html

@@ -35,12 +35,14 @@
         opacity: 1;
       }
 
-      .selected:focus {
-        font-weight: 700;
+      @media (prefers-color-scheme: dark) {
+        .selected {
+          color: var(--google-blue-refresh-300);
+        }
       }
 
-      :host-context([dark]) .selected {
-        color: var(--google-blue-refresh-300);
+      .selected:focus {
+        font-weight: 700;
       }
 
       #selectionBar {
@@ -58,8 +60,10 @@
         transition: transform;
       }
 
-      :host-context([dark]) #selectionBar {
-        border-bottom-color: var(--google-blue-refresh-300);
+      @media (prefers-color-scheme: dark) {
+        #selectionBar {
+          border-bottom-color: var(--google-blue-refresh-300);
+        }
       }
 
       #selectionBar.expand {

ui/webui/resources/cr_elements/cr_toast/cr_toast.html

@@ -12,11 +12,13 @@
         --cr-toast-text-color: #fff;
       }
 
-      :host-context([dark]) {
-        --cr-toast-background: var(--google-grey-900)
-            linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06));
-        --cr-toast-button-color: var(--google-blue-refresh-300);
-        --cr-toast-text-color: var(--google-grey-200);
+      @media (prefers-color-scheme: dark) {
+        :host {
+          --cr-toast-background: var(--google-grey-900)
+              linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06));
+          --cr-toast-button-color: var(--google-blue-refresh-300);
+          --cr-toast-text-color: var(--google-grey-200);
+        }
       }
 
       :host {

ui/webui/resources/cr_elements/cr_toggle/cr_toggle.html

@@ -22,14 +22,16 @@
         width: 34px;
       }
 
-      :host-context([dark]) {
-        --cr-toggle-checked-bar-color: var(--google-blue-refresh-300);
-        --cr-toggle-checked-button-color: var(--google-blue-refresh-300);
-        --cr-toggle-checked-ink-color: var(--google-blue-refresh-300);
-        --cr-toggle-ripple-opacity: .4;
-        --cr-toggle-unchecked-bar-color: var(--google-grey-refresh-500);
-        --cr-toggle-unchecked-button-color: var(--google-grey-refresh-300);
-        --cr-toggle-unchecked-ink-color: var(--google-grey-refresh-300);
+      @media (prefers-color-scheme: dark) {
+        :host {
+          --cr-toggle-checked-bar-color: var(--google-blue-refresh-300);
+          --cr-toggle-checked-button-color: var(--google-blue-refresh-300);
+          --cr-toggle-checked-ink-color: var(--google-blue-refresh-300);
+          --cr-toggle-ripple-opacity: .4;
+          --cr-toggle-unchecked-bar-color: var(--google-grey-refresh-500);
+          --cr-toggle-unchecked-button-color: var(--google-grey-refresh-300);
+          --cr-toggle-unchecked-ink-color: var(--google-grey-refresh-300);
+        }
       }
 
       :host([disabled]) {
@@ -96,8 +98,10 @@
         color: var(--cr-toggle-checked-ink-color);
       }
 
-      :host-context(html:not([dark])):host([checked]) paper-ripple {
-        --paper-ripple-opacity: 0.2;
+      @media (prefers-color-scheme: light) {
+        :host([checked]) paper-ripple {
+          --paper-ripple-opacity: 0.2;
+        }
       }
     </style>
     <span id="bar"></span>

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html

@@ -19,11 +19,13 @@
         height: var(--cr-toolbar-height);
       }
 
-      :host-context([dark]) {
-        background-color: rgba(255, 255, 255, .04);
-        border-bottom: var(--cr-separator-line);
-        box-sizing: border-box;
-        color: var(--cr-secondary-text-color);
+      @media (prefers-color-scheme: dark) {
+        :host {
+          background-color: rgba(255, 255, 255, .04);
+          border-bottom: var(--cr-separator-line);
+          box-sizing: border-box;
+          color: var(--cr-secondary-text-color);
+        }
       }
 
       h1 {
@@ -36,8 +38,10 @@
         padding-inline-end: 12px;
       }
 
-      :host-context([dark]) h1 {
-        color: var(--cr-primary-text-color);
+      @media (prefers-color-scheme: dark) {
+        h1 {
+          color: var(--cr-primary-text-color);
+        }
       }
 
       #leftContent {
@@ -59,8 +63,10 @@
         min-width: 32px;
       }
 
-      :host-context(html:not([dark])) cr-icon-button {
-        --cr-icon-button-color: currentColor;
+      @media (prefers-color-scheme: light) {
+        cr-icon-button {
+          --cr-icon-button-color: currentColor;
+        }
       }
 
       #centeredContent {

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html

@@ -28,8 +28,10 @@
         margin: 6px;
       }
 
-      :host-context(html:not([dark])) cr-icon-button {
-        --cr-icon-button-color: currentColor;
+      @media (prefers-color-scheme: light) {
+        cr-icon-button {
+          --cr-icon-button-color: currentColor;
+        }
       }
 
       #icon {
@@ -41,8 +43,10 @@
         opacity: 0;
       }
 
-      :host-context([dark]) #prompt {
-        --cr-toolbar-search-field-prompt-opacity: 1;
+      @media (prefers-color-scheme: dark) {
+        #prompt {
+          --cr-toolbar-search-field-prompt-opacity: 1;
+        }
       }
 
       paper-spinner-lite {

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_selection_overlay.html

@@ -27,11 +27,13 @@
         visibility: hidden;
       }
 
-      :host-context([dark]) {
-        background-color: var(--google-grey-900);
-        background-image: linear-gradient(rgba(255, 255, 255, .04),
-                                          rgba(255, 255, 255, .04));
-        border-bottom-color: var(--cr-separator-color);
+      @media (prefers-color-scheme: dark) {
+        :host {
+          background-color: var(--google-grey-900);
+          background-image: linear-gradient(rgba(255, 255, 255, .04),
+                                            rgba(255, 255, 255, .04));
+          border-bottom-color: var(--cr-separator-color);
+        }
       }
 
       :host([show]) {

ui/webui/resources/cr_elements/paper_button_style_css.html

@@ -38,39 +38,40 @@
         --text-color: var(--google-blue-600);
       }
 
-      [dark] paper-button,
-      :host-context([dark]) paper-button {
-        /* Only in dark. */
-        --active-bg: black linear-gradient(rgba(255, 255, 255, .06),
-                                           rgba(255, 255, 255, .06));
-        --active-shadow-rgb: 0, 0, 0;
-        --active-shadow-action-rgb: var(--google-blue-refresh-500-rgb);
+      @media (prefers-color-scheme: dark) {
+        paper-button {
+          /* Only in dark. */
+          --active-bg: black linear-gradient(rgba(255, 255, 255, .06),
+                                             rgba(255, 255, 255, .06));
+          --active-shadow-rgb: 0, 0, 0;
+          --active-shadow-action-rgb: var(--google-blue-refresh-500-rgb);
 
-        --border-color: var(--google-grey-refresh-700);
+          --border-color: var(--google-grey-refresh-700);
 
-        --disabled-color: var(--google-grey-800);
-        /* --disabled-text-color is same as light mode (GG 600). */
+          --disabled-color: var(--google-grey-800);
+          /* --disabled-text-color is same as light mode (GG 600). */
 
-        --flat-bg-action: var(--google-blue-refresh-300);
-        /* TODO(dbeam): get --flat-disabled-bg from Namrata. */
-        --flat-disabled-bg: transparent;
-        --flat-disabled-border-color: var(--google-grey-800);
-        --flat-focus-shadow-color: rgba(var(--google-blue-refresh-300-rgb), .5);
-        --flat-ink-color-action: black;
-        --flat-ripple-opacity-action: .16;
-        --flat-text-color-action: var(--google-grey-900);
+          --flat-bg-action: var(--google-blue-refresh-300);
+          /* TODO(dbeam): get --flat-disabled-bg from Namrata. */
+          --flat-disabled-bg: transparent;
+          --flat-disabled-border-color: var(--google-grey-800);
+          --flat-focus-shadow-color: rgba(var(--google-blue-refresh-300-rgb), .5);
+          --flat-ink-color-action: black;
+          --flat-ripple-opacity-action: .16;
+          --flat-text-color-action: var(--google-grey-900);
 
-        --hover-bg-action: var(--flat-bg-action)
-            linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
-        --hover-bg-color: rgba(var(--google-blue-refresh-300-rgb), .08);
-        /* No change in secondary box-shadow or border color on hover
-         * (--hover-border-color, --hover-shadow-action-rgb) in dark mode. */
+          --hover-bg-action: var(--flat-bg-action)
+              linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
+          --hover-bg-color: rgba(var(--google-blue-refresh-300-rgb), .08);
+          /* No change in secondary box-shadow or border color on hover
+           * (--hover-border-color, --hover-shadow-action-rgb) in dark mode. */
 
-        --paper-button-ink-color: var(--google-blue-refresh-300);
+          --paper-button-ink-color: var(--google-blue-refresh-300);
 
-        --ripple-opacity: .16;
+          --ripple-opacity: .16;
 
-        --text-color: var(--google-blue-refresh-300);
+          --text-color: var(--google-blue-refresh-300);
+        }
       }
 
       paper-button {
@@ -104,8 +105,10 @@
         background-color: var(--hover-bg-color);
       }
 
-      :host-context(html:not([dark])) paper-button:not(.action-button):hover {
-        border-color: var(--hover-border-color);
+      @media (prefers-color-scheme: light) {
+        paper-button:not(.action-button):hover {
+          border-color: var(--hover-border-color);
+        }
       }
 
       paper-button:not(.action-button):active {
@@ -119,10 +122,12 @@
         background: var(--hover-bg-action);
       }
 
-      :host-context(html:not([dark])) paper-button.action-button:hover {
-        box-shadow:
-            0 1px 2px 0 rgba(var(--hover-shadow-action-rgb), .3),
-            0 1px 3px 1px rgba(var(--hover-shadow-action-rgb), .15);
+      @media (prefers-color-scheme: light) {
+        paper-button.action-button:hover {
+          box-shadow:
+              0 1px 2px 0 rgba(var(--hover-shadow-action-rgb), .3),
+              0 1px 3px 1px rgba(var(--hover-shadow-action-rgb), .15);
+        }
       }
 
       paper-button.action-button:active {

ui/webui/resources/cr_elements/shared_style_css.html

@@ -14,9 +14,11 @@
         --scrollable-border-color: var(--google-grey-refresh-300);
       }
 
-      html[dark],
-      :host-context([dark]) {
-        --scrollable-border-color: var(--google-grey-refresh-700);
+      @media (prefers-color-scheme: dark) {
+        html,
+        :host {
+          --scrollable-border-color: var(--google-grey-refresh-700);
+        }
       }
 
       [actionable] {

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -78,32 +78,34 @@
     --cr-toggle-color: var(--google-blue-500);
   }
 
-  html[dark] {
-    --cr-primary-text-color: var(--google-grey-200);
-    --cr-secondary-text-color: var(--google-grey-refresh-500);
-
-    --cr-card-background-color: var(--google-grey-900);
-    --cr-card-shadow-color-rgb: 0, 0, 0;
-
-    --cr-card-elevation: {
-      /* This gradient intentionally uses the same from/to colors to add 4%
-       * white on top of an opaque background-color. */
-      background-image: linear-gradient(rgba(255, 255, 255, .04),
-                                        rgba(255, 255, 255, .04));
-      box-shadow: var(--cr-card-shadow);  /* Uses --cr-card-shadow-color-rgb. */
+  @media (prefers-color-scheme: dark) {
+    html {
+      --cr-primary-text-color: var(--google-grey-200);
+      --cr-secondary-text-color: var(--google-grey-refresh-500);
+
+      --cr-card-background-color: var(--google-grey-900);
+      --cr-card-shadow-color-rgb: 0, 0, 0;
+
+      --cr-card-elevation: {
+        /* This gradient intentionally uses the same from/to colors to add 4%
+         * white on top of an opaque background-color. */
+        background-image: linear-gradient(rgba(255, 255, 255, .04),
+                                          rgba(255, 255, 255, .04));
+        box-shadow: var(--cr-card-shadow);  /* Uses --cr-card-shadow-color-rgb. */
+      }
+
+      --cr-checked-color: var(--google-blue-refresh-300);
+      --cr-form-field-label-color: var(--dark-secondary-color);
+      --cr-link-color: var(--google-blue-refresh-300);
+      --cr-menu-background-color: var(--google-grey-900);
+      --cr-menu-background-focus-color: rgba(var(--google-grey-800-rgb), .6);
+      --cr-menu-background-sheen: rgba(255, 255, 255, .06);  /* Only dark mode. */
+      --cr-menu-shadow: rgba(0, 0, 0, .3) 0 1px 2px 0,
+                        rgba(0, 0, 0, .15) 0 3px 6px 2px;
+      --cr-separator-color: rgba(255, 255, 255, .1);
+      /* TODO(dbeam): --cr-toggle-color (CrOS only). */
+      --cr-title-text-color: var(--cr-primary-text-color);
     }
-
-    --cr-checked-color: var(--google-blue-refresh-300);
-    --cr-form-field-label-color: var(--dark-secondary-color);
-    --cr-link-color: var(--google-blue-refresh-300);
-    --cr-menu-background-color: var(--google-grey-900);
-    --cr-menu-background-focus-color: rgba(var(--google-grey-800-rgb), .6);
-    --cr-menu-background-sheen: rgba(255, 255, 255, .06);  /* Only dark mode. */
-    --cr-menu-shadow: rgba(0, 0, 0, .3) 0 1px 2px 0,
-                      rgba(0, 0, 0, .15) 0 3px 6px 2px;
-    --cr-separator-color: rgba(255, 255, 255, .1);
-    /* TODO(dbeam): --cr-toggle-color (CrOS only). */
-    --cr-title-text-color: var(--cr-primary-text-color);
   }
 
   /* Don't use color values past this point. Instead, create a variable that's

ui/webui/resources/css/md_colors.css

@@ -12,10 +12,12 @@ html {
   --md-toolbar-height: 56px;
 }
 
-html[dark] {
-  --md-background-color: rgb(32, 33, 36);  /* --google-grey-900 */
-  --md-loading-message-color: #9AA0A6;  /* --google-grey-refresh-500 */
-  /* --cr-separator-line */
-  --md-toolbar-border: 1px solid rgba(255, 255, 255, .1);
-  --md-toolbar-color: rgba(255, 255, 255, .04);
+@media (prefers-color-scheme: dark) {
+  html {
+    --md-background-color: rgb(32, 33, 36);  /* --google-grey-900 */
+    --md-loading-message-color: #9AA0A6;  /* --google-grey-refresh-500 */
+    /* --cr-separator-line */
+    --md-toolbar-border: 1px solid rgba(255, 255, 255, .1);
+    --md-toolbar-color: rgba(255, 255, 255, .04);
+  }
 }

ui/webui/resources/html/md_select_css.html

@@ -38,16 +38,18 @@
         width: var(--md-select-width, 200px);
       }
 
-      :host-context([dark]) .md-select {
-        --md-select-bg-color: rgba(0, 0, 0, .3);
-        --md-select-focus-shadow-color:
-            rgba(var(--google-blue-refresh-300-rgb), .5);
-        /* --google-grey-900 + 4% white. This is typically implemented with
-         * background-{color,image} for e.g. menus, but it's not currently
-         * possible to style background-image on <option>. */
-        --md-select-option-bg-color: #28292c;
-        --md-select-text-color: var(--cr-primary-text-color);
-        background-image: url(chrome://resources/images/dark/arrow_down.svg);
+      @media (prefers-color-scheme: dark) {
+        .md-select {
+          --md-select-bg-color: rgba(0, 0, 0, .3);
+          --md-select-focus-shadow-color:
+              rgba(var(--google-blue-refresh-300-rgb), .5);
+          /* --google-grey-900 + 4% white. This is typically implemented with
+           * background-{color,image} for e.g. menus, but it's not currently
+           * possible to style background-image on <option>. */
+          --md-select-option-bg-color: #28292c;
+          --md-select-text-color: var(--cr-primary-text-color);
+          background-image: url(chrome://resources/images/dark/arrow_down.svg);
+        }
       }
 
       /* Makes sure anything within the dropdown menu has a background. */