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,7 +50,8 @@ List of customizable styles:
         --cr-checkbox-unchecked-ripple-opacity: .15;
       }
 
-      :host-context([dark]) {
+      @media (prefers-color-scheme: dark) {
+        :host {
           /* Dark mode colors. */
           --cr-checkbox-checked-ripple-opacity: .4;
           --cr-checkbox-mark-color: var(--google-grey-900);
@@ -58,6 +59,7 @@ List of customizable styles:
           --cr-checkbox-unchecked-box-color: var(--google-grey-refresh-500);
           --cr-checkbox-unchecked-ripple-opacity: .4;
         }
+      }
 
       :host([disabled]) {
         cursor: initial;

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

@@ -26,7 +26,8 @@
         @apply --cr-dialog-native;
       }
 
-      :host-context([dark]) dialog {
+      @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
@@ -34,6 +35,7 @@
           background-image: linear-gradient(rgba(255, 255, 255, .04),
                                             rgba(255, 255, 255, .04));
         }
+      }
 
       dialog[open] #content-wrapper {
         /* Keep max-height within viewport, and flex content accordingly. */
@@ -123,9 +125,11 @@
         padding: 16px 20px;
       }
 
-      :host-context([dark]) ::slotted([slot=footer]) {
+      @media (prefers-color-scheme: dark) {
+        :host ::slotted([slot=footer]) {
           border-top-color: var(--cr-separator-color);
         }
+      }
 
       .body-container {
         box-sizing: border-box;

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

@@ -23,10 +23,12 @@
         width: var(--drawer-width);
       }
 
-      :host-context([dark]) dialog {
+      @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,
       #container {
@@ -73,9 +75,11 @@
         padding-inline-start: 24px;
       }
 
-      :host-context([dark]) .drawer-header {
+      @media (prefers-color-scheme: dark) {
+        .drawer-header {
           color: var(--cr-primary-text-color);
         }
+      }
 
       :host ::slotted(.drawer-content) {
         height: calc(100% - 56px);

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

@@ -41,18 +41,22 @@
         transform: scaleX(-1);  /* Invert X: flip on the Y axis (aka mirror). */
       }
 
-      :host-context([dark]) {
+      @media (prefers-color-scheme: dark) {
+        :host {
           --cr-icon-button-color: var(--google-grey-refresh-500);
         }
+      }
 
       :host paper-ripple {
         /* GG900 .15 is about GG700 .21 */
         --paper-ripple-opacity: var(--cr-icon-button-ripple-opacity, .21);
       }
 
-      :host-context([dark]) paper-ripple {
+      @media (prefers-color-scheme: dark) {
+        :host paper-ripple {
           --paper-ripple-opacity: var(--cr-icon-button-ripple-opacity, .4);
         }
+      }
 
       #icon {
         display: flex;

ui/webui/resources/cr_elements/cr_icons_css.html

@@ -27,64 +27,74 @@
       :-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 {
+      @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 {
+      @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 {
+      @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 {
+      @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 {
+      @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 {
+      @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 {
+      @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 {
+      @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 {
         background-image: url(../images/open_in_new.svg);
@@ -94,10 +104,11 @@
       :-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 {
+      @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,57 +116,65 @@
       :-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 {
+      @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 {
+      @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 {
+      @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 {
+      @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 {
+      @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 {
+      @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 {
+      @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>
 </dom-module>

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

@@ -19,13 +19,15 @@
         outline: none;
       }
 
-      :host-context([dark]) {
+      @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. */
       #label {

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

@@ -41,11 +41,13 @@
         @apply --avatar-selector-avatar;
       }
 
-      :host-context([dark]) #avatar-grid .avatar {
+      @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 {
         --avatar-outline-color: var(--avatar-selected-color);

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

@@ -25,7 +25,8 @@
         outline: none;
       }
 
-      :host-context([dark]) {
+      @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);
@@ -33,6 +34,7 @@
           --cr-radio-button-unchecked-ripple-color:
               rgba(var(--google-grey-refresh-300-rgb), .4);
         }
+      }
 
       :host([disabled]) {
         opacity: var(--cr-disabled-opacity);

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

@@ -51,7 +51,8 @@
         width: 160px;  /* Special width for search input. */
       }
 
-      :host-context([dark]) cr-input {
+      @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
@@ -59,6 +60,7 @@
            * these rules? */
           --cr-input-background-color: inherit;
         }
+      }
 
       :host([has-search-text]) cr-input {
         --cr-input-padding-end: 20px;

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

@@ -31,7 +31,8 @@
         user-select: none;
       }
 
-      :host-context([dark]) {
+      @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));
@@ -46,6 +47,7 @@
           --cr-slider-marker-disabled-color: rgba(255, 255, 255, .54);
           --cr-slider-ripple-opacity: .4;
         }
+      }
 
       :host([dragging]) {
         touch-action: none;

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,9 +60,11 @@
         transition: transform;
       }
 
-      :host-context([dark]) #selectionBar {
+      @media (prefers-color-scheme: dark) {
+        #selectionBar {
           border-bottom-color: var(--google-blue-refresh-300);
         }
+      }
 
       #selectionBar.expand {
         transition-duration: 150ms;

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

@@ -12,12 +12,14 @@
         --cr-toast-text-color: #fff;
       }
 
-      :host-context([dark]) {
+      @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 {
         align-items: center;

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

@@ -22,7 +22,8 @@
         width: 34px;
       }
 
-      :host-context([dark]) {
+      @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);
@@ -31,6 +32,7 @@
           --cr-toggle-unchecked-button-color: var(--google-grey-refresh-300);
           --cr-toggle-unchecked-ink-color: var(--google-grey-refresh-300);
         }
+      }
 
       :host([disabled]) {
         cursor: initial;
@@ -96,9 +98,11 @@
         color: var(--cr-toggle-checked-ink-color);
       }
 
-      :host-context(html:not([dark])):host([checked]) paper-ripple {
+      @media (prefers-color-scheme: light) {
+        :host([checked]) paper-ripple {
           --paper-ripple-opacity: 0.2;
         }
+      }
     </style>
     <span id="bar"></span>
     <span id="knob"></span>

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

@@ -19,12 +19,14 @@
         height: var(--cr-toolbar-height);
       }
 
-      :host-context([dark]) {
+      @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 {
         flex: 1;
@@ -36,9 +38,11 @@
         padding-inline-end: 12px;
       }
 
-      :host-context([dark]) h1 {
+      @media (prefers-color-scheme: dark) {
+        h1 {
           color: var(--cr-primary-text-color);
         }
+      }
 
       #leftContent {
         position: relative;
@@ -59,9 +63,11 @@
         min-width: 32px;
       }
 
-      :host-context(html:not([dark])) cr-icon-button {
+      @media (prefers-color-scheme: light) {
+        cr-icon-button {
           --cr-icon-button-color: currentColor;
         }
+      }
 
       #centeredContent {
         display: flex;

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

@@ -28,9 +28,11 @@
         margin: 6px;
       }
 
-      :host-context(html:not([dark])) cr-icon-button {
+      @media (prefers-color-scheme: light) {
+        cr-icon-button {
           --cr-icon-button-color: currentColor;
         }
+      }
 
       #icon {
         transition: margin 150ms, opacity 200ms;
@@ -41,9 +43,11 @@
         opacity: 0;
       }
 
-      :host-context([dark]) #prompt {
+      @media (prefers-color-scheme: dark) {
+        #prompt {
           --cr-toolbar-search-field-prompt-opacity: 1;
         }
+      }
 
       paper-spinner-lite {
         @apply --cr-icon-height-width;

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

@@ -27,12 +27,14 @@
         visibility: hidden;
       }
 
-      :host-context([dark]) {
+      @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]) {
         opacity: 1;

ui/webui/resources/cr_elements/paper_button_style_css.html

@@ -38,8 +38,8 @@
         --text-color: var(--google-blue-600);
       }
 
-      [dark] paper-button,
-      :host-context([dark]) paper-button {
+      @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));
@@ -72,6 +72,7 @@
 
           --text-color: var(--google-blue-refresh-300);
         }
+      }
 
       paper-button {
         --paper-ripple-opacity: var(--ripple-opacity);
@@ -104,9 +105,11 @@
         background-color: var(--hover-bg-color);
       }
 
-      :host-context(html:not([dark])) paper-button:not(.action-button):hover {
+      @media (prefers-color-scheme: light) {
+        paper-button:not(.action-button):hover {
           border-color: var(--hover-border-color);
         }
+      }
 
       paper-button:not(.action-button):active {
         background: var(--active-bg);
@@ -119,11 +122,13 @@
         background: var(--hover-bg-action);
       }
 
-      :host-context(html:not([dark])) paper-button.action-button:hover {
+      @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 {
         box-shadow:

ui/webui/resources/cr_elements/shared_style_css.html

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

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -78,7 +78,8 @@
     --cr-toggle-color: var(--google-blue-500);
   }
 
-  html[dark] {
+  @media (prefers-color-scheme: dark) {
+    html {
       --cr-primary-text-color: var(--google-grey-200);
       --cr-secondary-text-color: var(--google-grey-refresh-500);
 
@@ -105,6 +106,7 @@
       /* 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
    * set for both light and dark modes and use a single variable below. */

ui/webui/resources/css/md_colors.css

@@ -12,10 +12,12 @@ html {
   --md-toolbar-height: 56px;
 }
 
-html[dark] {
+@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,7 +38,8 @@
         width: var(--md-select-width, 200px);
       }
 
-      :host-context([dark]) .md-select {
+      @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);
@@ -49,6 +50,7 @@
           --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. */
       .md-select :-webkit-any(option, optgroup) {