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}

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}
6e5a6179 · Dan Beam · Commit Bot · 15bc4b2c · 6e5a6179 · 6e5a6179
Commit 6e5a6179 authored Jun 07, 2019 by Dan Beam Committed by Commit Bot Jun 07, 2019
21 changed files
--- a/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.html
+++ b/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]) {
+      @media (prefers-color-scheme: dark) {
-        /* Dark mode colors. */
+        :host {
-        --cr-checkbox-checked-ripple-opacity: .4;
+          /* Dark mode colors. */
-        --cr-checkbox-mark-color: var(--google-grey-900);
+          --cr-checkbox-checked-ripple-opacity: .4;
-        --cr-checkbox-ripple-unchecked-color: var(--google-grey-refresh-700);
+          --cr-checkbox-mark-color: var(--google-grey-900);
-        --cr-checkbox-unchecked-box-color: var(--google-grey-refresh-500);
+          --cr-checkbox-ripple-unchecked-color: var(--google-grey-refresh-700);
-        --cr-checkbox-unchecked-ripple-opacity: .4;
+          --cr-checkbox-unchecked-box-color: var(--google-grey-refresh-500);
+          --cr-checkbox-unchecked-ripple-opacity: .4;
+        }
      }
      :host([disabled]) {

--- a/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html
+++ b/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html
@@ -26,13 +26,15 @@
        @apply --cr-dialog-native;
      }
-      :host-context([dark]) dialog {
+      @media (prefers-color-scheme: dark) {
-        --scroll-border-color: var(--google-grey-refresh-700);
+        dialog {
-        background-color: var(--google-grey-900);
+          --scroll-border-color: var(--google-grey-refresh-700);
-        /* Note: the colors in linear-gradient() are intentionally the same to
+          background-color: var(--google-grey-900);
-         * add a 4% white layer on top of the fully opaque background-color. */
+          /* Note: the colors in linear-gradient() are intentionally the same to
-        background-image: linear-gradient(rgba(255, 255, 255, .04),
+           * add a 4% white layer on top of the fully opaque background-color. */
-                                          rgba(255, 255, 255, .04));
+          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]) {
+      @media (prefers-color-scheme: dark) {
-        border-top-color: var(--cr-separator-color);
+        :host ::slotted([slot=footer]) {
+          border-top-color: var(--cr-separator-color);
+        }
      }
      .body-container {

--- a/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html
+++ b/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html
@@ -23,9 +23,11 @@
        width: var(--drawer-width);
      }
-      :host-context([dark]) dialog {
+      @media (prefers-color-scheme: dark) {
-        background: var(--google-grey-900)
+        :host dialog {
-            linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04));
+          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 {
+      @media (prefers-color-scheme: dark) {
-        color: var(--cr-primary-text-color);
+        .drawer-header {
+          color: var(--cr-primary-text-color);
+        }
      }
      :host ::slotted(.drawer-content) {

--- a/ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.html
+++ b/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]) {
+      @media (prefers-color-scheme: dark) {
-        --cr-icon-button-color: var(--google-grey-refresh-500);
+        :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 {
+      @media (prefers-color-scheme: dark) {
-        --paper-ripple-opacity: var(--cr-icon-button-ripple-opacity, .4);
+        :host paper-ripple {
+          --paper-ripple-opacity: var(--cr-icon-button-ripple-opacity, .4);
+        }
      }
      #icon {

--- a/ui/webui/resources/cr_elements/cr_icons_css.html
+++ b/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,
+      @media (prefers-color-scheme: dark) {
-                                         .cr-icon).icon-arrow-back {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-arrow-back {
-        background-image: url(../images/dark/icon_arrow_back.svg);
+          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) {
-        background-image: url(../images/dark/icon_cancel.svg);
+        :-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,
+      @media (prefers-color-scheme: dark) {
-                                         .cr-icon).icon-toolbar-cancel {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-toolbar-cancel {
-        background-image: url(../images/dark/icon_toolbar_cancel.svg);
+          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) {
-        background-image: url(../images/dark/icon_clear.svg);
+        :-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,
+      @media (prefers-color-scheme: dark) {
-                                         .cr-icon).icon-delete-gray {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-delete-gray {
-        background-image: url(../images/dark/icon_delete_gray.svg);
+          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,
+      @media (prefers-color-scheme: dark) {
-                                         .cr-icon).icon-picture-delete {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-picture-delete {
-        background-image: url(../images/dark/icon_picture_delete.svg);
+          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,
+      @media (prefers-color-scheme: dark) {
-                                         .cr-icon).icon-expand-less {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-expand-less {
-        background-image: url(../images/dark/icon_expand_less.svg);
+          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,
+      @media (prefers-color-scheme: dark) {
-                                         .cr-icon).icon-expand-more {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-expand-more {
-        background-image: url(../images/dark/icon_expand_more.svg);
+          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,
+      @media (prefers-color-scheme: dark) {
-                                         .cr-icon).icon-more-vert {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-more-vert {
-        background-image: url(../images/dark/icon_more_vert.svg);
+          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,
+      @media (prefers-color-scheme: dark) {
-                                         .cr-icon).icon-refresh {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-refresh {
-        background-image: url(../images/dark/icon_refresh.svg);
+          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,
+      @media (prefers-color-scheme: dark) {
-                                         .cr-icon).icon-settings {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-settings {
-        background-image: url(../images/dark/icon_settings.svg);
+          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) {
-        background-image: url(../images/dark/icon_search.svg);
+        :-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,
+      @media (prefers-color-scheme: dark) {
-                                         .cr-icon).icon-arrow-dropdown {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-arrow-dropdown {
-        background-image: url(../images/dark/icon_arrow_dropdown.svg);
+          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,
+      @media (prefers-color-scheme: dark) {
-                                         .cr-icon).subpage-arrow {
+        :-webkit-any(cr-icon-button, .cr-icon).subpage-arrow {
-        background-image: url(../images/dark/arrow_right.svg);
+          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,
+      @media (prefers-color-scheme: dark) {
-                                         .cr-icon).icon-visibility {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-visibility {
-        background-image: url(../images/dark/icon_visibility.svg);
+          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,
+      @media (prefers-color-scheme: dark) {
-                                         .cr-icon).icon-visibility-off {
+        :-webkit-any(cr-icon-button, .cr-icon).icon-visibility-off {
-        background-image: url(../images/dark/icon_visibility_off.svg);
+          background-image: url(../images/dark/icon_visibility_off.svg);
+        }
      }
    </style>
  </template>

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

--- a/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html
+++ b/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 {
+      @media (prefers-color-scheme: dark) {
-        --avatar-focus-color: var(--google-grey-refresh-500);
+        #avatar-grid .avatar {
-        --avatar-gap-color: var(--google-grey-800);
+          --avatar-focus-color: var(--google-grey-refresh-500);
-        --avatar-selected-color: var(--google-blue-refresh-300);
+          --avatar-gap-color: var(--google-grey-800);
+          --avatar-selected-color: var(--google-blue-refresh-300);
+        }
      }
      #avatar-grid .avatar.iron-selected {

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

--- a/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.html
+++ b/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 {
+      @media (prefers-color-scheme: dark) {
-        /* TODO(dbeam): needing to use inherit here seems silly. In light mode,
+        cr-input {
-         * the background color is just matched (i.e. the parent's background is
+          /* TODO(dbeam): needing to use inherit here seems silly. In light mode,
-         * white, but this element also explicitly sets its background and the
+           * the background color is just matched (i.e. the parent's background is
-         * background of the container cr-input to white). Can we just not set
+           * white, but this element also explicitly sets its background and the
-         * these rules? */
+           * background of the container cr-input to white). Can we just not set
-        --cr-input-background-color: inherit;
+           * these rules? */
+          --cr-input-background-color: inherit;
+        }
      }
      :host([has-search-text]) cr-input {

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

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

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

--- a/ui/webui/resources/cr_elements/cr_toggle/cr_toggle.html
+++ b/ui/webui/resources/cr_elements/cr_toggle/cr_toggle.html
@@ -22,14 +22,16 @@
        width: 34px;
      }
-      :host-context([dark]) {
+      @media (prefers-color-scheme: dark) {
-        --cr-toggle-checked-bar-color: var(--google-blue-refresh-300);
+        :host {
-        --cr-toggle-checked-button-color: var(--google-blue-refresh-300);
+          --cr-toggle-checked-bar-color: var(--google-blue-refresh-300);
-        --cr-toggle-checked-ink-color: var(--google-blue-refresh-300);
+          --cr-toggle-checked-button-color: var(--google-blue-refresh-300);
-        --cr-toggle-ripple-opacity: .4;
+          --cr-toggle-checked-ink-color: var(--google-blue-refresh-300);
-        --cr-toggle-unchecked-bar-color: var(--google-grey-refresh-500);
+          --cr-toggle-ripple-opacity: .4;
-        --cr-toggle-unchecked-button-color: var(--google-grey-refresh-300);
+          --cr-toggle-unchecked-bar-color: var(--google-grey-refresh-500);
-        --cr-toggle-unchecked-ink-color: var(--google-grey-refresh-300);
+          --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 {
+      @media (prefers-color-scheme: light) {
-        --paper-ripple-opacity: 0.2;
+        :host([checked]) paper-ripple {
+          --paper-ripple-opacity: 0.2;
+        }
      }
    </style>
    <span id="bar"></span>

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

--- a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html
+++ b/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 {
+      @media (prefers-color-scheme: light) {
-        --cr-icon-button-color: currentColor;
+        cr-icon-button {
+          --cr-icon-button-color: currentColor;
+        }
      }
      #icon {
@@ -41,8 +43,10 @@
        opacity: 0;
      }
-      :host-context([dark]) #prompt {
+      @media (prefers-color-scheme: dark) {
-        --cr-toolbar-search-field-prompt-opacity: 1;
+        #prompt {
+          --cr-toolbar-search-field-prompt-opacity: 1;
+        }
      }
      paper-spinner-lite {

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

--- a/ui/webui/resources/cr_elements/paper_button_style_css.html
+++ b/ui/webui/resources/cr_elements/paper_button_style_css.html
@@ -38,39 +38,40 @@
        --text-color: var(--google-blue-600);
      }
-      [dark] paper-button,
+      @media (prefers-color-scheme: dark) {
-      :host-context([dark]) paper-button {
+        paper-button {
-        /* Only in dark. */
+          /* Only in dark. */
-        --active-bg: black linear-gradient(rgba(255, 255, 255, .06),
+          --active-bg: black linear-gradient(rgba(255, 255, 255, .06),
-                                           rgba(255, 255, 255, .06));
+                                             rgba(255, 255, 255, .06));
-        --active-shadow-rgb: 0, 0, 0;
+          --active-shadow-rgb: 0, 0, 0;
-        --active-shadow-action-rgb: var(--google-blue-refresh-500-rgb);
+          --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-color: var(--google-grey-800);
-        /* --disabled-text-color is same as light mode (GG 600). */
+          /* --disabled-text-color is same as light mode (GG 600). */
-        --flat-bg-action: var(--google-blue-refresh-300);
+          --flat-bg-action: var(--google-blue-refresh-300);
-        /* TODO(dbeam): get --flat-disabled-bg from Namrata. */
+          /* TODO(dbeam): get --flat-disabled-bg from Namrata. */
-        --flat-disabled-bg: transparent;
+          --flat-disabled-bg: transparent;
-        --flat-disabled-border-color: var(--google-grey-800);
+          --flat-disabled-border-color: var(--google-grey-800);
-        --flat-focus-shadow-color: rgba(var(--google-blue-refresh-300-rgb), .5);
+          --flat-focus-shadow-color: rgba(var(--google-blue-refresh-300-rgb), .5);
-        --flat-ink-color-action: black;
+          --flat-ink-color-action: black;
-        --flat-ripple-opacity-action: .16;
+          --flat-ripple-opacity-action: .16;
-        --flat-text-color-action: var(--google-grey-900);
+          --flat-text-color-action: var(--google-grey-900);
-        --hover-bg-action: var(--flat-bg-action)
+          --hover-bg-action: var(--flat-bg-action)
-            linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
+              linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
-        --hover-bg-color: rgba(var(--google-blue-refresh-300-rgb), .08);
+          --hover-bg-color: rgba(var(--google-blue-refresh-300-rgb), .08);
-        /* No change in secondary box-shadow or border color on hover
+          /* No change in secondary box-shadow or border color on hover
-         * (--hover-border-color, --hover-shadow-action-rgb) in dark mode. */
+           * (--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 {
+      @media (prefers-color-scheme: light) {
-        border-color: var(--hover-border-color);
+        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 {
+      @media (prefers-color-scheme: light) {
-        box-shadow:
+        paper-button.action-button:hover {
-            0 1px 2px 0 rgba(var(--hover-shadow-action-rgb), .3),
+          box-shadow:
-            0 1px 3px 1px rgba(var(--hover-shadow-action-rgb), .15);
+              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 {

--- a/ui/webui/resources/cr_elements/shared_style_css.html
+++ b/ui/webui/resources/cr_elements/shared_style_css.html
@@ -14,9 +14,11 @@
        --scrollable-border-color: var(--google-grey-refresh-300);
      }
-      html[dark],
+      @media (prefers-color-scheme: dark) {
-      :host-context([dark]) {
+        html,
-        --scrollable-border-color: var(--google-grey-refresh-700);
+        :host {
+          --scrollable-border-color: var(--google-grey-refresh-700);
+        }
      }
      [actionable] {

--- a/ui/webui/resources/cr_elements/shared_vars_css.html
+++ b/ui/webui/resources/cr_elements/shared_vars_css.html
@@ -78,32 +78,34 @@
    --cr-toggle-color: var(--google-blue-500);
  }
-  html[dark] {
+  @media (prefers-color-scheme: dark) {
-    --cr-primary-text-color: var(--google-grey-200);
+    html {
-    --cr-secondary-text-color: var(--google-grey-refresh-500);
+      --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-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%
+      --cr-card-elevation: {
-       * white on top of an opaque background-color. */
+        /* This gradient intentionally uses the same from/to colors to add 4%
-      background-image: linear-gradient(rgba(255, 255, 255, .04),
+         * white on top of an opaque background-color. */
-                                        rgba(255, 255, 255, .04));
+        background-image: linear-gradient(rgba(255, 255, 255, .04),
-      box-shadow: var(--cr-card-shadow);  /* Uses --cr-card-shadow-color-rgb. */
+                                          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

--- a/ui/webui/resources/css/md_colors.css
+++ b/ui/webui/resources/css/md_colors.css
@@ -12,10 +12,12 @@ html {
  --md-toolbar-height: 56px;
 }
-html[dark] {
+@media (prefers-color-scheme: dark) {
-  --md-background-color: rgb(32, 33, 36);  /* --google-grey-900 */
+  html {
-  --md-loading-message-color: #9AA0A6;  /* --google-grey-refresh-500 */
+    --md-background-color: rgb(32, 33, 36);  /* --google-grey-900 */
-  /* --cr-separator-line */
+    --md-loading-message-color: #9AA0A6;  /* --google-grey-refresh-500 */
-  --md-toolbar-border: 1px solid rgba(255, 255, 255, .1);
+    /* --cr-separator-line */
-  --md-toolbar-color: rgba(255, 255, 255, .04);
+    --md-toolbar-border: 1px solid rgba(255, 255, 255, .1);
+    --md-toolbar-color: rgba(255, 255, 255, .04);
+  }
 }
--- a/ui/webui/resources/html/md_select_css.html
+++ b/ui/webui/resources/html/md_select_css.html
@@ -38,16 +38,18 @@
        width: var(--md-select-width, 200px);
      }
-      :host-context([dark]) .md-select {
+      @media (prefers-color-scheme: dark) {
-        --md-select-bg-color: rgba(0, 0, 0, .3);
+        .md-select {
-        --md-select-focus-shadow-color:
+          --md-select-bg-color: rgba(0, 0, 0, .3);
-            rgba(var(--google-blue-refresh-300-rgb), .5);
+          --md-select-focus-shadow-color:
-        /* --google-grey-900 + 4% white. This is typically implemented with
+              rgba(var(--google-blue-refresh-300-rgb), .5);
-         * background-{color,image} for e.g. menus, but it's not currently
+          /* --google-grey-900 + 4% white. This is typically implemented with
-         * possible to style background-image on <option>. */
+           * background-{color,image} for e.g. menus, but it's not currently
-        --md-select-option-bg-color: #28292c;
+           * possible to style background-image on <option>. */
-        --md-select-text-color: var(--cr-primary-text-color);
+          --md-select-option-bg-color: #28292c;
-        background-image: url(chrome://resources/images/dark/arrow_down.svg);
+          --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. */