From 0d7b517173c5a05c6fbb56a0ab145cde9ed9e336 Mon Sep 17 00:00:00 2001
From: Dan Popescu <pdan.popescu@gmail.com>
Date: Mon, 19 Jul 2021 13:47:29 +0300
Subject: [PATCH] feat(dark mode): make dark mode work with auto on SSR #7530,
 #8602, #10014

---
 .../src/pages/components/virtual-scroll-2.vue |  4 +-
 .../src/pages/components/virtual-scroll-3.vue |  2 +-
 .../src/pages/components/virtual-scroll-4.vue |  6 +-
 .../src/pages/components/virtual-scroll-5.vue |  2 +-
 .../src/pages/components/virtual-scroll-6.vue |  2 +-
 ui/src/components/badge/QBadge.sass           |  3 +-
 ui/src/components/badge/QBadge.styl           |  5 +-
 ui/src/components/banner/QBanner.js           |  2 +-
 ui/src/components/banner/QBanner.sass         |  1 -
 ui/src/components/banner/QBanner.styl         |  1 -
 ui/src/components/bar/QBar.js                 |  4 +-
 ui/src/components/bar/QBar.sass               |  4 ++
 ui/src/components/bar/QBar.styl               |  4 ++
 ui/src/components/card/QCard.js               |  2 +-
 ui/src/components/card/QCard.sass             |  5 +-
 ui/src/components/card/QCard.styl             |  5 +-
 ui/src/components/carousel/QCarousel.js       |  2 +-
 ui/src/components/carousel/QCarousel.sass     |  4 +-
 ui/src/components/carousel/QCarousel.styl     |  4 +-
 ui/src/components/checkbox/QCheckbox.sass     | 13 +++-
 ui/src/components/checkbox/QCheckbox.styl     | 13 +++-
 ui/src/components/chip/QChip.js               | 10 ++-
 ui/src/components/chip/QChip.sass             | 25 +++++++-
 ui/src/components/chip/QChip.styl             | 25 +++++++-
 ui/src/components/color/QColor.js             | 10 +--
 ui/src/components/color/QColor.sass           | 24 +++++--
 ui/src/components/color/QColor.styl           | 24 +++++--
 ui/src/components/date/QDate.js               |  2 +-
 ui/src/components/date/QDate.sass             | 10 ++-
 ui/src/components/date/QDate.styl             | 10 ++-
 .../dialog-bottom-sheet/BottomSheet.js        |  8 +--
 .../components/dialog-plugin/DialogPlugin.js  | 14 ++---
 ui/src/components/drawer/QDrawer.js           |  2 +-
 ui/src/components/editor/QEditor.js           |  2 +-
 ui/src/components/editor/QEditor.sass         | 14 ++++-
 ui/src/components/editor/QEditor.styl         | 14 ++++-
 .../expansion-item/QExpansionItem.js          |  6 +-
 ui/src/components/field/QField.js             |  2 +-
 ui/src/components/field/QField.sass           | 62 ++++++++++++++++---
 ui/src/components/field/QField.styl           | 62 ++++++++++++++++---
 .../components/inner-loading/QInnerLoading.js |  2 +-
 .../inner-loading/QInnerLoading.sass          |  5 ++
 .../inner-loading/QInnerLoading.styl          |  5 ++
 ui/src/components/item/QItem.js               |  2 +-
 ui/src/components/item/QItem.sass             | 23 ++++++-
 ui/src/components/item/QItem.styl             | 23 ++++++-
 ui/src/components/item/QList.js               |  2 +-
 ui/src/components/layout/QLayout.sass         |  9 ++-
 ui/src/components/layout/QLayout.styl         |  9 ++-
 .../linear-progress/QLinearProgress.js        |  6 +-
 .../linear-progress/QLinearProgress.sass      |  7 ++-
 .../linear-progress/QLinearProgress.styl      |  7 ++-
 .../components/markup-table/QMarkupTable.js   |  2 +-
 ui/src/components/menu/QMenu.js               |  2 +-
 .../components/option-group/QOptionGroup.js   |  2 +-
 ui/src/components/pagination/QPagination.js   |  2 +-
 .../pull-to-refresh/QPullToRefresh.sass       |  3 +-
 .../pull-to-refresh/QPullToRefresh.styl       |  3 +-
 ui/src/components/radio/QRadio.js             |  2 +-
 ui/src/components/radio/QRadio.sass           | 10 +++
 ui/src/components/radio/QRadio.styl           | 10 +++
 ui/src/components/scroll-area/QScrollArea.js  |  2 +-
 .../components/scroll-area/QScrollArea.sass   | 12 +++-
 .../components/scroll-area/QScrollArea.styl   | 12 +++-
 ui/src/components/select/QSelect.js           | 11 +++-
 ui/src/components/select/QSelect.sass         |  1 -
 ui/src/components/select/QSelect.styl         |  1 -
 ui/src/components/separator/QSeparator.js     |  2 +-
 ui/src/components/separator/QSeparator.sass   |  4 ++
 ui/src/components/separator/QSeparator.styl   |  4 ++
 ui/src/components/skeleton/QSkeleton.js       |  2 +-
 ui/src/components/skeleton/QSkeleton.sass     | 13 ++++
 ui/src/components/skeleton/QSkeleton.styl     | 13 ++++
 ui/src/components/slide-item/QSlideItem.js    |  4 +-
 ui/src/components/slide-item/QSlideItem.sass  |  4 +-
 ui/src/components/slide-item/QSlideItem.styl  |  4 +-
 ui/src/components/slider/QSlider.sass         | 18 ++++--
 ui/src/components/slider/QSlider.styl         | 18 ++++--
 ui/src/components/slider/slider-utils.js      |  2 +-
 ui/src/components/splitter/QSplitter.js       |  2 +-
 ui/src/components/splitter/QSplitter.sass     |  5 ++
 ui/src/components/splitter/QSplitter.styl     |  5 ++
 ui/src/components/stepper/QStepper.js         |  8 ++-
 ui/src/components/stepper/QStepper.sass       | 37 +++++++++--
 ui/src/components/stepper/QStepper.styl       | 37 +++++++++--
 ui/src/components/tab-panels/QTabPanel.sass   |  3 -
 ui/src/components/tab-panels/QTabPanel.styl   |  3 -
 ui/src/components/tab-panels/QTabPanels.js    |  2 +-
 ui/src/components/table/QTable.js             |  6 +-
 ui/src/components/table/QTable.sass           | 25 ++++++--
 ui/src/components/table/QTable.styl           | 25 ++++++--
 ui/src/components/table/table-body.js         |  4 +-
 ui/src/components/table/table-bottom.js       |  2 +-
 ui/src/components/table/table-grid.js         |  4 +-
 ui/src/components/table/table-header.js       |  4 +-
 ui/src/components/time/QTime.js               |  2 +-
 ui/src/components/time/QTime.sass             | 14 +++--
 ui/src/components/time/QTime.styl             | 15 +++--
 ui/src/components/timeline/QTimeline.js       |  2 +-
 ui/src/components/timeline/QTimeline.sass     | 16 ++++-
 ui/src/components/timeline/QTimeline.styl     | 16 ++++-
 ui/src/components/toggle/QToggle.sass         | 24 +++++--
 ui/src/components/toggle/QToggle.styl         | 24 +++++--
 ui/src/components/tree/QTree.js               |  6 +-
 ui/src/components/tree/QTree.sass             | 14 ++++-
 ui/src/components/tree/QTree.styl             | 14 ++++-
 ui/src/components/uploader/QUploader.sass     | 28 +++++++--
 ui/src/components/uploader/QUploader.styl     | 28 +++++++--
 ui/src/components/uploader/QUploaderBase.js   |  2 +-
 ui/src/css/core/colors.sass                   | 32 ++++++++++
 ui/src/css/core/colors.styl                   | 32 ++++++++++
 ui/src/css/core/dark.sass                     | 30 ++++++++-
 ui/src/css/core/dark.styl                     | 30 ++++++++-
 ui/src/css/variables.sass                     | 13 ++++
 ui/src/css/variables.styl                     | 23 +++++--
 ui/src/mixins/checkbox.js                     |  2 +-
 ui/src/mixins/dark.js                         | 12 ++--
 ui/src/plugins/Dark.js                        | 13 ++--
 ui/src/plugins/Dark.json                      |  2 +-
 ui/src/plugins/Loading.sass                   |  3 +-
 ui/src/plugins/Loading.styl                   |  3 +-
 ui/src/plugins/Notify.sass                    |  9 ++-
 ui/src/plugins/Notify.styl                    |  9 ++-
 123 files changed, 1014 insertions(+), 253 deletions(-)

diff --git a/ui/dev/src/pages/components/virtual-scroll-2.vue b/ui/dev/src/pages/components/virtual-scroll-2.vue
index f608e390874b..a1dea4fa4e9c 100644
--- a/ui/dev/src/pages/components/virtual-scroll-2.vue
+++ b/ui/dev/src/pages/components/virtual-scroll-2.vue
@@ -1,7 +1,7 @@
 <template>
   <q-layout view="lHh LpR fFf">
     <q-page-container>
-      <q-page padding class="bg-white">
+      <q-page padding>
         <div class="text-h6 q-my-lg q-pa-lg bg-grey-10 text-white" style="height: 500px">
           Before list
         </div>
@@ -26,7 +26,7 @@
               </template>
               {{ item.label }} #{{ index }}
             </q-banner>
-            <div v-else class="bg-yellow q-py-lg text-center scroll" :key="index" style="max-height: 100px">
+            <div v-else class="bg-yellow text-black q-py-lg text-center scroll" :key="index" style="max-height: 100px">
               {{ item.label }} #{{ index }}
             </div>
           </template>
diff --git a/ui/dev/src/pages/components/virtual-scroll-3.vue b/ui/dev/src/pages/components/virtual-scroll-3.vue
index bd9d110e00d8..a71bd508fd66 100644
--- a/ui/dev/src/pages/components/virtual-scroll-3.vue
+++ b/ui/dev/src/pages/components/virtual-scroll-3.vue
@@ -7,7 +7,7 @@
         </div>
 
         <q-virtual-scroll
-          class="bg-white col"
+          class="col"
           component="q-list"
           :items-size="size"
           :items-fn="getItems"
diff --git a/ui/dev/src/pages/components/virtual-scroll-4.vue b/ui/dev/src/pages/components/virtual-scroll-4.vue
index 4aeb47f5a0c2..f2fca446babd 100644
--- a/ui/dev/src/pages/components/virtual-scroll-4.vue
+++ b/ui/dev/src/pages/components/virtual-scroll-4.vue
@@ -1,7 +1,7 @@
 <template>
   <q-layout view="lHh LpR fFf">
     <q-page-container>
-      <q-page padding class="bg-white q-pr-xl">
+      <q-page padding class="q-pr-xl">
         <div class="bg-grey-2" style="height: 60vh">
           Spacer
         </div>
@@ -32,7 +32,7 @@
                 </template>
                 {{ item.label }} #{{ index }}
               </q-banner>
-              <div v-else class="bg-yellow q-py-lg text-center scroll" :key="index" style="max-height: 100px">
+              <div v-else class="bg-yellow text-black q-py-lg text-center scroll" :key="index" style="max-height: 100px">
                 {{ item.label }} #{{ index }}
               </div>
             </template>
@@ -69,7 +69,7 @@
                 :key="index"
                 dense
                 :class="{
-                  'bg-black text-white': index === virtualListIndex2,
+                  'bg-grey-8 text-white': index === virtualListIndex2,
                   'q-py-xl': index % 4 === 0
                 }"
                 :style="index === 99999 ? 'height: 800px' : void 0"
diff --git a/ui/dev/src/pages/components/virtual-scroll-5.vue b/ui/dev/src/pages/components/virtual-scroll-5.vue
index 7dd3434cd576..4c708c6f5dce 100644
--- a/ui/dev/src/pages/components/virtual-scroll-5.vue
+++ b/ui/dev/src/pages/components/virtual-scroll-5.vue
@@ -1,7 +1,7 @@
 <template>
   <q-layout view="lHh LpR fFf">
     <q-page-container>
-      <q-page padding class="bg-white q-pr-xl">
+      <q-page padding class="q-pr-xl">
         <q-virtual-scroll
           ref="virtualListRef"
           type="table"
diff --git a/ui/dev/src/pages/components/virtual-scroll-6.vue b/ui/dev/src/pages/components/virtual-scroll-6.vue
index f5712c81ddfb..857579e5dafd 100644
--- a/ui/dev/src/pages/components/virtual-scroll-6.vue
+++ b/ui/dev/src/pages/components/virtual-scroll-6.vue
@@ -1,7 +1,7 @@
 <template>
   <q-layout view="lHh LpR fFf">
     <q-page-container>
-      <q-page padding class="bg-white q-pr-xl">
+      <q-page padding class="q-pr-xl">
         <q-virtual-scroll
           ref="virtualListRef"
           type="table"
diff --git a/ui/src/components/badge/QBadge.sass b/ui/src/components/badge/QBadge.sass
index ec53634e4484..4388b84bb108 100644
--- a/ui/src/components/badge/QBadge.sass
+++ b/ui/src/components/badge/QBadge.sass
@@ -1,7 +1,8 @@
 .q-badge
   background-color: $primary
   background-color: var(--q-color-primary)
-  color: #fff
+  color: $dark-text
+  color: var(--q-color-dark-text)
   padding: 2px 6px
   border-radius: $generic-border-radius
   font-size: 12px
diff --git a/ui/src/components/badge/QBadge.styl b/ui/src/components/badge/QBadge.styl
index 1478f6aa1576..4388b84bb108 100644
--- a/ui/src/components/badge/QBadge.styl
+++ b/ui/src/components/badge/QBadge.styl
@@ -1,12 +1,13 @@
 .q-badge
   background-color: $primary
   background-color: var(--q-color-primary)
-  color: #fff
+  color: $dark-text
+  color: var(--q-color-dark-text)
   padding: 2px 6px
   border-radius: $generic-border-radius
   font-size: 12px
-  min-height: 12px
   line-height: 12px
+  min-height: 12px
   font-weight: normal
   vertical-align: baseline
 
diff --git a/ui/src/components/banner/QBanner.js b/ui/src/components/banner/QBanner.js
index 3f0b8066d023..2145a7772fe8 100644
--- a/ui/src/components/banner/QBanner.js
+++ b/ui/src/components/banner/QBanner.js
@@ -42,7 +42,7 @@ export default Vue.extend({
       class: {
         'q-banner--top-padding': actions !== void 0 && !this.inlineActions,
         'q-banner--dense': this.dense,
-        'q-banner--dark q-dark': this.isDark,
+        [`q-banner--${this.darkSuffix} q-${this.darkSuffix}`]: true,
         'rounded-borders': this.rounded
       },
       attrs,
diff --git a/ui/src/components/banner/QBanner.sass b/ui/src/components/banner/QBanner.sass
index 3c9c2be66708..447129240a2a 100644
--- a/ui/src/components/banner/QBanner.sass
+++ b/ui/src/components/banner/QBanner.sass
@@ -1,7 +1,6 @@
 .q-banner
   min-height: 54px
   padding: 8px 16px
-  background: #fff
 
   &--top-padding
     padding-top: 14px
diff --git a/ui/src/components/banner/QBanner.styl b/ui/src/components/banner/QBanner.styl
index 3c9c2be66708..447129240a2a 100644
--- a/ui/src/components/banner/QBanner.styl
+++ b/ui/src/components/banner/QBanner.styl
@@ -1,7 +1,6 @@
 .q-banner
   min-height: 54px
   padding: 8px 16px
-  background: #fff
 
   &--top-padding
     padding-top: 14px
diff --git a/ui/src/components/bar/QBar.js b/ui/src/components/bar/QBar.js
index 475649ad8616..9cd28ce04e53 100644
--- a/ui/src/components/bar/QBar.js
+++ b/ui/src/components/bar/QBar.js
@@ -18,8 +18,8 @@ export default Vue.extend({
 
   computed: {
     classes () {
-      return `q-bar--${this.dense === true ? 'dense' : 'standard'} ` +
-        `q-bar--${this.isDark === true ? 'dark' : 'light'}`
+      return `q-bar--${this.dense === true ? 'dense' : 'standard'}` +
+        ` q-bar--${this.darkSuffix}`
     }
   },
 
diff --git a/ui/src/components/bar/QBar.sass b/ui/src/components/bar/QBar.sass
index 06641d29c6d1..5a01a6672d78 100644
--- a/ui/src/components/bar/QBar.sass
+++ b/ui/src/components/bar/QBar.sass
@@ -29,3 +29,7 @@
 
   &--dark
     background: rgba(255,255,255,.15)
+
+@media (prefers-color-scheme: dark)
+  .q-bar--dark-auto
+    background: rgba(255,255,255,.15)
diff --git a/ui/src/components/bar/QBar.styl b/ui/src/components/bar/QBar.styl
index 06641d29c6d1..5a01a6672d78 100644
--- a/ui/src/components/bar/QBar.styl
+++ b/ui/src/components/bar/QBar.styl
@@ -29,3 +29,7 @@
 
   &--dark
     background: rgba(255,255,255,.15)
+
+@media (prefers-color-scheme: dark)
+  .q-bar--dark-auto
+    background: rgba(255,255,255,.15)
diff --git a/ui/src/components/card/QCard.js b/ui/src/components/card/QCard.js
index 8f413a0539ac..153f33e39ce7 100644
--- a/ui/src/components/card/QCard.js
+++ b/ui/src/components/card/QCard.js
@@ -20,7 +20,7 @@ export default Vue.extend({
   computed: {
     classes () {
       return 'q-card' +
-        (this.isDark === true ? ' q-card--dark q-dark' : '') +
+        ` q-card--${this.darkSuffix} q-${this.darkSuffix}` +
         (this.bordered === true ? ' q-card--bordered' : '') +
         (this.square === true ? ' q-card--square no-border-radius' : '') +
         (this.flat === true ? ' q-card--flat no-shadow' : '')
diff --git a/ui/src/components/card/QCard.sass b/ui/src/components/card/QCard.sass
index e4111cc8b0dd..0f675a7ba069 100644
--- a/ui/src/components/card/QCard.sass
+++ b/ui/src/components/card/QCard.sass
@@ -2,7 +2,6 @@
   box-shadow: $shadow-2
   border-radius: $generic-border-radius
   vertical-align: top
-  background: #fff
   position: relative
 
   > div,
@@ -94,3 +93,7 @@
     width: 100%
     max-width: 100%
     border: 0
+
+@media (prefers-color-scheme: dark)
+  .q-card--dark-auto
+    border-color: $separator-dark-color
diff --git a/ui/src/components/card/QCard.styl b/ui/src/components/card/QCard.styl
index e4111cc8b0dd..0f675a7ba069 100644
--- a/ui/src/components/card/QCard.styl
+++ b/ui/src/components/card/QCard.styl
@@ -2,7 +2,6 @@
   box-shadow: $shadow-2
   border-radius: $generic-border-radius
   vertical-align: top
-  background: #fff
   position: relative
 
   > div,
@@ -94,3 +93,7 @@
     width: 100%
     max-width: 100%
     border: 0
+
+@media (prefers-color-scheme: dark)
+  .q-card--dark-auto
+    border-color: $separator-dark-color
diff --git a/ui/src/components/carousel/QCarousel.js b/ui/src/components/carousel/QCarousel.js
index cf81c0ffb16a..e4a889bebfd6 100644
--- a/ui/src/components/carousel/QCarousel.js
+++ b/ui/src/components/carousel/QCarousel.js
@@ -60,7 +60,7 @@ export default Vue.extend({
     classes () {
       return `q-carousel q-panel-parent q-carousel--with${this.padding === true ? '' : 'out'}-padding` +
         (this.inFullscreen === true ? ' fullscreen' : '') +
-        (this.isDark === true ? ' q-carousel--dark q-dark' : '') +
+        ` q-carousel--${this.darkSuffix} q-${this.darkSuffix}` +
         (this.arrows === true ? ` q-carousel--arrows-${this.direction}` : '') +
         (this.navigation === true ? ` q-carousel--navigation-${this.navigationPositionComputed}` : '')
     },
diff --git a/ui/src/components/carousel/QCarousel.sass b/ui/src/components/carousel/QCarousel.sass
index bb631f5bc5f1..a6683e49849c 100644
--- a/ui/src/components/carousel/QCarousel.sass
+++ b/ui/src/components/carousel/QCarousel.sass
@@ -1,5 +1,4 @@
 .q-carousel
-  background-color: #fff // needed for fullscreen
   height: 400px
 
   &__slide
@@ -14,7 +13,8 @@
     height: 100%
 
   &__control
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
 
   &__arrow
     pointer-events: none
diff --git a/ui/src/components/carousel/QCarousel.styl b/ui/src/components/carousel/QCarousel.styl
index bb631f5bc5f1..a6683e49849c 100644
--- a/ui/src/components/carousel/QCarousel.styl
+++ b/ui/src/components/carousel/QCarousel.styl
@@ -1,5 +1,4 @@
 .q-carousel
-  background-color: #fff // needed for fullscreen
   height: 400px
 
   &__slide
@@ -14,7 +13,8 @@
     height: 100%
 
   &__control
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
 
   &__arrow
     pointer-events: none
diff --git a/ui/src/components/checkbox/QCheckbox.sass b/ui/src/components/checkbox/QCheckbox.sass
index 079d2d376c9c..c7fae7dec51e 100644
--- a/ui/src/components/checkbox/QCheckbox.sass
+++ b/ui/src/components/checkbox/QCheckbox.sass
@@ -26,7 +26,8 @@ $checkbox-transition: .22s cubic-bezier(0,0,.2,1) 0ms
     font-size: .5em
 
   &__svg
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
 
   &__truthy
     stroke: currentColor
@@ -122,3 +123,13 @@ body.desktop
     &:hover
       .q-checkbox__inner:before
         transform: scale3d(1.4, 1.4, 1)
+
+@media (prefers-color-scheme: dark)
+  .q-checkbox--dark-auto
+    .q-checkbox__inner
+      color: rgba(255,255,255,.7)
+      &:before
+        opacity: .32 !important
+      &--truthy, &--indet
+        color: $primary
+        color: var(--q-color-primary)
diff --git a/ui/src/components/checkbox/QCheckbox.styl b/ui/src/components/checkbox/QCheckbox.styl
index 76bc87d77f01..34d1c1e81813 100644
--- a/ui/src/components/checkbox/QCheckbox.styl
+++ b/ui/src/components/checkbox/QCheckbox.styl
@@ -26,7 +26,8 @@ $checkbox-transition = .22s cubic-bezier(0,0,.2,1) 0ms
     font-size: .5em
 
   &__svg
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
 
   &__truthy
     stroke: currentColor
@@ -122,3 +123,13 @@ body.desktop
     &:hover
       .q-checkbox__inner:before
         transform: scale3d(1.4, 1.4, 1)
+
+@media (prefers-color-scheme: dark)
+  .q-checkbox--dark-auto
+    .q-checkbox__inner
+      color: rgba(255,255,255,.7)
+      &:before
+        opacity: .32 !important
+      &--truthy, &--indet
+        color: $primary
+        color: var(--q-color-primary)
diff --git a/ui/src/components/chip/QChip.js b/ui/src/components/chip/QChip.js
index 71da2b5960fe..b90809e4adb2 100644
--- a/ui/src/components/chip/QChip.js
+++ b/ui/src/components/chip/QChip.js
@@ -76,10 +76,18 @@ export default Vue.extend({
         'q-chip--selected': this.selected,
         'q-chip--clickable cursor-pointer non-selectable q-hoverable': this.isClickable,
         'q-chip--square': this.square,
-        'q-chip--dark q-dark': this.isDark
+        [`q-chip--${this.localDarkSuffix}`]: true
       }
     },
 
+    localDarkSuffix () {
+      if (typeof this.color === 'string' && this.color.trim().length > 0) {
+        return this.dark === true ? 'dark' : 'light'
+      }
+
+      return this.darkSuffix
+    },
+
     hasLeftIcon () {
       return this.selected === true || this.icon !== void 0
     },
diff --git a/ui/src/components/chip/QChip.sass b/ui/src/components/chip/QChip.sass
index 59b546057eab..e6565a7a0b0f 100644
--- a/ui/src/components/chip/QChip.sass
+++ b/ui/src/components/chip/QChip.sass
@@ -10,13 +10,22 @@ $chip-height: 2em
   max-width: 100%
   margin: 4px
 
-  background: #e0e0e0
-  color: rgba(0,0,0,.87)
+  background: $chip-background-light
+  background: var(--q-color-chip-background-light)
+  color: $light-text
+  color: var(--q-color-light-text)
 
   font-size: 14px
   padding: .5em .9em
 
-  &--colored, &--dark
+  &--dark
+    background: $chip-background-dark
+    background: var(--q-color-chip-background-dark)
+    color: $dark-text
+    color: var(--q-color-dark-text)
+
+  &--colored,
+  &--dark
     .q-chip__icon
       color: inherit
 
@@ -100,3 +109,13 @@ $chip-height: 2em
 
 body.desktop .q-chip--clickable:focus
   box-shadow: $shadow-1
+
+@media (prefers-color-scheme: dark)
+  .q-chip--dark-auto
+    background: $chip-background-dark
+    background: var(--q-color-chip-background-dark)
+    color: $dark-text
+    color: var(--q-color-dark-text)
+
+    .q-chip__icon
+      color: inherit
diff --git a/ui/src/components/chip/QChip.styl b/ui/src/components/chip/QChip.styl
index 6ccd6f2167a2..b680c8232778 100644
--- a/ui/src/components/chip/QChip.styl
+++ b/ui/src/components/chip/QChip.styl
@@ -10,13 +10,22 @@ $chip-height = 2em
   max-width: 100%
   margin: 4px
 
-  background: #e0e0e0
-  color: rgba(0,0,0,.87)
+  background: $chip-background-light
+  background: var(--q-color-chip-background-light)
+  color: $light-text
+  color: var(--q-color-light-text)
 
   font-size: 14px
   padding: .5em .9em
 
-  &--colored, &--dark
+  &--dark
+    background: $chip-background-dark
+    background: var(--q-color-chip-background-dark)
+    color: $dark-text
+    color: var(--q-color-dark-text)
+
+  &--colored,
+  &--dark
     .q-chip__icon
       color: inherit
 
@@ -100,3 +109,13 @@ $chip-height = 2em
 
 body.desktop .q-chip--clickable:focus
   box-shadow: $shadow-1
+
+@media (prefers-color-scheme: dark)
+  .q-chip--dark-auto
+    background: $chip-background-dark
+    background: var(--q-color-chip-background-dark)
+    color: $dark-text
+    color: var(--q-color-dark-text)
+
+    .q-chip__icon
+      color: inherit
diff --git a/ui/src/components/color/QColor.js b/ui/src/components/color/QColor.js
index 478012a32fa9..7c5b7c01928b 100644
--- a/ui/src/components/color/QColor.js
+++ b/ui/src/components/color/QColor.js
@@ -191,7 +191,7 @@ export default Vue.extend({
         (this.square === true ? ' q-color-picker--square no-border-radius' : '') +
         (this.flat === true ? ' q-color-picker--flat no-shadow' : '') +
         (this.disable === true ? ' disabled' : '') +
-        (this.isDark === true ? ' q-color-picker--dark q-dark' : '')
+        ` q-color-picker--${this.darkSuffix} q-${this.darkSuffix}`
     },
 
     attrs () {
@@ -472,7 +472,7 @@ export default Vue.extend({
               min: 0,
               max: 255,
               color: 'red',
-              dark: this.isDark,
+              dark: this.dark,
               readonly: this.editable !== true
             },
             on: cache(this, 'rSlide', {
@@ -499,7 +499,7 @@ export default Vue.extend({
               min: 0,
               max: 255,
               color: 'green',
-              dark: this.isDark,
+              dark: this.dark,
               readonly: this.editable !== true
             },
             on: cache(this, 'gSlide', {
@@ -527,7 +527,7 @@ export default Vue.extend({
               max: 255,
               color: 'blue',
               readonly: this.editable !== true,
-              dark: this.isDark
+              dark: this.dark
             },
             on: cache(this, 'bSlide', {
               input: value => this.__onNumericChange(value, 'b', 255),
@@ -552,7 +552,7 @@ export default Vue.extend({
               value: this.model.a,
               color: 'grey',
               readonly: this.editable !== true,
-              dark: this.isDark
+              dark: this.dark
             },
             on: cache(this, 'aSlide', {
               input: value => this.__onNumericChange(value, 'a', 100),
diff --git a/ui/src/components/color/QColor.sass b/ui/src/components/color/QColor.sass
index bba1b12c5097..b8942b860b04 100644
--- a/ui/src/components/color/QColor.sass
+++ b/ui/src/components/color/QColor.sass
@@ -1,6 +1,5 @@
 .q-color-picker
   overflow: hidden
-  background: #fff
   max-width: 350px
   vertical-align: top
 
@@ -42,13 +41,17 @@
 
   &__header-content
     position: relative
-    background: #fff
+    background: $light-page
+    background: var(--q-color-light-page)
 
     &--light
-      color: #000
+      color: $light-text
+      color: var(--q-color-light-text)
 
     &--dark
-      color: #fff
+      color: $dark-text
+      color: var(--q-color-dark-text)
+
       .q-tab--inactive
         &:before
           content: ''
@@ -62,7 +65,8 @@
   &__header-banner
     height: 36px
   &__header-bg
-    background: #fff
+    background: $light-page
+    background: var(--q-color-light-page)
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==') !important
 
   &__footer
@@ -172,7 +176,15 @@
 
   &--dark
     .q-color-picker__tune-tab input
-      border: 1px solid rgba(#fff, .3)
+      border: 1px solid rgba($dark-text, .3)
+
+    .q-slider
+      color: $grey-1
+
+@media (prefers-color-scheme: dark)
+  .q-color-picker--dark-auto
+    .q-color-picker__tune-tab input
+      border: 1px solid rgba($dark-text, .3)
 
     .q-slider
       color: $grey-1
diff --git a/ui/src/components/color/QColor.styl b/ui/src/components/color/QColor.styl
index d6b9686544a9..ae158fe59f51 100644
--- a/ui/src/components/color/QColor.styl
+++ b/ui/src/components/color/QColor.styl
@@ -1,6 +1,5 @@
 .q-color-picker
   overflow: hidden
-  background: #fff
   max-width: 350px
   vertical-align: top
 
@@ -42,13 +41,17 @@
 
   &__header-content
     position: relative
-    background: #fff
+    background: $light-page
+    background: var(--q-color-light-page)
 
     &--light
-      color: #000
+      color: $light-text
+      color: var(--q-color-light-text)
 
     &--dark
-      color: #fff
+      color: $dark-text
+      color: var(--q-color-dark-text)
+
       .q-tab--inactive
         &:before
           content: ''
@@ -62,7 +65,8 @@
   &__header-banner
     height: 36px
   &__header-bg
-    background: #fff
+    background: $light-page
+    background: var(--q-color-light-page)
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==') !important
 
   &__footer
@@ -172,7 +176,15 @@
 
   &--dark
     .q-color-picker__tune-tab input
-      border: 1px solid alpha(#fff, .3)
+      border: 1px solid alpha($dark-text, .3)
+
+    .q-slider
+      color: $grey-1
+
+@media (prefers-color-scheme: dark)
+  .q-color-picker--dark-auto
+    .q-color-picker__tune-tab input
+      border: 1px solid alpha($dark-text, .3)
 
     .q-slider
       color: $grey-1
diff --git a/ui/src/components/date/QDate.js b/ui/src/components/date/QDate.js
index 4432c22dfd4f..d6f956724ced 100644
--- a/ui/src/components/date/QDate.js
+++ b/ui/src/components/date/QDate.js
@@ -130,7 +130,7 @@ export default Vue.extend({
     classes () {
       const type = this.landscape === true ? 'landscape' : 'portrait'
       return `q-date q-date--${type} q-date--${type}-${this.minimal === true ? 'minimal' : 'standard'}` +
-        (this.isDark === true ? ' q-date--dark q-dark' : '') +
+        ` q-date--${this.darkSuffix} q-${this.darkSuffix}` +
         (this.bordered === true ? ' q-date--bordered' : '') +
         (this.square === true ? ' q-date--square no-border-radius' : '') +
         (this.flat === true ? ' q-date--flat no-shadow' : '') +
diff --git a/ui/src/components/date/QDate.sass b/ui/src/components/date/QDate.sass
index 2f348f3d39cf..1df2db961964 100644
--- a/ui/src/components/date/QDate.sass
+++ b/ui/src/components/date/QDate.sass
@@ -2,7 +2,8 @@
   display: inline-flex
   box-shadow: $shadow-2
   border-radius: $generic-border-radius
-  background: #fff
+  background: $light-page
+  background: var(--q-color-light-page)
   width: 290px
   min-width: 290px
   max-width: 100%
@@ -12,7 +13,8 @@
 
   &__header
     border-top-left-radius: inherit
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
     background-color: $primary
     background-color: var(--q-color-primary)
     padding: 16px
@@ -251,3 +253,7 @@
 
   &--dark
     border-color: $separator-dark-color
+
+@media (prefers-color-scheme: dark)
+  .q-date--dark-auto
+    border-color: $separator-dark-color
diff --git a/ui/src/components/date/QDate.styl b/ui/src/components/date/QDate.styl
index 2f348f3d39cf..1df2db961964 100644
--- a/ui/src/components/date/QDate.styl
+++ b/ui/src/components/date/QDate.styl
@@ -2,7 +2,8 @@
   display: inline-flex
   box-shadow: $shadow-2
   border-radius: $generic-border-radius
-  background: #fff
+  background: $light-page
+  background: var(--q-color-light-page)
   width: 290px
   min-width: 290px
   max-width: 100%
@@ -12,7 +13,8 @@
 
   &__header
     border-top-left-radius: inherit
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
     background-color: $primary
     background-color: var(--q-color-primary)
     padding: 16px
@@ -251,3 +253,7 @@
 
   &--dark
     border-color: $separator-dark-color
+
+@media (prefers-color-scheme: dark)
+  .q-date--dark-auto
+    border-color: $separator-dark-color
diff --git a/ui/src/components/dialog-bottom-sheet/BottomSheet.js b/ui/src/components/dialog-bottom-sheet/BottomSheet.js
index 600f1b7db0a2..e1e3dfe3c40b 100644
--- a/ui/src/components/dialog-bottom-sheet/BottomSheet.js
+++ b/ui/src/components/dialog-bottom-sheet/BottomSheet.js
@@ -71,7 +71,7 @@ export default Vue.extend({
         return action.label === void 0
           ? h(QSeparator, {
             staticClass: 'col-all',
-            props: { dark: this.isDark }
+            props: { dark: this.dark }
           })
           : h('div', {
             staticClass: 'q-bottom-sheet__item q-hoverable q-focusable cursor-pointer relative-position',
@@ -109,14 +109,14 @@ export default Vue.extend({
         const img = action.avatar || action.img
 
         return action.label === void 0
-          ? h(QSeparator, { props: { spaced: true, dark: this.isDark } })
+          ? h(QSeparator, { props: { spaced: true, dark: this.dark } })
           : h(QItem, {
             staticClass: 'q-bottom-sheet__item',
             class: action.classes,
             props: {
               tabindex: 0,
               clickable: true,
-              dark: this.isDark
+              dark: this.dark
             },
             on: {
               click: () => {
@@ -174,7 +174,7 @@ export default Vue.extend({
     }, [
       h(QCard, {
         staticClass: `q-bottom-sheet q-bottom-sheet--${this.grid === true ? 'grid' : 'list'}` +
-          (this.isDark === true ? ' q-bottom-sheet--dark q-dark' : ''),
+          ` q-bottom-sheet--${this.darkSuffix} q-${this.darkSuffix}`,
         style: this.cardStyle,
         class: this.cardClass
       }, child)
diff --git a/ui/src/components/dialog-plugin/DialogPlugin.js b/ui/src/components/dialog-plugin/DialogPlugin.js
index 9f2289fca07c..32cac0b66a45 100644
--- a/ui/src/components/dialog-plugin/DialogPlugin.js
+++ b/ui/src/components/dialog-plugin/DialogPlugin.js
@@ -59,7 +59,7 @@ export default Vue.extend({
   computed: {
     classes () {
       return 'q-dialog-plugin' +
-        (this.isDark === true ? ' q-dialog-plugin--dark q-dark' : '') +
+        ` q-dialog-plugin--${this.darkSuffix} q-${this.darkSuffix}` +
         (this.progress !== false ? ' q-dialog-plugin--progress' : '')
     },
 
@@ -102,7 +102,7 @@ export default Vue.extend({
     },
 
     vmColor () {
-      return this.color || (this.isDark === true ? 'amber' : 'primary')
+      return this.color || `dialog-plugin-${this.darkSuffix}`
     },
 
     okDisabled () {
@@ -169,7 +169,7 @@ export default Vue.extend({
             color: this.vmColor,
             dense: true,
             autofocus: true,
-            dark: this.isDark
+            dark: this.dark
           },
           attrs: this.prompt.attrs,
           on: cache(this, 'prompt', {
@@ -198,7 +198,7 @@ export default Vue.extend({
             color: this.vmColor,
             inline: this.options.inline,
             options: this.options.items,
-            dark: this.isDark
+            dark: this.dark
           },
           on: cache(this, 'opts', {
             input: v => { this.options.model = v }
@@ -288,13 +288,13 @@ export default Vue.extend({
     }
     else if (this.options !== void 0) {
       child.push(
-        h(QSeparator, { props: { dark: this.isDark } }),
+        h(QSeparator, { props: { dark: this.dark } }),
         h(
           QCardSection,
           { staticClass: 'scroll q-dialog-plugin__form' },
           this.getOptions(h)
         ),
-        h(QSeparator, { props: { dark: this.isDark } })
+        h(QSeparator, { props: { dark: this.dark } })
       )
     }
 
@@ -320,7 +320,7 @@ export default Vue.extend({
         staticClass: this.classes,
         style: this.cardStyle,
         class: this.cardClass,
-        props: { dark: this.isDark }
+        props: { dark: this.dark }
       }, child)
     ])
   }
diff --git a/ui/src/components/drawer/QDrawer.js b/ui/src/components/drawer/QDrawer.js
index 196aba90bb08..75a1d1e6db39 100644
--- a/ui/src/components/drawer/QDrawer.js
+++ b/ui/src/components/drawer/QDrawer.js
@@ -275,7 +275,7 @@ export default Vue.extend({
     classes () {
       return `q-drawer--${this.side}` +
         (this.bordered === true ? ' q-drawer--bordered' : '') +
-        (this.isDark === true ? ' q-drawer--dark q-dark' : '') +
+        ` q-drawer--${this.darkSuffix} q-${this.darkSuffix}` +
         (this.showing !== true ? ' q-layout--prevent-focus' : '') +
         (
           this.belowBreakpoint === true
diff --git a/ui/src/components/editor/QEditor.js b/ui/src/components/editor/QEditor.js
index cfed8ee704f8..c059f62d7abe 100644
--- a/ui/src/components/editor/QEditor.js
+++ b/ui/src/components/editor/QEditor.js
@@ -253,7 +253,7 @@ export default Vue.extend({
         (this.square === true ? ' q-editor--square no-border-radius' : '') +
         (this.flat === true ? ' q-editor--flat' : '') +
         (this.dense === true ? ' q-editor--dense' : '') +
-        (this.isDark === true ? ' q-editor--dark q-dark' : '')
+        ` q-editor--${this.darkSuffix} q-${this.darkSuffix}`
     },
 
     innerClass () {
diff --git a/ui/src/components/editor/QEditor.sass b/ui/src/components/editor/QEditor.sass
index eef9aa6dda83..69b6f0587c8d 100644
--- a/ui/src/components/editor/QEditor.sass
+++ b/ui/src/components/editor/QEditor.sass
@@ -1,7 +1,6 @@
 .q-editor
   border: 1px solid $editor-border-color
   border-radius: $generic-border-radius
-  background-color: #fff
 
   &.disabled
     border-style: dashed
@@ -84,7 +83,20 @@
     border-color: $editor-border-dark-color
 
     .q-editor
+      &__content hr
+        background: $editor-hr-dark-color
+
+      &__toolbar
+        border-color: $editor-border-dark-color
 
+    .q-editor__toolbar-group + .q-editor__toolbar-group:before
+      background: $editor-border-dark-color
+
+@media (prefers-color-scheme: dark)
+  .q-editor--dark-auto
+    border-color: $editor-border-dark-color
+
+    .q-editor
       &__content hr
         background: $editor-hr-dark-color
 
diff --git a/ui/src/components/editor/QEditor.styl b/ui/src/components/editor/QEditor.styl
index eef9aa6dda83..69b6f0587c8d 100644
--- a/ui/src/components/editor/QEditor.styl
+++ b/ui/src/components/editor/QEditor.styl
@@ -1,7 +1,6 @@
 .q-editor
   border: 1px solid $editor-border-color
   border-radius: $generic-border-radius
-  background-color: #fff
 
   &.disabled
     border-style: dashed
@@ -84,7 +83,20 @@
     border-color: $editor-border-dark-color
 
     .q-editor
+      &__content hr
+        background: $editor-hr-dark-color
+
+      &__toolbar
+        border-color: $editor-border-dark-color
 
+    .q-editor__toolbar-group + .q-editor__toolbar-group:before
+      background: $editor-border-dark-color
+
+@media (prefers-color-scheme: dark)
+  .q-editor--dark-auto
+    border-color: $editor-border-dark-color
+
+    .q-editor
       &__content hr
         background: $editor-hr-dark-color
 
diff --git a/ui/src/components/expansion-item/QExpansionItem.js b/ui/src/components/expansion-item/QExpansionItem.js
index 762e60cd3092..15912f33b23b 100644
--- a/ui/src/components/expansion-item/QExpansionItem.js
+++ b/ui/src/components/expansion-item/QExpansionItem.js
@@ -259,7 +259,7 @@ export default Vue.extend({
         style: this.headerStyle,
         class: this.headerClass,
         props: {
-          dark: this.isDark,
+          dark: this.dark,
           disable: this.disable,
           dense: this.dense,
           insetLevel: this.headerInsetLevel
@@ -309,11 +309,11 @@ export default Vue.extend({
         node.push(
           h(QSeparator, {
             staticClass: 'q-expansion-item__border q-expansion-item__border--top absolute-top',
-            props: { dark: this.isDark }
+            props: { dark: this.dark }
           }),
           h(QSeparator, {
             staticClass: 'q-expansion-item__border q-expansion-item__border--bottom absolute-bottom',
-            props: { dark: this.isDark }
+            props: { dark: this.dark }
           })
         )
       }
diff --git a/ui/src/components/field/QField.js b/ui/src/components/field/QField.js
index d8b487780eaf..99b55352c715 100644
--- a/ui/src/components/field/QField.js
+++ b/ui/src/components/field/QField.js
@@ -153,7 +153,7 @@ export default Vue.extend({
 
         'q-field--dense': this.dense,
         'q-field--item-aligned q-item-type': this.itemAligned,
-        'q-field--dark': this.isDark,
+        [`q-field--${this.darkSuffix}`]: true,
 
         'q-field--auto-height': this.__getControl === void 0,
 
diff --git a/ui/src/components/field/QField.sass b/ui/src/components/field/QField.sass
index 8c622abffc26..0a2f5f1af3a7 100644
--- a/ui/src/components/field/QField.sass
+++ b/ui/src/components/field/QField.sass
@@ -263,7 +263,8 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
         border: 1px solid rgba(0,0,0,.24)
         transition: border-color $field-transition
       &:hover:before
-        border-color: #000
+        border-color: $light-text
+        border-color: var(--q-color-light-text)
 
       &:after
         height: inherit
@@ -301,7 +302,8 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
         transition: border-color $field-transition
 
       &:hover:before
-        border-color: #000
+        border-color: $light-text
+        border-color: var(--q-color-light-text)
 
       &:after
         height: 2px
@@ -327,10 +329,12 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
       border-color: rgba(255,255,255,.6)
 
     .q-field__control:hover:before
-      border-color: #fff
+      border-color: $dark-text
+      border-color: var(--q-color-dark-text)
 
     .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__input
-      color: #fff
+      color: $dark-text
+      color: var(--q-color-dark-text)
 
     &:not(.q-field--highlighted) .q-field__label, .q-field__marginal, .q-field__bottom
       color: rgba(255,255,255,.7)
@@ -357,9 +361,11 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
     &.q-field--highlighted
       .q-field__control
         box-shadow: $shadow-2
-        background: #000
+        background: $dark-page
+        background: var(--q-color-dark-page)
       .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
-        color: #fff
+        color: $dark-text
+        color: var(--q-color-dark-text)
 
     &.q-field--readonly
       .q-field__control:before
@@ -374,9 +380,11 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
           background: rgba(255,255,255,.07)
       &.q-field--highlighted
         .q-field__control
-          background: #fff
+          background: $light-page
+          background: var(--q-color-light-page)
         .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
-          color: #000
+          color: $light-text
+          color: var(--q-color-light-text)
       &.q-field--readonly
         .q-field__control:before
           border-color: rgba(255,255,255,.24)
@@ -524,6 +532,44 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
   &-leave, &-leave-active
     position: absolute
 
+@media (prefers-color-scheme: dark)
+  .q-field--dark-auto
+    &.q-field--filled
+      .q-field__control, .q-field__control:before
+        background: rgba(255,255,255,.07)
+      &.q-field--highlighted .q-field__control:before
+        background: rgba(255,255,255,.1)
+
+    .q-field__control:before
+      border-color: rgba(255,255,255,.6)
+
+    .q-field__control:hover:before
+      border-color: $dark-text
+      border-color: var(--q-color-dark-text)
+
+    .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__input
+      color: $dark-text
+      color: var(--q-color-dark-text)
+
+    &:not(.q-field--highlighted) .q-field__label, .q-field__marginal, .q-field__bottom
+      color: rgba(255,255,255,.7)
+
+    &.q-field--standout
+      .q-field__control
+        background: rgba(255,255,255,.07)
+        &:before
+          background: rgba(255,255,255,.07)
+      &.q-field--highlighted
+        .q-field__control
+          background: $light-page
+          background: var(--q-color-light-page)
+        .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
+          color: $light-text
+          color: var(--q-color-light-text)
+      &.q-field--readonly
+        .q-field__control:before
+          border-color: rgba(255,255,255,.24)
+
 @keyframes q-field-label
   40%
     margin-left: 2px
diff --git a/ui/src/components/field/QField.styl b/ui/src/components/field/QField.styl
index 642dc6f4bbf4..1c833821c5df 100644
--- a/ui/src/components/field/QField.styl
+++ b/ui/src/components/field/QField.styl
@@ -263,7 +263,8 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
         border: 1px solid rgba(0,0,0,.24)
         transition: border-color $field-transition
       &:hover:before
-        border-color: #000
+        border-color: $light-text
+        border-color: var(--q-color-light-text)
 
       &:after
         height: inherit
@@ -301,7 +302,8 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
         transition: border-color $field-transition
 
       &:hover:before
-        border-color: #000
+        border-color: $light-text
+        border-color: var(--q-color-light-text)
 
       &:after
         height: 2px
@@ -327,10 +329,12 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
       border-color: rgba(255,255,255,.6)
 
     .q-field__control:hover:before
-      border-color: #fff
+      border-color: $dark-text
+      border-color: var(--q-color-dark-text)
 
     .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__input
-      color: #fff
+      color: $dark-text
+      color: var(--q-color-dark-text)
 
     &:not(.q-field--highlighted) .q-field__label, .q-field__marginal, .q-field__bottom
       color: rgba(255,255,255,.7)
@@ -357,9 +361,11 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
     &.q-field--highlighted
       .q-field__control
         box-shadow: $shadow-2
-        background: #000
+        background: $dark-page
+        background: var(--q-color-dark-page)
       .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
-        color: #fff
+        color: $dark-text
+        color: var(--q-color-dark-text)
 
     &.q-field--readonly
       .q-field__control:before
@@ -374,9 +380,11 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
           background: rgba(255,255,255,.07)
       &.q-field--highlighted
         .q-field__control
-          background: #fff
+          background: $light-page
+          background: var(--q-color-light-page)
         .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
-          color: #000
+          color: $light-text
+          color: var(--q-color-light-text)
       &.q-field--readonly
         .q-field__control:before
           border-color: rgba(255,255,255,.24)
@@ -524,6 +532,44 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
   &-leave, &-leave-active
     position: absolute
 
+@media (prefers-color-scheme: dark)
+  .q-field--dark-auto
+    &.q-field--filled
+      .q-field__control, .q-field__control:before
+        background: rgba(255,255,255,.07)
+      &.q-field--highlighted .q-field__control:before
+        background: rgba(255,255,255,.1)
+
+    .q-field__control:before
+      border-color: rgba(255,255,255,.6)
+
+    .q-field__control:hover:before
+      border-color: $dark-text
+      border-color: var(--q-color-dark-text)
+
+    .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__input
+      color: $dark-text
+      color: var(--q-color-dark-text)
+
+    &:not(.q-field--highlighted) .q-field__label, .q-field__marginal, .q-field__bottom
+      color: rgba(255,255,255,.7)
+
+    &.q-field--standout
+      .q-field__control
+        background: rgba(255,255,255,.07)
+        &:before
+          background: rgba(255,255,255,.07)
+      &.q-field--highlighted
+        .q-field__control
+          background: $light-page
+          background: var(--q-color-light-page)
+        .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
+          color: $light-text
+          color: var(--q-color-light-text)
+      &.q-field--readonly
+        .q-field__control:before
+          border-color: rgba(255,255,255,.24)
+
 @keyframes q-field-label
   40%
     margin-left: 2px
diff --git a/ui/src/components/inner-loading/QInnerLoading.js b/ui/src/components/inner-loading/QInnerLoading.js
index ad3a5eb44cbf..00aa79e0c7ec 100644
--- a/ui/src/components/inner-loading/QInnerLoading.js
+++ b/ui/src/components/inner-loading/QInnerLoading.js
@@ -28,7 +28,7 @@ export default Vue.extend({
   computed: {
     classes () {
       return 'q-inner-loading absolute-full column flex-center' +
-        (this.isDark === true ? ' q-inner-loading--dark' : '')
+        ` q-inner-loading--${this.darkSuffix}`
     },
 
     labelClasses () {
diff --git a/ui/src/components/inner-loading/QInnerLoading.sass b/ui/src/components/inner-loading/QInnerLoading.sass
index 42b6ca42e674..099f1729db4c 100644
--- a/ui/src/components/inner-loading/QInnerLoading.sass
+++ b/ui/src/components/inner-loading/QInnerLoading.sass
@@ -1,7 +1,12 @@
 .q-inner-loading
   background: $light-dimmed-background
+
   &--dark
     background: $dimmed-background
 
   &__label
     margin-top: 8px
+
+@media (prefers-color-scheme: dark)
+  .q-inner-loading--dark-auto
+    background: $dimmed-background
diff --git a/ui/src/components/inner-loading/QInnerLoading.styl b/ui/src/components/inner-loading/QInnerLoading.styl
index 42b6ca42e674..099f1729db4c 100644
--- a/ui/src/components/inner-loading/QInnerLoading.styl
+++ b/ui/src/components/inner-loading/QInnerLoading.styl
@@ -1,7 +1,12 @@
 .q-inner-loading
   background: $light-dimmed-background
+
   &--dark
     background: $dimmed-background
 
   &__label
     margin-top: 8px
+
+@media (prefers-color-scheme: dark)
+  .q-inner-loading--dark-auto
+    background: $dimmed-background
diff --git a/ui/src/components/item/QItem.js b/ui/src/components/item/QItem.js
index b7a92a9cdce2..4044794e390b 100644
--- a/ui/src/components/item/QItem.js
+++ b/ui/src/components/item/QItem.js
@@ -44,7 +44,7 @@ export default Vue.extend({
     classes () {
       return 'q-item q-item-type row no-wrap' +
         (this.dense === true ? ' q-item--dense' : '') +
-        (this.isDark === true ? ' q-item--dark' : '') +
+        `q-item--${this.darkSuffix}` +
         (
           this.hasLink === true && this.active === null
             ? this.linkClass
diff --git a/ui/src/components/item/QItem.sass b/ui/src/components/item/QItem.sass
index e59cc7c1b38a..cfbc5d7a3055 100644
--- a/ui/src/components/item/QItem.sass
+++ b/ui/src/components/item/QItem.sass
@@ -100,7 +100,8 @@
     border-top-color: $separator-dark-color
 
 .q-list--dark, .q-item--dark
-  color: #fff
+  color: $dark-text
+  color: var(--q-color-dark-text)
   border-color: $separator-dark-color
 
   .q-item__section--side:not(.q-item__section--avatar)
@@ -118,3 +119,23 @@
   &.q-router-link--active, &--active
     color: $primary
     color: var(--q-color-primary)
+
+@media (prefers-color-scheme: dark)
+  .q-list--dark-auto.q-list--separator
+    > .q-item-type + .q-item-type,
+    > .q-virtual-scroll__content > .q-item-type + .q-item-type
+      border-top-color: $separator-dark-color
+
+  .q-list--dark-auto, .q-item--dark-auto
+    color: $dark-text
+    color: var(--q-color-dark-text)
+    border-color: $separator-dark-color
+
+    .q-item__section--side:not(.q-item__section--avatar)
+      color: rgba(255,255,255,.7)
+
+    .q-item__label
+      &--header
+        color: rgba(255,255,255,.64)
+      &--overline, &--caption
+        color: rgba(255,255,255,.8)
diff --git a/ui/src/components/item/QItem.styl b/ui/src/components/item/QItem.styl
index e59cc7c1b38a..cfbc5d7a3055 100644
--- a/ui/src/components/item/QItem.styl
+++ b/ui/src/components/item/QItem.styl
@@ -100,7 +100,8 @@
     border-top-color: $separator-dark-color
 
 .q-list--dark, .q-item--dark
-  color: #fff
+  color: $dark-text
+  color: var(--q-color-dark-text)
   border-color: $separator-dark-color
 
   .q-item__section--side:not(.q-item__section--avatar)
@@ -118,3 +119,23 @@
   &.q-router-link--active, &--active
     color: $primary
     color: var(--q-color-primary)
+
+@media (prefers-color-scheme: dark)
+  .q-list--dark-auto.q-list--separator
+    > .q-item-type + .q-item-type,
+    > .q-virtual-scroll__content > .q-item-type + .q-item-type
+      border-top-color: $separator-dark-color
+
+  .q-list--dark-auto, .q-item--dark-auto
+    color: $dark-text
+    color: var(--q-color-dark-text)
+    border-color: $separator-dark-color
+
+    .q-item__section--side:not(.q-item__section--avatar)
+      color: rgba(255,255,255,.7)
+
+    .q-item__label
+      &--header
+        color: rgba(255,255,255,.64)
+      &--overline, &--caption
+        color: rgba(255,255,255,.8)
diff --git a/ui/src/components/item/QList.js b/ui/src/components/item/QList.js
index 2c46a0eb5809..bfb11d3bb5b9 100644
--- a/ui/src/components/item/QList.js
+++ b/ui/src/components/item/QList.js
@@ -28,7 +28,7 @@ export default Vue.extend({
         (this.bordered === true ? ' q-list--bordered' : '') +
         (this.dense === true ? ' q-list--dense' : '') +
         (this.separator === true ? ' q-list--separator' : '') +
-        (this.isDark === true ? ' q-list--dark' : '') +
+        ` q-list--${this.darkSuffix}` +
         (this.padding === true ? ' q-list--padding' : '')
     }
   },
diff --git a/ui/src/components/layout/QLayout.sass b/ui/src/components/layout/QLayout.sass
index f2941f2841c4..1df5813a6780 100644
--- a/ui/src/components/layout/QLayout.sass
+++ b/ui/src/components/layout/QLayout.sass
@@ -28,7 +28,8 @@
 .q-layout__section--marginal
   background-color: $primary
   background-color: var(--q-color-primary)
-  color: #fff
+  color: $dark-text
+  color: var(--q-color-dark-text)
 
 .q-header
 
@@ -59,7 +60,6 @@
   position: absolute
   top: 0
   bottom: 0
-  background: #fff
   z-index: $z-side
 
   &--on-top
@@ -177,6 +177,11 @@ body.body--dark
   .q-header, .q-footer, .q-drawer
     border-color: $separator-dark-color
 
+@media (prefers-color-scheme: dark)
+  body.body--dark-auto
+    .q-header, .q-footer, .q-drawer
+      border-color: $separator-dark-color
+
 body.platform-ios
   .q-layout--containerized
     // https://github.com/quasarframework/quasar/issues/4127
diff --git a/ui/src/components/layout/QLayout.styl b/ui/src/components/layout/QLayout.styl
index fa79d6b6ca0e..a6f09c2a950f 100644
--- a/ui/src/components/layout/QLayout.styl
+++ b/ui/src/components/layout/QLayout.styl
@@ -28,7 +28,8 @@
 .q-layout__section--marginal
   background-color: $primary
   background-color: var(--q-color-primary)
-  color: #fff
+  color: $dark-text
+  color: var(--q-color-dark-text)
 
 .q-header
 
@@ -59,7 +60,6 @@
   position: absolute
   top: 0
   bottom: 0
-  background: #fff
   z-index: $z-side
 
   &--on-top
@@ -177,6 +177,11 @@ body.body--dark
   .q-header, .q-footer, .q-drawer
     border-color: $separator-dark-color
 
+@media (prefers-color-scheme: dark)
+  body.body--dark-auto
+    .q-header, .q-footer, .q-drawer
+      border-color: $separator-dark-color
+
 body.platform-ios
   .q-layout--containerized
     // https://github.com/quasarframework/quasar/issues/4127
diff --git a/ui/src/components/linear-progress/QLinearProgress.js b/ui/src/components/linear-progress/QLinearProgress.js
index 48c62d6be004..605a31a7f4f5 100644
--- a/ui/src/components/linear-progress/QLinearProgress.js
+++ b/ui/src/components/linear-progress/QLinearProgress.js
@@ -74,7 +74,7 @@ export default Vue.extend({
 
     trackClass () {
       return `q-linear-progress__track absolute-full q-linear-progress__track--${this.transitionSuffix}` +
-        ` q-linear-progress__track--${this.isDark === true ? 'dark' : 'light'}` +
+        ` q-linear-progress__track--${this.darkSuffix}` +
         (this.trackColor !== void 0 ? ` bg-${this.trackColor}` : '')
     },
 
@@ -92,8 +92,8 @@ export default Vue.extend({
     },
 
     stripeClass () {
-      return `q-linear-progress__stripe q-linear-progress__stripe--${this.transitionSuffix}`
-        + ` absolute-${this.reverse === true ? 'right' : 'left'}`
+      return `q-linear-progress__stripe q-linear-progress__stripe--${this.transitionSuffix}` +
+        ` absolute-${this.reverse === true ? 'right' : 'left'}`
     },
 
     attrs () {
diff --git a/ui/src/components/linear-progress/QLinearProgress.sass b/ui/src/components/linear-progress/QLinearProgress.sass
index 6e9d306a2dca..f35637d64cea 100644
--- a/ui/src/components/linear-progress/QLinearProgress.sass
+++ b/ui/src/components/linear-progress/QLinearProgress.sass
@@ -46,7 +46,8 @@
 
   &__track
     opacity: .4
-    &--light
+    &--light,
+    &--dark-auto
       background: rgba(0,0,0,.26)
     &--dark
       background: rgba(255,255,255,.6)
@@ -58,6 +59,10 @@
     &--with-transition
       transition: width .3s
 
+@media (prefers-color-scheme: dark)
+  .q-linear-progress__track--dark-auto
+    background: rgba(255,255,255,.6)
+
 @keyframes q-linear-progress--indeterminate
   0%
     transform: translate3d(-35%, 0, 0) scale3d(.35, 1, 1)
diff --git a/ui/src/components/linear-progress/QLinearProgress.styl b/ui/src/components/linear-progress/QLinearProgress.styl
index 6e9d306a2dca..f35637d64cea 100644
--- a/ui/src/components/linear-progress/QLinearProgress.styl
+++ b/ui/src/components/linear-progress/QLinearProgress.styl
@@ -46,7 +46,8 @@
 
   &__track
     opacity: .4
-    &--light
+    &--light,
+    &--dark-auto
       background: rgba(0,0,0,.26)
     &--dark
       background: rgba(255,255,255,.6)
@@ -58,6 +59,10 @@
     &--with-transition
       transition: width .3s
 
+@media (prefers-color-scheme: dark)
+  .q-linear-progress__track--dark-auto
+    background: rgba(255,255,255,.6)
+
 @keyframes q-linear-progress--indeterminate
   0%
     transform: translate3d(-35%, 0, 0) scale3d(.35, 1, 1)
diff --git a/ui/src/components/markup-table/QMarkupTable.js b/ui/src/components/markup-table/QMarkupTable.js
index b20f722c9cf2..48db7ee9482f 100644
--- a/ui/src/components/markup-table/QMarkupTable.js
+++ b/ui/src/components/markup-table/QMarkupTable.js
@@ -26,7 +26,7 @@ export default Vue.extend({
   computed: {
     classes () {
       return `q-table--${this.separator}-separator` +
-        (this.isDark === true ? ' q-table--dark q-table__card--dark q-dark' : '') +
+        ` q-table--${this.darkSuffix} q-table__card--${this.darkSuffix} q-${this.darkSuffix}` +
         (this.dense === true ? ' q-table--dense' : '') +
         (this.flat === true ? ' q-table--flat' : '') +
         (this.bordered === true ? ' q-table--bordered' : '') +
diff --git a/ui/src/components/menu/QMenu.js b/ui/src/components/menu/QMenu.js
index c36cfc34a563..eb3b748d8164 100644
--- a/ui/src/components/menu/QMenu.js
+++ b/ui/src/components/menu/QMenu.js
@@ -99,7 +99,7 @@ export default Vue.extend({
 
     menuClass () {
       return (this.square === true ? ' q-menu--square' : '') +
-        (this.isDark === true ? ' q-menu--dark q-dark' : '')
+        ` q-menu--${this.darkSuffix} q-${this.darkSuffix}`
     },
 
     hideOnRouteChange () {
diff --git a/ui/src/components/option-group/QOptionGroup.js b/ui/src/components/option-group/QOptionGroup.js
index 1ac420dc1a4f..aa78c96d57e9 100644
--- a/ui/src/components/option-group/QOptionGroup.js
+++ b/ui/src/components/option-group/QOptionGroup.js
@@ -129,7 +129,7 @@ export default Vue.extend({
             color: opt.color === void 0 ? this.color : opt.color,
             checkedIcon: opt.checkedIcon,
             uncheckedIcon: opt.uncheckedIcon,
-            dark: opt.dark || this.isDark,
+            dark: opt.dark === void 0 ? this.dark : opt.dark,
             size: opt.size === void 0 ? this.size : opt.size,
             dense: this.dense,
             keepColor: opt.keepColor === void 0 ? this.keepColor : opt.keepColor
diff --git a/ui/src/components/pagination/QPagination.js b/ui/src/components/pagination/QPagination.js
index 2e7f1979ca86..f2e6e7714b71 100644
--- a/ui/src/components/pagination/QPagination.js
+++ b/ui/src/components/pagination/QPagination.js
@@ -482,7 +482,7 @@ export default Vue.extend({
                 dense: true,
                 value: this.newPage,
                 disable: this.disable,
-                dark: this.isDark,
+                dark: this.dark,
                 borderless: true,
                 inputClass: this.inputClass,
                 inputStyle: this.inputStyle
diff --git a/ui/src/components/pull-to-refresh/QPullToRefresh.sass b/ui/src/components/pull-to-refresh/QPullToRefresh.sass
index edc794eac668..c8ea2e087406 100644
--- a/ui/src/components/pull-to-refresh/QPullToRefresh.sass
+++ b/ui/src/components/pull-to-refresh/QPullToRefresh.sass
@@ -7,7 +7,8 @@
     height: 40px
     color: $primary
     color: var(--q-color-primary)
-    background: #fff
+    background: $light-page
+    background: var(--q-color-light-page)
     box-shadow: 0 0 4px 0 rgba(0,0,0,.3)
 
     &--animating
diff --git a/ui/src/components/pull-to-refresh/QPullToRefresh.styl b/ui/src/components/pull-to-refresh/QPullToRefresh.styl
index edc794eac668..c8ea2e087406 100644
--- a/ui/src/components/pull-to-refresh/QPullToRefresh.styl
+++ b/ui/src/components/pull-to-refresh/QPullToRefresh.styl
@@ -7,7 +7,8 @@
     height: 40px
     color: $primary
     color: var(--q-color-primary)
-    background: #fff
+    background: $light-page
+    background: var(--q-color-light-page)
     box-shadow: 0 0 4px 0 rgba(0,0,0,.3)
 
     &--animating
diff --git a/ui/src/components/radio/QRadio.js b/ui/src/components/radio/QRadio.js
index 60e29cd7b356..adb4c900e0aa 100644
--- a/ui/src/components/radio/QRadio.js
+++ b/ui/src/components/radio/QRadio.js
@@ -46,7 +46,7 @@ export default Vue.extend({
     classes () {
       return 'q-radio cursor-pointer no-outline row inline no-wrap items-center' +
         (this.disable === true ? ' disabled' : '') +
-        (this.isDark === true ? ' q-radio--dark' : '') +
+        ` q-radio--${this.darkSuffix}` +
         (this.dense === true ? ' q-radio--dense' : '') +
         (this.leftLabel === true ? ' reverse' : '')
     },
diff --git a/ui/src/components/radio/QRadio.sass b/ui/src/components/radio/QRadio.sass
index 0eef76d36898..464ab7534e76 100644
--- a/ui/src/components/radio/QRadio.sass
+++ b/ui/src/components/radio/QRadio.sass
@@ -103,3 +103,13 @@ body.desktop
     &:hover
       .q-radio__inner:before
         transform: scale3d(1.5, 1.5, 1)
+
+@media (prefers-color-scheme: dark)
+  .q-radio--dark-auto
+    .q-radio__inner
+      color: rgba(255,255,255,.7)
+      &:before
+        opacity: .32 !important
+      &--truthy
+        color: $primary
+        color: var(--q-color-primary)
diff --git a/ui/src/components/radio/QRadio.styl b/ui/src/components/radio/QRadio.styl
index ec64f096a304..3f43cd0e4338 100644
--- a/ui/src/components/radio/QRadio.styl
+++ b/ui/src/components/radio/QRadio.styl
@@ -103,3 +103,13 @@ body.desktop
     &:hover
       .q-radio__inner:before
         transform: scale3d(1.5, 1.5, 1)
+
+@media (prefers-color-scheme: dark)
+  .q-radio--dark-auto
+    .q-radio__inner
+      color: rgba(255,255,255,.7)
+      &:before
+        opacity: .32 !important
+      &--truthy
+        color: $primary
+        color: var(--q-color-primary)
diff --git a/ui/src/components/scroll-area/QScrollArea.js b/ui/src/components/scroll-area/QScrollArea.js
index 993f79881ab3..5ea44728b280 100644
--- a/ui/src/components/scroll-area/QScrollArea.js
+++ b/ui/src/components/scroll-area/QScrollArea.js
@@ -88,7 +88,7 @@ export default Vue.extend({
   computed: {
     classes () {
       return 'q-scrollarea' +
-        (this.isDark === true ? ' q-scrollarea--dark' : '')
+        ` q-scrollarea--${this.darkSuffix}`
     },
 
     verticalScrollPercentage () {
diff --git a/ui/src/components/scroll-area/QScrollArea.sass b/ui/src/components/scroll-area/QScrollArea.sass
index 933c6b0a4be2..17b047321ac0 100644
--- a/ui/src/components/scroll-area/QScrollArea.sass
+++ b/ui/src/components/scroll-area/QScrollArea.sass
@@ -22,7 +22,8 @@
       pointer-events: none
 
   &__thumb
-    background: #000
+    background: $dark-page
+    background: var(--q-color-dark-page)
 
     &:hover
       opacity: .3
@@ -34,4 +35,11 @@
     min-width: 100%
 
   &--dark .q-scrollarea__thumb
-    background: #fff
+    background: $dark-text
+    background: var(--q-color-dark-text)
+
+@media (prefers-color-scheme: dark)
+  .q-scrollarea--dark-auto
+    .q-scrollarea__thumb
+      background: $dark-text
+      background: var(--q-color-dark-text)
diff --git a/ui/src/components/scroll-area/QScrollArea.styl b/ui/src/components/scroll-area/QScrollArea.styl
index 933c6b0a4be2..17b047321ac0 100644
--- a/ui/src/components/scroll-area/QScrollArea.styl
+++ b/ui/src/components/scroll-area/QScrollArea.styl
@@ -22,7 +22,8 @@
       pointer-events: none
 
   &__thumb
-    background: #000
+    background: $dark-page
+    background: var(--q-color-dark-page)
 
     &:hover
       opacity: .3
@@ -34,4 +35,11 @@
     min-width: 100%
 
   &--dark .q-scrollarea__thumb
-    background: #fff
+    background: $dark-text
+    background: var(--q-color-dark-text)
+
+@media (prefers-color-scheme: dark)
+  .q-scrollarea--dark-auto
+    .q-scrollarea__thumb
+      background: $dark-text
+      background: var(--q-color-dark-text)
diff --git a/ui/src/components/select/QSelect.js b/ui/src/components/select/QSelect.js
index d5e25fdd36b0..ca6d787ea370 100755
--- a/ui/src/components/select/QSelect.js
+++ b/ui/src/components/select/QSelect.js
@@ -190,10 +190,16 @@ export default Vue.extend({
   computed: {
     isOptionsDark () {
       return this.optionsDark === null
-        ? this.isDark
+        ? (this.dark === null ? this.$q.dark.isActive : this.dark)
         : this.optionsDark
     },
 
+    optionsDarkSuffix () {
+      return this.isOptionsDark === null
+        ? 'dark-auto'
+        : (this.isOptionsDark === true ? 'dark' : 'light')
+    },
+
     virtualScrollLength () {
       return Array.isArray(this.options)
         ? this.options.length
@@ -1460,7 +1466,6 @@ export default Vue.extend({
         ref: 'dialog',
         props: {
           value: this.dialog,
-          dark: this.isOptionsDark,
           position: this.useInput === true ? 'top' : void 0,
           contentClass: this.dialogContentClass,
           contentStyle: this.dialogContentStyle,
@@ -1475,7 +1480,7 @@ export default Vue.extend({
       }, [
         h('div', {
           staticClass: 'q-select__dialog' +
-            (this.isOptionsDark === true ? ' q-select__dialog--dark q-dark' : '') +
+            ` q-select__dialog--${this.optionsDarkSuffix} q-${this.optionsDarkSuffix}` +
             (this.dialogFieldFocused === true ? ' q-select__dialog--focused' : '')
         }, content)
       ])
diff --git a/ui/src/components/select/QSelect.sass b/ui/src/components/select/QSelect.sass
index 8087a4fb1cf2..106958a5fadc 100644
--- a/ui/src/components/select/QSelect.sass
+++ b/ui/src/components/select/QSelect.sass
@@ -62,7 +62,6 @@
     width: 90vw !important
     max-width: 90vw !important
     max-height: calc(100vh - 70px) !important
-    background: #fff
     display: flex
     flex-direction: column
 
diff --git a/ui/src/components/select/QSelect.styl b/ui/src/components/select/QSelect.styl
index 8087a4fb1cf2..106958a5fadc 100644
--- a/ui/src/components/select/QSelect.styl
+++ b/ui/src/components/select/QSelect.styl
@@ -62,7 +62,6 @@
     width: 90vw !important
     max-width: 90vw !important
     max-height: calc(100vh - 70px) !important
-    background: #fff
     display: flex
     flex-direction: column
 
diff --git a/ui/src/components/separator/QSeparator.js b/ui/src/components/separator/QSeparator.js
index 608152c19747..907aa09d06be 100644
--- a/ui/src/components/separator/QSeparator.js
+++ b/ui/src/components/separator/QSeparator.js
@@ -50,7 +50,7 @@ export default Vue.extend({
     classes () {
       return `q-separator${this.classPrefix}${this.insetClass}` +
         (this.color !== void 0 ? ` bg-${this.color}` : '') +
-        (this.isDark === true ? ' q-separator--dark' : '')
+        ` q-separator--${this.darkSuffix}`
     },
 
     style () {
diff --git a/ui/src/components/separator/QSeparator.sass b/ui/src/components/separator/QSeparator.sass
index edd520a0cf42..977929cd0903 100644
--- a/ui/src/components/separator/QSeparator.sass
+++ b/ui/src/components/separator/QSeparator.sass
@@ -30,3 +30,7 @@
     &-inset
       margin-top: 8px
       margin-bottom: 8px
+
+@media (prefers-color-scheme: dark)
+  .q-separator--dark-auto
+    background: $separator-dark-color
diff --git a/ui/src/components/separator/QSeparator.styl b/ui/src/components/separator/QSeparator.styl
index edd520a0cf42..977929cd0903 100644
--- a/ui/src/components/separator/QSeparator.styl
+++ b/ui/src/components/separator/QSeparator.styl
@@ -30,3 +30,7 @@
     &-inset
       margin-top: 8px
       margin-bottom: 8px
+
+@media (prefers-color-scheme: dark)
+  .q-separator--dark-auto
+    background: $separator-dark-color
diff --git a/ui/src/components/skeleton/QSkeleton.js b/ui/src/components/skeleton/QSkeleton.js
index d9433e01200c..d7ea5099fbed 100644
--- a/ui/src/components/skeleton/QSkeleton.js
+++ b/ui/src/components/skeleton/QSkeleton.js
@@ -52,7 +52,7 @@ export default Vue.extend({
     },
 
     classes () {
-      return `q-skeleton--${this.isDark === true ? 'dark' : 'light'} q-skeleton--type-${this.type}` +
+      return `q-skeleton--${this.darkSuffix} q-skeleton--type-${this.type}` +
         (this.animation !== 'none' ? ` q-skeleton--anim q-skeleton--anim-${this.animation}` : '') +
         (this.square === true ? ' q-skeleton--square' : '') +
         (this.bordered === true ? ' q-skeleton--bordered' : '')
diff --git a/ui/src/components/skeleton/QSkeleton.sass b/ui/src/components/skeleton/QSkeleton.sass
index 2dd47b03b280..c979cc0bc430 100644
--- a/ui/src/components/skeleton/QSkeleton.sass
+++ b/ui/src/components/skeleton/QSkeleton.sass
@@ -101,6 +101,19 @@
     &.q-skeleton--anim-blink:after
       background: rgba(255,255,255,.2)
 
+@media (prefers-color-scheme: dark)
+  .q-skeleton--dark-auto
+    background: rgba(255, 255, 255, 0.05)
+
+    &.q-skeleton--bordered
+      border: 1px solid rgba(255,255,255,.25)
+
+    &.q-skeleton--anim-wave:after
+      background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent)
+
+    &.q-skeleton--anim-blink:after
+      background: rgba(255,255,255,.2)
+
 @keyframes q-skeleton--fade
   0%
     opacity: 1
diff --git a/ui/src/components/skeleton/QSkeleton.styl b/ui/src/components/skeleton/QSkeleton.styl
index 2dd47b03b280..c979cc0bc430 100644
--- a/ui/src/components/skeleton/QSkeleton.styl
+++ b/ui/src/components/skeleton/QSkeleton.styl
@@ -101,6 +101,19 @@
     &.q-skeleton--anim-blink:after
       background: rgba(255,255,255,.2)
 
+@media (prefers-color-scheme: dark)
+  .q-skeleton--dark-auto
+    background: rgba(255, 255, 255, 0.05)
+
+    &.q-skeleton--bordered
+      border: 1px solid rgba(255,255,255,.25)
+
+    &.q-skeleton--anim-wave:after
+      background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent)
+
+    &.q-skeleton--anim-blink:after
+      background: rgba(255,255,255,.2)
+
 @keyframes q-skeleton--fade
   0%
     opacity: 1
diff --git a/ui/src/components/slide-item/QSlideItem.js b/ui/src/components/slide-item/QSlideItem.js
index 973dd10d8077..6d924e237288 100644
--- a/ui/src/components/slide-item/QSlideItem.js
+++ b/ui/src/components/slide-item/QSlideItem.js
@@ -199,8 +199,8 @@ export default Vue.extend({
     )
 
     return h('div', {
-      staticClass: 'q-slide-item q-item-type overflow-hidden',
-      class: this.isDark === true ? 'q-slide-item--dark q-dark' : '',
+      staticClass: 'q-slide-item q-item-type overflow-hidden' +
+        ` q-slide-item--${this.darkSuffix} q-${this.darkSuffix}`,
       on: { ...this.qListeners }
     }, content)
   },
diff --git a/ui/src/components/slide-item/QSlideItem.sass b/ui/src/components/slide-item/QSlideItem.sass
index 9318d8508b87..2ecd8087926b 100644
--- a/ui/src/components/slide-item/QSlideItem.sass
+++ b/ui/src/components/slide-item/QSlideItem.sass
@@ -1,11 +1,11 @@
 .q-slide-item
   position: relative
-  background: white
 
   &__left, &__right, &__top, &__bottom
     visibility: hidden
     font-size: 14px
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
 
     .q-icon
       font-size: 1.714em
diff --git a/ui/src/components/slide-item/QSlideItem.styl b/ui/src/components/slide-item/QSlideItem.styl
index 9318d8508b87..2ecd8087926b 100644
--- a/ui/src/components/slide-item/QSlideItem.styl
+++ b/ui/src/components/slide-item/QSlideItem.styl
@@ -1,11 +1,11 @@
 .q-slide-item
   position: relative
-  background: white
 
   &__left, &__right, &__top, &__bottom
     visibility: hidden
     font-size: 14px
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
 
     .q-icon
       font-size: 1.714em
diff --git a/ui/src/components/slider/QSlider.sass b/ui/src/components/slider/QSlider.sass
index f2ce29f2e239..78b2e62f7171 100644
--- a/ui/src/components/slider/QSlider.sass
+++ b/ui/src/components/slider/QSlider.sass
@@ -225,7 +225,8 @@
     text-align: center
 
   &__text
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
     font-size: 12px
 
   &--no-value
@@ -285,11 +286,11 @@
 
   &--dark
     .q-slider__track
-      background: rgba(#fff,.1)
+      background: rgba($light-page,.1)
     .q-slider__inner
-      background: rgba(#fff,.1)
+      background: rgba($light-page,.1)
     .q-slider__markers
-      color: rgba(#fff,.3)
+      color: rgba($light-page,.3)
 
   &--dense
     .q-slider__track-container
@@ -297,3 +298,12 @@
         padding: 6px 0
       &--v
         padding: 0 6px
+
+@media (prefers-color-scheme: dark)
+  .q-slider--dark-auto
+    .q-slider__track
+      background: rgba($light-page,.1)
+    .q-slider__inner
+      background: rgba($light-page,.1)
+    .q-slider__markers
+      color: rgba($light-page,.3)
diff --git a/ui/src/components/slider/QSlider.styl b/ui/src/components/slider/QSlider.styl
index 174ac1bc0c37..ccb3f6156678 100644
--- a/ui/src/components/slider/QSlider.styl
+++ b/ui/src/components/slider/QSlider.styl
@@ -225,7 +225,8 @@
     text-align: center
 
   &__text
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
     font-size: 12px
 
   &--no-value
@@ -285,11 +286,11 @@
 
   &--dark
     .q-slider__track
-      background: rgba(#fff,.1)
+      background: alpha($light-page,.1)
     .q-slider__inner
-      background: rgba(#fff,.1)
+      background: alpha($light-page,.1)
     .q-slider__markers
-      color: rgba(#fff,.3)
+      color: alpha($light-page,.3)
 
   &--dense
     .q-slider__track-container
@@ -297,3 +298,12 @@
         padding: 6px 0
       &--v
         padding: 0 6px
+
+@media (prefers-color-scheme: dark)
+  .q-slider--dark-auto
+    .q-slider__track
+      background: alpha($light-page,.1)
+    .q-slider__inner
+      background: alpha($light-page,.1)
+    .q-slider__markers
+      color: alpha($light-page,.3)
diff --git a/ui/src/components/slider/slider-utils.js b/ui/src/components/slider/slider-utils.js
index c337eebcae04..dfac6602d9c1 100644
--- a/ui/src/components/slider/slider-utils.js
+++ b/ui/src/components/slider/slider-utils.js
@@ -196,7 +196,7 @@ export const SliderMixin = {
         (this.focus === 'both' ? ' q-slider--focus' : '') +
         (this.label || this.labelAlways === true ? ' q-slider--label' : '') +
         (this.labelAlways === true ? ' q-slider--label-always' : '') +
-        (this.isDark === true ? ' q-slider--dark' : '') +
+        ` q-slider--${this.darkSuffix}` +
         (this.dense === true ? ' q-slider--dense q-slider--dense' + this.axis : '')
     },
 
diff --git a/ui/src/components/splitter/QSplitter.js b/ui/src/components/splitter/QSplitter.js
index 0ce173c1e99e..0346f6ae56fa 100644
--- a/ui/src/components/splitter/QSplitter.js
+++ b/ui/src/components/splitter/QSplitter.js
@@ -74,7 +74,7 @@ export default Vue.extend({
       return (this.horizontal === true ? 'column' : 'row') +
         ` q-splitter--${this.horizontal === true ? 'horizontal' : 'vertical'}` +
         ` q-splitter--${this.disable === true ? 'disabled' : 'workable'}` +
-        (this.isDark === true ? ' q-splitter--dark' : '')
+        ` q-splitter--${this.darkSuffix}`
     },
 
     prop () {
diff --git a/ui/src/components/splitter/QSplitter.sass b/ui/src/components/splitter/QSplitter.sass
index 1d7c929786a2..8724c82ebe4c 100644
--- a/ui/src/components/splitter/QSplitter.sass
+++ b/ui/src/components/splitter/QSplitter.sass
@@ -52,3 +52,8 @@
 
   &__before, &__after
     overflow: auto
+
+@media (prefers-color-scheme: dark)
+  .q-splitter--dark-auto
+    .q-splitter__separator
+      background-color: $separator-dark-color
diff --git a/ui/src/components/splitter/QSplitter.styl b/ui/src/components/splitter/QSplitter.styl
index 1d7c929786a2..8724c82ebe4c 100644
--- a/ui/src/components/splitter/QSplitter.styl
+++ b/ui/src/components/splitter/QSplitter.styl
@@ -52,3 +52,8 @@
 
   &__before, &__after
     overflow: auto
+
+@media (prefers-color-scheme: dark)
+  .q-splitter--dark-auto
+    .q-splitter__separator
+      background-color: $separator-dark-color
diff --git a/ui/src/components/stepper/QStepper.js b/ui/src/components/stepper/QStepper.js
index b92b914d6877..4bbd74228843 100644
--- a/ui/src/components/stepper/QStepper.js
+++ b/ui/src/components/stepper/QStepper.js
@@ -40,10 +40,12 @@ export default Vue.extend({
 
   computed: {
     classes () {
+      const isDark = this.dark === true || (this.dark === null && this.$q.dark.isActive !== false)
+
       return `q-stepper q-stepper--${this.vertical === true ? 'vertical' : 'horizontal'}` +
-        (this.flat === true || this.isDark === true ? ' q-stepper--flat no-shadow' : '') +
-        (this.bordered === true || (this.isDark === true && this.flat === false) ? ' q-stepper--bordered' : '') +
-        (this.isDark === true ? ' q-stepper--dark q-dark' : '')
+        (this.flat === true || isDark === true ? ' q-stepper--flat no-shadow' : '') +
+        (this.bordered === true || (isDark === true && this.flat === false) ? ' q-stepper--bordered' : '') +
+        ` q-stepper--${this.darkSuffix} q-${this.darkSuffix}`
     },
 
     headerClasses () {
diff --git a/ui/src/components/stepper/QStepper.sass b/ui/src/components/stepper/QStepper.sass
index be7a9b3155ce..bd1e07015175 100644
--- a/ui/src/components/stepper/QStepper.sass
+++ b/ui/src/components/stepper/QStepper.sass
@@ -1,7 +1,6 @@
 .q-stepper
   box-shadow: $shadow-2
   border-radius: $generic-border-radius
-  background: #fff
 
   &__title
     font-size: 14px
@@ -21,8 +20,10 @@
     height: 24px
     border-radius: 50%
     background: currentColor
+
     span
-      color: #fff
+      color: $dark-text
+      color: var(--q-color-dark-text)
 
   &__tab
     padding: 8px 24px
@@ -30,10 +31,6 @@
     color: $grey
     flex-direction: row
 
-  &--dark
-    .q-stepper__dot span
-      color: #000
-
   &__tab
     &--navigation
       user-select: none
@@ -194,6 +191,34 @@
       padding-bottom: 8px
 
   &--dark
+    .q-stepper__dot span
+      color: $light-text
+      color: var(--q-color-light-text)
+
+    &.q-stepper--bordered,
+    .q-stepper__header--border
+      border-color: $separator-dark-color
+    &.q-stepper--horizontal
+      .q-stepper__line
+        &:before, &:after
+          background: $separator-dark-color
+    &.q-stepper--vertical
+      .q-stepper__dot
+        &:before, &:after
+          background: $separator-dark-color
+    .q-stepper__tab
+      &--disabled
+        color: $separator-dark-color
+        .q-stepper__dot
+          background: $separator-dark-color
+        .q-stepper__label
+          color: rgba(255,255,255,.54)
+
+@media (prefers-color-scheme: dark)
+  .q-stepper--dark-auto
+    .q-stepper__dot span
+      color: $light-text
+      color: var(--q-color-light-text)
 
     &.q-stepper--bordered,
     .q-stepper__header--border
diff --git a/ui/src/components/stepper/QStepper.styl b/ui/src/components/stepper/QStepper.styl
index be7a9b3155ce..bd1e07015175 100644
--- a/ui/src/components/stepper/QStepper.styl
+++ b/ui/src/components/stepper/QStepper.styl
@@ -1,7 +1,6 @@
 .q-stepper
   box-shadow: $shadow-2
   border-radius: $generic-border-radius
-  background: #fff
 
   &__title
     font-size: 14px
@@ -21,8 +20,10 @@
     height: 24px
     border-radius: 50%
     background: currentColor
+
     span
-      color: #fff
+      color: $dark-text
+      color: var(--q-color-dark-text)
 
   &__tab
     padding: 8px 24px
@@ -30,10 +31,6 @@
     color: $grey
     flex-direction: row
 
-  &--dark
-    .q-stepper__dot span
-      color: #000
-
   &__tab
     &--navigation
       user-select: none
@@ -194,6 +191,34 @@
       padding-bottom: 8px
 
   &--dark
+    .q-stepper__dot span
+      color: $light-text
+      color: var(--q-color-light-text)
+
+    &.q-stepper--bordered,
+    .q-stepper__header--border
+      border-color: $separator-dark-color
+    &.q-stepper--horizontal
+      .q-stepper__line
+        &:before, &:after
+          background: $separator-dark-color
+    &.q-stepper--vertical
+      .q-stepper__dot
+        &:before, &:after
+          background: $separator-dark-color
+    .q-stepper__tab
+      &--disabled
+        color: $separator-dark-color
+        .q-stepper__dot
+          background: $separator-dark-color
+        .q-stepper__label
+          color: rgba(255,255,255,.54)
+
+@media (prefers-color-scheme: dark)
+  .q-stepper--dark-auto
+    .q-stepper__dot span
+      color: $light-text
+      color: var(--q-color-light-text)
 
     &.q-stepper--bordered,
     .q-stepper__header--border
diff --git a/ui/src/components/tab-panels/QTabPanel.sass b/ui/src/components/tab-panels/QTabPanel.sass
index eb56cd26fbff..d2f4b676cce4 100644
--- a/ui/src/components/tab-panels/QTabPanel.sass
+++ b/ui/src/components/tab-panels/QTabPanel.sass
@@ -1,5 +1,2 @@
-.q-tab-panels
-  background: #fff
-
 .q-tab-panel
   padding: 16px
diff --git a/ui/src/components/tab-panels/QTabPanel.styl b/ui/src/components/tab-panels/QTabPanel.styl
index eb56cd26fbff..d2f4b676cce4 100644
--- a/ui/src/components/tab-panels/QTabPanel.styl
+++ b/ui/src/components/tab-panels/QTabPanel.styl
@@ -1,5 +1,2 @@
-.q-tab-panels
-  background: #fff
-
 .q-tab-panel
   padding: 16px
diff --git a/ui/src/components/tab-panels/QTabPanels.js b/ui/src/components/tab-panels/QTabPanels.js
index 7be0cf6c50d5..fc011ef18086 100644
--- a/ui/src/components/tab-panels/QTabPanels.js
+++ b/ui/src/components/tab-panels/QTabPanels.js
@@ -11,7 +11,7 @@ export default Vue.extend({
   computed: {
     classes () {
       return 'q-tab-panels q-panel-parent' +
-        (this.isDark === true ? ' q-tab-panels--dark q-dark' : '')
+        ` q-tab-panels--${this.darkSuffix} q-${this.darkSuffix}`
     }
   },
 
diff --git a/ui/src/components/table/QTable.js b/ui/src/components/table/QTable.js
index 75a93f0aa330..0bf6b3dbca9a 100644
--- a/ui/src/components/table/QTable.js
+++ b/ui/src/components/table/QTable.js
@@ -212,7 +212,7 @@ export default Vue.extend({
 
     cardDefaultClass () {
       return ' q-table__card' +
-        (this.isDark === true ? ' q-table__card--dark q-dark' : '') +
+        ` q-table__card--${this.darkSuffix} q-${this.darkSuffix}` +
         (this.square === true ? ' q-table--square' : '') +
         (this.flat === true ? ' q-table--flat' : '') +
         (this.bordered === true ? ' q-table--bordered' : '')
@@ -221,7 +221,7 @@ export default Vue.extend({
     __containerClass () {
       return `q-table__container q-table--${this.separator}-separator column no-wrap` +
         (this.grid === true ? ' q-table--grid' : this.cardDefaultClass) +
-        (this.isDark === true ? ' q-table--dark' : '') +
+        ` q-table--${this.darkSuffix}` +
         (this.dense === true ? ' q-table--dense' : '') +
         (this.wrapCells === false ? ' q-table--no-wrap' : '') +
         (this.inFullscreen === true ? ' fullscreen scroll' : '')
@@ -382,7 +382,7 @@ export default Vue.extend({
           staticClass: 'q-table__linear-progress',
           props: {
             color: this.color,
-            dark: this.isDark,
+            dark: this.dark,
             indeterminate: true,
             trackColor: 'transparent'
           }
diff --git a/ui/src/components/table/QTable.sass b/ui/src/components/table/QTable.sass
index eabdbd52a31a..d2cfc4510d2f 100644
--- a/ui/src/components/table/QTable.sass
+++ b/ui/src/components/table/QTable.sass
@@ -1,6 +1,5 @@
 .q-markup-table
   overflow: auto
-  background: #fff
 
 .q-table
   width: 100%
@@ -36,8 +35,8 @@
     font-size: 13px
 
   &__card
-    color: #000
-    background-color: #fff
+    color: $light-text
+    color: var(--q-color-light-text)
     border-radius: $table-border-radius
     box-shadow: $table-box-shadow
 
@@ -270,7 +269,6 @@ body.desktop .q-table > tbody > tr:not(.q-tr--no-hover):hover > td:not(.q-td--no
   border-color: $table-dark-border-color
 
 .q-table--dark
-
   .q-table__bottom, thead, tr, th, td
     border-color: $table-dark-border-color
 
@@ -284,3 +282,22 @@ body.desktop .q-table > tbody > tr:not(.q-tr--no-hover):hover > td:not(.q-td--no
   &.q-table--vertical-separator, &.q-table--cell-separator
     .q-table__top
       border-color: $table-dark-border-color
+
+@media (prefers-color-scheme: dark)
+  .q-table__card--dark-auto, .q-table--dark-auto
+    border-color: $table-dark-border-color
+
+  .q-table--dark-auto
+    .q-table__bottom, thead, tr, th, td
+      border-color: $table-dark-border-color
+
+    tbody
+      td
+        &:before
+          background: $table-dark-hover-background
+        &:after
+          background: $table-dark-selected-background
+
+    &.q-table--vertical-separator, &.q-table--cell-separator
+      .q-table__top
+        border-color: $table-dark-border-color
diff --git a/ui/src/components/table/QTable.styl b/ui/src/components/table/QTable.styl
index eabdbd52a31a..d2cfc4510d2f 100644
--- a/ui/src/components/table/QTable.styl
+++ b/ui/src/components/table/QTable.styl
@@ -1,6 +1,5 @@
 .q-markup-table
   overflow: auto
-  background: #fff
 
 .q-table
   width: 100%
@@ -36,8 +35,8 @@
     font-size: 13px
 
   &__card
-    color: #000
-    background-color: #fff
+    color: $light-text
+    color: var(--q-color-light-text)
     border-radius: $table-border-radius
     box-shadow: $table-box-shadow
 
@@ -270,7 +269,6 @@ body.desktop .q-table > tbody > tr:not(.q-tr--no-hover):hover > td:not(.q-td--no
   border-color: $table-dark-border-color
 
 .q-table--dark
-
   .q-table__bottom, thead, tr, th, td
     border-color: $table-dark-border-color
 
@@ -284,3 +282,22 @@ body.desktop .q-table > tbody > tr:not(.q-tr--no-hover):hover > td:not(.q-td--no
   &.q-table--vertical-separator, &.q-table--cell-separator
     .q-table__top
       border-color: $table-dark-border-color
+
+@media (prefers-color-scheme: dark)
+  .q-table__card--dark-auto, .q-table--dark-auto
+    border-color: $table-dark-border-color
+
+  .q-table--dark-auto
+    .q-table__bottom, thead, tr, th, td
+      border-color: $table-dark-border-color
+
+    tbody
+      td
+        &:before
+          background: $table-dark-hover-background
+        &:after
+          background: $table-dark-selected-background
+
+    &.q-table--vertical-separator, &.q-table--cell-separator
+      .q-table__top
+        border-color: $table-dark-border-color
diff --git a/ui/src/components/table/table-body.js b/ui/src/components/table/table-body.js
index 7abff07c5a18..517098988208 100644
--- a/ui/src/components/table/table-body.js
+++ b/ui/src/components/table/table-body.js
@@ -44,7 +44,7 @@ export default {
               props: {
                 value: selected,
                 color: this.color,
-                dark: this.isDark,
+                dark: this.dark,
                 dense: this.dense
               },
               on: {
@@ -140,7 +140,7 @@ export default {
         sort: this.sort,
         rowIndex: this.firstRowIndex + data.pageIndex,
         color: this.color,
-        dark: this.isDark,
+        dark: this.dark,
         dense: this.dense
       })
 
diff --git a/ui/src/components/table/table-bottom.js b/ui/src/components/table/table-bottom.js
index dcc8722cc0d8..4a240961ecd3 100644
--- a/ui/src/components/table/table-bottom.js
+++ b/ui/src/components/table/table-bottom.js
@@ -111,7 +111,7 @@ export default {
                 displayValue: rowsPerPage === 0
                   ? this.$q.lang.table.allRows
                   : rowsPerPage,
-                dark: this.isDark,
+                dark: this.dark,
                 borderless: true,
                 dense: true,
                 optionsDense: true,
diff --git a/ui/src/components/table/table-grid.js b/ui/src/components/table/table-grid.js
index 0d4f5ad586b1..d5b7d697ef0b 100644
--- a/ui/src/components/table/table-grid.js
+++ b/ui/src/components/table/table-grid.js
@@ -39,7 +39,7 @@ export default {
                   props: {
                     value: scope.selected,
                     color: this.color,
-                    dark: this.isDark,
+                    dark: this.dark,
                     dense: this.dense
                   },
                   on: {
@@ -52,7 +52,7 @@ export default {
 
             child.unshift(
               h('div', { staticClass: 'q-table__grid-item-row' }, content),
-              h(QSeparator, { props: { dark: this.isDark } })
+              h(QSeparator, { props: { dark: this.dark } })
             )
           }
 
diff --git a/ui/src/components/table/table-header.js b/ui/src/components/table/table-header.js
index ca4330236ca7..e949ba841957 100644
--- a/ui/src/components/table/table-header.js
+++ b/ui/src/components/table/table-header.js
@@ -68,7 +68,7 @@ export default {
               props: {
                 color: this.color,
                 value: this.headerSelectedValue,
-                dark: this.isDark,
+                dark: this.dark,
                 dense: this.dense
               },
               on: cache(this, 'inp', {
@@ -96,7 +96,7 @@ export default {
         sort: this.sort,
         colsMap: this.computedColsMap,
         color: this.color,
-        dark: this.isDark,
+        dark: this.dark,
         dense: this.dense
       })
 
diff --git a/ui/src/components/time/QTime.js b/ui/src/components/time/QTime.js
index cfbd033fc450..135220afa376 100644
--- a/ui/src/components/time/QTime.js
+++ b/ui/src/components/time/QTime.js
@@ -111,7 +111,7 @@ export default Vue.extend({
   computed: {
     classes () {
       return `q-time q-time--${this.landscape === true ? 'landscape' : 'portrait'}` +
-        (this.isDark === true ? ' q-time--dark q-dark' : '') +
+        ` q-time--${this.darkSuffix} q-${this.darkSuffix}` +
         (this.disable === true ? ' disabled' : (this.readonly === true ? ' q-time--readonly' : '')) +
         (this.bordered === true ? ' q-time--bordered' : '') +
         (this.square === true ? ' q-time--square no-border-radius' : '') +
diff --git a/ui/src/components/time/QTime.sass b/ui/src/components/time/QTime.sass
index aa39d1465173..9fde1cc2d364 100644
--- a/ui/src/components/time/QTime.sass
+++ b/ui/src/components/time/QTime.sass
@@ -3,7 +3,6 @@
 .q-time
   box-shadow: $shadow-2
   border-radius: $generic-border-radius
-  background: #fff
   outline: 0
   width: 290px
   min-width: 290px
@@ -14,7 +13,8 @@
 
   &__header
     border-top-left-radius: inherit
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
     background-color: $primary
     background-color: var(--q-color-primary)
     padding: 16px
@@ -124,7 +124,8 @@
     &--active
       background-color: $primary
       background-color: var(--q-color-primary)
-      color: #fff
+      color: $dark-text
+      color: var(--q-color-dark-text)
 
   @for $pos from 0 through 11
     $angle: (270 + 30 * $pos)
@@ -147,7 +148,8 @@
   &__now-button
     background-color: $primary
     background-color: var(--q-color-primary)
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
     top: 12px
     right: 12px
 
@@ -188,3 +190,7 @@
 
   &--dark
     border-color: $separator-dark-color
+
+@media (prefers-color-scheme: dark)
+  .q-time--dark-auto
+    border-color: $separator-dark-color
diff --git a/ui/src/components/time/QTime.styl b/ui/src/components/time/QTime.styl
index 32073dd4ff47..2d9eb559690d 100644
--- a/ui/src/components/time/QTime.styl
+++ b/ui/src/components/time/QTime.styl
@@ -12,7 +12,8 @@
 
   &__header
     border-top-left-radius: inherit
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
     background-color: $primary
     background-color: var(--q-color-primary)
     padding: 16px
@@ -53,7 +54,7 @@
 
   &__container-child
     border-radius: 50%
-    background: rgba(0, 0, 0, .12)
+    background: rgba(0,0,0,.12)
 
   &__clock
     padding: 24px
@@ -122,7 +123,8 @@
     &--active
       background-color: $primary
       background-color: var(--q-color-primary)
-      color: #fff
+      color: $dark-text
+      color: var(--q-color-dark-text)
 
   for $pos in 0..11
     $angle = (270 + 30 * $pos)
@@ -145,7 +147,8 @@
   &__now-button
     background-color: $primary
     background-color: var(--q-color-primary)
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
     top: 12px
     right: 12px
 
@@ -186,3 +189,7 @@
 
   &--dark
     border-color: $separator-dark-color
+
+@media (prefers-color-scheme: dark)
+  .q-time--dark-auto
+    border-color: $separator-dark-color
diff --git a/ui/src/components/timeline/QTimeline.js b/ui/src/components/timeline/QTimeline.js
index 2d4d13cbe571..1391ba09d362 100644
--- a/ui/src/components/timeline/QTimeline.js
+++ b/ui/src/components/timeline/QTimeline.js
@@ -36,7 +36,7 @@ export default Vue.extend({
   computed: {
     classes () {
       return `q-timeline--${this.layout} q-timeline--${this.layout}--${this.side}` +
-        (this.isDark === true ? ' q-timeline--dark' : '')
+        ` q-timeline--${this.darkSuffix}`
     }
   },
 
diff --git a/ui/src/components/timeline/QTimeline.sass b/ui/src/components/timeline/QTimeline.sass
index dcbce41986bb..6e4aef5ef4ce 100644
--- a/ui/src/components/timeline/QTimeline.sass
+++ b/ui/src/components/timeline/QTimeline.sass
@@ -6,7 +6,9 @@
     line-height: inherit
 
   &--dark
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
+
     .q-timeline__subtitle
       opacity: .7
 
@@ -59,7 +61,9 @@
       height: 38px
       line-height: 38px
       width: 100%
-      color: #fff
+      color: $dark-text
+      color: var(--q-color-dark-text)
+
       > svg,
       > img
         width: 1em
@@ -244,3 +248,11 @@
 
       &__subtitle, &__content
         width: 50%
+
+@media (prefers-color-scheme: dark)
+  .q-timeline--dark-auto
+    color: $dark-text
+    color: var(--q-color-dark-text)
+
+    .q-timeline__subtitle
+      opacity: .7
diff --git a/ui/src/components/timeline/QTimeline.styl b/ui/src/components/timeline/QTimeline.styl
index dcbce41986bb..6e4aef5ef4ce 100644
--- a/ui/src/components/timeline/QTimeline.styl
+++ b/ui/src/components/timeline/QTimeline.styl
@@ -6,7 +6,9 @@
     line-height: inherit
 
   &--dark
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
+
     .q-timeline__subtitle
       opacity: .7
 
@@ -59,7 +61,9 @@
       height: 38px
       line-height: 38px
       width: 100%
-      color: #fff
+      color: $dark-text
+      color: var(--q-color-dark-text)
+
       > svg,
       > img
         width: 1em
@@ -244,3 +248,11 @@
 
       &__subtitle, &__content
         width: 50%
+
+@media (prefers-color-scheme: dark)
+  .q-timeline--dark-auto
+    color: $dark-text
+    color: var(--q-color-dark-text)
+
+    .q-timeline__subtitle
+      opacity: .7
diff --git a/ui/src/components/toggle/QToggle.sass b/ui/src/components/toggle/QToggle.sass
index b41975db2834..7d6194a3d3e9 100644
--- a/ui/src/components/toggle/QToggle.sass
+++ b/ui/src/components/toggle/QToggle.sass
@@ -30,13 +30,15 @@ $toggle-transition: .22s cubic-bezier(.4,0,.2,1)
       bottom: 0
       left: 0
       border-radius: 50%
-      background: #fff
+      background: $light-page
+      background: var(--q-color-light-page)
       box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)
 
     .q-icon
       font-size: .3em
       min-width: 1em
-      color: #000
+      color: $light-text
+      color: var(--q-color-light-text)
       opacity: .54
       z-index: 1
 
@@ -64,7 +66,8 @@ $toggle-transition: .22s cubic-bezier(.4,0,.2,1)
           background-color: currentColor
 
         .q-icon
-          color: #fff
+          color: $dark-text
+          color: var(--q-color-dark-text)
           opacity: 1
 
   &.disabled
@@ -72,7 +75,9 @@ $toggle-transition: .22s cubic-bezier(.4,0,.2,1)
 
   &--dark
     .q-toggle__inner
-      color: #fff
+      color: $dark-text
+      color: var(--q-color-dark-text)
+
       &--truthy
         color: $primary
         color: var(--q-color-primary)
@@ -132,3 +137,14 @@ body.desktop
       .q-toggle__thumb:before
         transform: scale3d(1.5, 1.5, 1)
 
+@media (prefers-color-scheme: dark)
+  .q-toggle--dark-auto
+    .q-toggle__inner
+      color: $dark-text
+      color: var(--q-color-dark-text)
+
+      &--truthy
+        color: $primary
+        color: var(--q-color-primary)
+    .q-toggle__thumb:before
+      opacity: .32 !important
diff --git a/ui/src/components/toggle/QToggle.styl b/ui/src/components/toggle/QToggle.styl
index 1972f4723058..5ece0b230afe 100644
--- a/ui/src/components/toggle/QToggle.styl
+++ b/ui/src/components/toggle/QToggle.styl
@@ -30,13 +30,15 @@ $toggle-transition = .22s cubic-bezier(.4,0,.2,1)
       bottom: 0
       left: 0
       border-radius: 50%
-      background: #fff
+      background: $light-page
+      background: var(--q-color-light-page)
       box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)
 
     .q-icon
       font-size: .3em
       min-width: 1em
-      color: #000
+      color: $light-text
+      color: var(--q-color-light-text)
       opacity: .54
       z-index: 1
 
@@ -64,7 +66,8 @@ $toggle-transition = .22s cubic-bezier(.4,0,.2,1)
           background-color: currentColor
 
         .q-icon
-          color: #fff
+          color: $dark-text
+          color: var(--q-color-dark-text)
           opacity: 1
 
   &.disabled
@@ -72,7 +75,9 @@ $toggle-transition = .22s cubic-bezier(.4,0,.2,1)
 
   &--dark
     .q-toggle__inner
-      color: #fff
+      color: $dark-text
+      color: var(--q-color-dark-text)
+
       &--truthy
         color: $primary
         color: var(--q-color-primary)
@@ -132,3 +137,14 @@ body.desktop
       .q-toggle__thumb:before
         transform: scale3d(1.5, 1.5, 1)
 
+@media (prefers-color-scheme: dark)
+  .q-toggle--dark-auto
+    .q-toggle__inner
+      color: $dark-text
+      color: var(--q-color-dark-text)
+
+      &--truthy
+        color: $primary
+        color: var(--q-color-primary)
+    .q-toggle__thumb:before
+      opacity: .32 !important
diff --git a/ui/src/components/tree/QTree.js b/ui/src/components/tree/QTree.js
index f54b34ffc7e4..8627557500ed 100644
--- a/ui/src/components/tree/QTree.js
+++ b/ui/src/components/tree/QTree.js
@@ -81,7 +81,7 @@ export default Vue.extend({
     classes () {
       return `q-tree q-tree--${this.dense === true ? 'dense' : 'standard'}` +
         (this.noConnectors === true ? ' q-tree--no-connectors' : '') +
-        (this.isDark === true ? ' q-tree--dark' : '') +
+        ` q-tree--${this.darkSuffix}` +
         (this.color !== void 0 ? ` text-${this.color}` : '')
     },
 
@@ -420,7 +420,7 @@ export default Vue.extend({
     },
 
     __getSlotScope (node, meta, key) {
-      const scope = { tree: this, node, key, color: this.color, dark: this.isDark }
+      const scope = { tree: this, node, key, color: this.color, dark: this.dark }
 
       injectProp(
         scope,
@@ -545,7 +545,7 @@ export default Vue.extend({
               props: {
                 value: meta.indeterminate === true ? null : meta.ticked,
                 color: this.computedControlColor,
-                dark: this.isDark,
+                dark: this.dark,
                 dense: true,
                 keepColor: true,
                 disable: meta.tickable !== true
diff --git a/ui/src/components/tree/QTree.sass b/ui/src/components/tree/QTree.sass
index 8db591157b05..df99012d2a35 100644
--- a/ui/src/components/tree/QTree.sass
+++ b/ui/src/components/tree/QTree.sass
@@ -78,7 +78,8 @@
     outline: 0
 
   &__node-header-content
-    color: #000
+    color: $light-text
+    color: var(--q-color-light-text)
     transition: color .3s
 
   &__node--selected .q-tree__node-header-content
@@ -122,8 +123,10 @@
   > .q-tree__node--child > .q-tree__node-header
     padding-left: 24px
 
-  &--dark .q-tree__node-header-content
-    color: #fff
+  &--dark
+    .q-tree__node-header-content
+      color: $dark-text
+      color: var(--q-color-dark-text)
 
   &--no-connectors
     .q-tree__node:after,
@@ -184,3 +187,8 @@
     &--rotate
       transform: rotate3d(0, 0, 1, 90deg) #{"/* rtl:ignore */"}
 
+@media (prefers-color-scheme: dark)
+  .q-tree--dark-auto
+    .q-tree__node-header-content
+      color: $dark-text
+      color: var(--q-color-dark-text)
diff --git a/ui/src/components/tree/QTree.styl b/ui/src/components/tree/QTree.styl
index e676753bb32a..58a0fc0be4aa 100644
--- a/ui/src/components/tree/QTree.styl
+++ b/ui/src/components/tree/QTree.styl
@@ -78,7 +78,8 @@
     outline: 0
 
   &__node-header-content
-    color: #000
+    color: $light-text
+    color: var(--q-color-light-text)
     transition: color .3s
 
   &__node--selected .q-tree__node-header-content
@@ -122,8 +123,10 @@
   > .q-tree__node--child > .q-tree__node-header
     padding-left: 24px
 
-  &--dark .q-tree__node-header-content
-    color: #fff
+  &--dark
+    .q-tree__node-header-content
+      color: $dark-text
+      color: var(--q-color-dark-text)
 
   &--no-connectors
     .q-tree__node:after,
@@ -184,3 +187,8 @@
     &--rotate
       transform: rotate3d(0, 0, 1, 90deg) /* rtl:ignore */
 
+@media (prefers-color-scheme: dark)
+  .q-tree--dark-auto
+    .q-tree__node-header-content
+      color: $dark-text
+      color: var(--q-color-dark-text)
diff --git a/ui/src/components/uploader/QUploader.sass b/ui/src/components/uploader/QUploader.sass
index 55e9afabf1ce..05f801cb296c 100644
--- a/ui/src/components/uploader/QUploader.sass
+++ b/ui/src/components/uploader/QUploader.sass
@@ -2,7 +2,6 @@
   box-shadow: $shadow-2
   border-radius: $generic-border-radius
   vertical-align: top
-  background: #fff
   position: relative
 
   width: 320px
@@ -42,7 +41,8 @@
     border-top-right-radius: inherit
     background-color: $primary
     background-color: var(--q-color-primary)
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
     width: 100%
 
   &__spinner
@@ -59,7 +59,8 @@
 
   &__overlay
     font-size: 36px
-    color: #000
+    color: $light-text
+    color: var(--q-color-light-text)
     background-color: rgba(255,255,255,.6)
 
   &__list
@@ -78,7 +79,8 @@
       font-size: 24px
 
     &--img
-      color: #fff
+      color: $dark-text
+      color: var(--q-color-dark-text)
       height: 200px
       min-width: 200px
       background-position: 50% 50%
@@ -89,7 +91,8 @@
         content: none
 
       .q-circular-progress
-        color: #fff
+        color: $dark-text
+        color: var(--q-color-dark-text)
 
       .q-uploader__file-header
         padding-bottom: 24px
@@ -132,4 +135,17 @@
     .q-uploader__dnd, .q-uploader__overlay
       background: rgba(255,255,255,.3)
     .q-uploader__overlay
-      color: #fff
+      color: $dark-text
+      color: var(--q-color-dark-text)
+
+@media (prefers-color-scheme: dark)
+  .q-uploader--dark-auto
+    border-color: $separator-dark-color
+
+    .q-uploader__file
+      border-color: $separator-dark-color
+    .q-uploader__dnd, .q-uploader__overlay
+      background: rgba(255,255,255,.3)
+    .q-uploader__overlay
+      color: $dark-text
+      color: var(--q-color-dark-text)
diff --git a/ui/src/components/uploader/QUploader.styl b/ui/src/components/uploader/QUploader.styl
index a888b622eed9..2eb766ec21b1 100644
--- a/ui/src/components/uploader/QUploader.styl
+++ b/ui/src/components/uploader/QUploader.styl
@@ -2,7 +2,6 @@
   box-shadow: $shadow-2
   border-radius: $generic-border-radius
   vertical-align: top
-  background: #fff
   position: relative
 
   width: 320px
@@ -42,7 +41,8 @@
     border-top-right-radius: inherit
     background-color: $primary
     background-color: var(--q-color-primary)
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
     width: 100%
 
   &__spinner
@@ -59,7 +59,8 @@
 
   &__overlay
     font-size: 36px
-    color: #000
+    color: $light-text
+    color: var(--q-color-light-text)
     background-color: rgba(255,255,255,.6)
 
   &__list
@@ -78,7 +79,8 @@
       font-size: 24px
 
     &--img
-      color: #fff
+      color: $dark-text
+      color: var(--q-color-dark-text)
       height: 200px
       min-width: 200px
       background-position: 50% 50%
@@ -89,7 +91,8 @@
         content: none
 
       .q-circular-progress
-        color: #fff
+        color: $dark-text
+        color: var(--q-color-dark-text)
 
       .q-uploader__file-header
         padding-bottom: 24px
@@ -132,4 +135,17 @@
     .q-uploader__dnd, .q-uploader__overlay
       background: rgba(255,255,255,.3)
     .q-uploader__overlay
-      color: #fff
+      color: $dark-text
+      color: var(--q-color-dark-text)
+
+@media (prefers-color-scheme: dark)
+  .q-uploader--dark-auto
+    border-color: $separator-dark-color
+
+    .q-uploader__file
+      border-color: $separator-dark-color
+    .q-uploader__dnd, .q-uploader__overlay
+      background: rgba(255,255,255,.3)
+    .q-uploader__overlay
+      color: $dark-text
+      color: var(--q-color-dark-text)
diff --git a/ui/src/components/uploader/QUploaderBase.js b/ui/src/components/uploader/QUploaderBase.js
index a3bdfc462740..37fc990e5f59 100644
--- a/ui/src/components/uploader/QUploaderBase.js
+++ b/ui/src/components/uploader/QUploaderBase.js
@@ -438,7 +438,7 @@ export default Vue.extend({
     return h('div', {
       staticClass: 'q-uploader column no-wrap',
       class: {
-        'q-uploader--dark q-dark': this.isDark,
+        [`q-uploader--${this.darkSuffix} q-${this.darkSuffix}`]: true,
         'q-uploader--bordered': this.bordered,
         'q-uploader--square no-border-radius': this.square,
         'q-uploader--flat no-shadow': this.flat,
diff --git a/ui/src/css/core/colors.sass b/ui/src/css/core/colors.sass
index 668f270ac194..1a4f08d7d0ec 100644
--- a/ui/src/css/core/colors.sass
+++ b/ui/src/css/core/colors.sass
@@ -7,8 +7,16 @@
   --q-color-info:         #{$info}
   --q-color-warning:      #{$warning}
   --q-color-dark:         #{$dark}
+  --q-color-light-text:   #{$light-text}
+  --q-color-light-page:   #{$light-page}
+  --q-color-dark-text:    #{$dark-text}
   --q-color-dark-page:    #{$dark-page}
   --q-color-backdrop-background: #{$backdrop-background}
+  --q-color-notify-background:   #{$notify-background}
+  --q-color-chip-background-light: #{$chip-background-light}
+  --q-color-chip-background-dark:  #{$chip-background-dark}
+  --q-color-dialog-plugin-light: #{$dialog-plugin-light}
+  --q-color-dialog-plugin-dark:  #{$dialog-plugin-dark}
 
 .text-dark
   color: $dark !important
@@ -17,6 +25,30 @@
   background: $dark !important
   background: var(--q-color-dark) !important
 
+.text-dialog-plugin-light,
+.text-dialog-plugin-dark-auto
+  color: $dialog-plugin-light !important
+  color: var(--q-color-dialog-plugin-light) !important
+.bg-dialog-plugin-light,
+.bg-dialog-plugin-dark-auto
+  background: $dialog-plugin-light !important
+  background: var(--q-color-dialog-plugin-light) !important
+
+.text-dialog-plugin-dark
+  color: $dialog-plugin-dark !important
+  color: var(--q-color-dialog-plugin-dark) !important
+.bg-dialog-plugin-dark
+  background: $dialog-plugin-dark !important
+  background: var(--q-color-dialog-plugin-dark) !important
+
+@media (prefers-color-scheme: dark)
+  .text-dialog-plugin-dark-auto
+    color: $dialog-plugin-dark !important
+    color: var(--q-color-dialog-plugin-dark) !important
+  .bg-dialog-plugin-dark-auto
+    background: $dialog-plugin-dark !important
+    background: var(--q-color-dialog-plugin-dark) !important
+
 .text-primary
   color: $primary !important
   color: var(--q-color-primary) !important
diff --git a/ui/src/css/core/colors.styl b/ui/src/css/core/colors.styl
index 1eacc6d215c4..09eb753831c2 100644
--- a/ui/src/css/core/colors.styl
+++ b/ui/src/css/core/colors.styl
@@ -7,8 +7,16 @@
   --q-color-info:         $info
   --q-color-warning:      $warning
   --q-color-dark:         $dark
+  --q-color-light-text:   $light-text
+  --q-color-light-page:   $light-page
+  --q-color-dark-text:    $dark-text
   --q-color-dark-page:    $dark-page
   --q-color-backdrop-background: $backdrop-background
+  --q-color-notify-background:   $notify-background
+  --q-color-chip-background-light: $chip-background-light
+  --q-color-chip-background-dark:  $chip-background-dark
+  --q-color-dialog-plugin-light: $dialog-plugin-light
+  --q-color-dialog-plugin-dark:  $dialog-plugin-dark
 
 .text-dark
   color: $dark !important
@@ -17,6 +25,30 @@
   background: $dark !important
   background: var(--q-color-dark) !important
 
+.text-dialog-plugin-light,
+.text-dialog-plugin-dark-auto
+  color: $dialog-plugin-light !important
+  color: var(--q-color-dialog-plugin-light) !important
+.bg-dialog-plugin-light,
+.bg-dialog-plugin-dark-auto
+  background: $dialog-plugin-light !important
+  background: var(--q-color-dialog-plugin-light) !important
+
+.text-dialog-plugin-dark
+  color: $dialog-plugin-dark !important
+  color: var(--q-color-dialog-plugin-dark) !important
+.bg-dialog-plugin-dark
+  background: $dialog-plugin-dark !important
+  background: var(--q-color-dialog-plugin-dark) !important
+
+@media (prefers-color-scheme: dark)
+  .text-dialog-plugin-dark-auto
+    color: $dialog-plugin-dark !important
+    color: var(--q-color-dialog-plugin-dark) !important
+  .bg-dialog-plugin-dark-auto
+    background: $dialog-plugin-dark !important
+    background: var(--q-color-dialog-plugin-dark) !important
+
 .text-primary
   color: $primary !important
   color: var(--q-color-primary) !important
diff --git a/ui/src/css/core/dark.sass b/ui/src/css/core/dark.sass
index cec2f364cc93..553588652b29 100644
--- a/ui/src/css/core/dark.sass
+++ b/ui/src/css/core/dark.sass
@@ -1,9 +1,33 @@
+body.body--light,
+body.body--dark-auto,
+.q-light,
+.q-dark-auto
+  color: $light-text
+  color: var(--q-color-light-text)
+  background: $light-page
+  background: var(--q-color-light-page)
+
 body.body--dark
-  color: #fff
+  color: $dark-text
+  color: var(--q-color-dark-text)
   background: $dark-page
   background: var(--q-color-dark-page)
 
 .q-dark
-  color: #fff
-  background: $grey-9
+  color: $dark-text
+  color: var(--q-color-dark-text)
+  background: $dark
   background: var(--q-color-dark)
+
+@media (prefers-color-scheme: dark)
+  body.body--dark-auto
+    color: $dark-text
+    color: var(--q-color-dark-text)
+    background: $dark-page
+    background: var(--q-color-dark-page)
+
+  .q-dark-auto
+    color: $dark-text
+    color: var(--q-color-dark-text)
+    background: $dark
+    background: var(--q-color-dark)
diff --git a/ui/src/css/core/dark.styl b/ui/src/css/core/dark.styl
index cec2f364cc93..553588652b29 100644
--- a/ui/src/css/core/dark.styl
+++ b/ui/src/css/core/dark.styl
@@ -1,9 +1,33 @@
+body.body--light,
+body.body--dark-auto,
+.q-light,
+.q-dark-auto
+  color: $light-text
+  color: var(--q-color-light-text)
+  background: $light-page
+  background: var(--q-color-light-page)
+
 body.body--dark
-  color: #fff
+  color: $dark-text
+  color: var(--q-color-dark-text)
   background: $dark-page
   background: var(--q-color-dark-page)
 
 .q-dark
-  color: #fff
-  background: $grey-9
+  color: $dark-text
+  color: var(--q-color-dark-text)
+  background: $dark
   background: var(--q-color-dark)
+
+@media (prefers-color-scheme: dark)
+  body.body--dark-auto
+    color: $dark-text
+    color: var(--q-color-dark-text)
+    background: $dark-page
+    background: var(--q-color-dark-page)
+
+  .q-dark-auto
+    color: $dark-text
+    color: var(--q-color-dark-text)
+    background: $dark
+    background: var(--q-color-dark)
diff --git a/ui/src/css/variables.sass b/ui/src/css/variables.sass
index f0c7fc2bd927..0377fd25c3d5 100644
--- a/ui/src/css/variables.sass
+++ b/ui/src/css/variables.sass
@@ -78,8 +78,13 @@ $primary   : #1976D2 !default
 $secondary : #26A69A !default
 $accent    : #9C27B0 !default
 
+// used by light mode
+$light-page : #ffffff !default
+$light-text : #000000 !default
+
 // used by dark mode
 $dark-page : #121212 !default
+$dark-text : #ffffff !default
 $dark      : #1d1d1d !default
 
 $positive  : #21BA45 !default
@@ -87,6 +92,14 @@ $negative  : #C10015 !default
 $info      : #31CCEC !default
 $warning   : #F2C037 !default
 
+$dialog-plugin-light : $primary !default
+$dialog-plugin-dark  : #ffc107 !default
+
+$notify-background   : #323232 !default
+
+$chip-background-light : #e0e0e0 !default
+$chip-background-dark  : #323232 !default
+
 $backdrop-background : #000000 !default
 
 $dimmed-background       : rgba(0, 0, 0, .4) !default
diff --git a/ui/src/css/variables.styl b/ui/src/css/variables.styl
index 553d076b4d0d..bc77bbd86bc0 100644
--- a/ui/src/css/variables.styl
+++ b/ui/src/css/variables.styl
@@ -165,8 +165,13 @@ $primary   ?= #1976D2
 $secondary ?= #26A69A
 $accent    ?= #9C27B0
 
+// used by light mode
+$light-page ?= #ffffff
+$light-text ?= #000000
+
 // used by dark mode
 $dark-page ?= #121212
+$dark-text ?= #ffffff
 $dark      ?= #1d1d1d
 
 $positive  ?= #21BA45
@@ -174,6 +179,14 @@ $negative  ?= #C10015
 $info      ?= #31CCEC
 $warning   ?= #F2C037
 
+$dialog-plugin-light ?= $primary
+$dialog-plugin-dark  ?= #ffc107
+
+$notify-background   ?= #323232
+
+$chip-background-light ?= #e0e0e0
+$chip-background-dark  ?= #323232
+
 $backdrop-background ?= #000000
 
 $dimmed-background       ?= rgba(0, 0, 0, .4)
@@ -483,12 +496,12 @@ $z-max                ?= 9998
 
 $shadow-color         ?= black
 $shadow-transition    ?= box-shadow .28s cubic-bezier(.4, 0, .2, 1)
-$inset-shadow         ?= 0 7px 9px -7px rgba($shadow-color, .7) inset
-$inset-shadow-down    ?= 0 -7px 9px -7px rgba($shadow-color, .7) inset
+$inset-shadow         ?= 0 7px 9px -7px alpha($shadow-color, .7) inset
+$inset-shadow-down    ?= 0 -7px 9px -7px alpha($shadow-color, .7) inset
 
-$elevation-umbra      ?= rgba($shadow-color, .2)
-$elevation-penumbra   ?= rgba($shadow-color, .14)
-$elevation-ambient    ?= rgba($shadow-color, .12)
+$elevation-umbra      ?= alpha($shadow-color, .2)
+$elevation-penumbra   ?= alpha($shadow-color, .14)
+$elevation-ambient    ?= alpha($shadow-color, .12)
 
 $shadow-0  ?= 0 0 0 $elevation-umbra, 0 0 0 $elevation-penumbra, 0 0 0 $elevation-ambient
 $shadow-1  ?= 0 1px 3px $elevation-umbra, 0 1px 1px $elevation-penumbra, 0 2px 1px -1px $elevation-ambient
diff --git a/ui/src/mixins/checkbox.js b/ui/src/mixins/checkbox.js
index fd47efb3d178..a85e9b191d0e 100644
--- a/ui/src/mixins/checkbox.js
+++ b/ui/src/mixins/checkbox.js
@@ -77,7 +77,7 @@ export default {
     classes () {
       return `q-${this.type} cursor-pointer no-outline row inline no-wrap items-center` +
         (this.disable === true ? ' disabled' : '') +
-        (this.isDark === true ? ` q-${this.type}--dark` : '') +
+        ` q-${this.type}--${this.darkSuffix}` +
         (this.dense === true ? ` q-${this.type}--dense` : '') +
         (this.leftLabel === true ? ' reverse' : '')
     },
diff --git a/ui/src/mixins/dark.js b/ui/src/mixins/dark.js
index f376b5037391..9f9f7421c23a 100644
--- a/ui/src/mixins/dark.js
+++ b/ui/src/mixins/dark.js
@@ -7,10 +7,14 @@ export default {
   },
 
   computed: {
-    isDark () {
-      return this.dark === null
-        ? this.$q.dark.isActive
-        : this.dark
+    darkSuffix () {
+      if (this.dark === null && this.$q.dark.isActive === null) {
+        return 'dark-auto'
+      }
+
+      return this.dark === true || (this.dark === null && this.$q.dark.isActive === true)
+        ? 'dark'
+        : 'light'
     }
   }
 }
diff --git a/ui/src/plugins/Dark.js b/ui/src/plugins/Dark.js
index 4b777ee433c1..8617e83721da 100644
--- a/ui/src/plugins/Dark.js
+++ b/ui/src/plugins/Dark.js
@@ -4,23 +4,25 @@ import { isSSR, fromSSR } from './Platform.js'
 import { noop } from '../utils/event.js'
 
 const Dark = {
-  isActive: false,
+  isActive: null,
   mode: false,
 
   install ($q, queues, { dark }) {
-    this.isActive = dark === true
+    this.isActive = dark === 'auto' ? null : dark === true
 
     if (isSSR === true) {
       queues.server.push((q, ctx) => {
         q.dark = {
-          isActive: false,
+          isActive: null,
           mode: false,
           set: val => {
             ctx.ssr.Q_BODY_CLASSES = ctx.ssr.Q_BODY_CLASSES
               .replace(' body--light', '')
-              .replace(' body--dark', '') + ` body--${val === true ? 'dark' : 'light'}`
+              .replace(' body--dark-auto', '')
+              .replace(' body--dark', '') +
+              ` body--${val === true ? 'dark' : (val === 'auto' ? 'dark-auto' : 'light')}`
 
-            q.dark.isActive = val === true
+            q.dark.isActive = val === 'auto' ? null : val === true
             q.dark.mode = val
           },
           toggle: () => {
@@ -50,6 +52,7 @@ const Dark = {
       ssrSet(initialVal)
 
       queues.takeover.push(() => {
+        document.body.classList.remove('body--dark-auto')
         this.set = originalSet
         this.set(this.__fromSSR)
       })
diff --git a/ui/src/plugins/Dark.json b/ui/src/plugins/Dark.json
index 0107bfa45bd2..d0870d957e26 100644
--- a/ui/src/plugins/Dark.json
+++ b/ui/src/plugins/Dark.json
@@ -10,7 +10,7 @@
   "props": {
     "isActive": {
       "type": "Boolean",
-      "desc": "Is Dark mode active?",
+      "desc": "Is Dark mode active? Has value `null` when on SSR and dark set to `auto`",
       "reactive": true
     },
 
diff --git a/ui/src/plugins/Loading.sass b/ui/src/plugins/Loading.sass
index 91749188d34f..207f652d8738 100644
--- a/ui/src/plugins/Loading.sass
+++ b/ui/src/plugins/Loading.sass
@@ -1,5 +1,6 @@
 .q-loading
-  color: #000
+  color: $light-text
+  color: var(--q-color-light-text)
 
   // override q-transition--fade's absolute position
   position: fixed !important
diff --git a/ui/src/plugins/Loading.styl b/ui/src/plugins/Loading.styl
index 91749188d34f..207f652d8738 100644
--- a/ui/src/plugins/Loading.styl
+++ b/ui/src/plugins/Loading.styl
@@ -1,5 +1,6 @@
 .q-loading
-  color: #000
+  color: $light-text
+  color: var(--q-color-light-text)
 
   // override q-transition--fade's absolute position
   position: fixed !important
diff --git a/ui/src/plugins/Notify.sass b/ui/src/plugins/Notify.sass
index 4f21a59108a8..7483457db4d5 100644
--- a/ui/src/plugins/Notify.sass
+++ b/ui/src/plugins/Notify.sass
@@ -33,8 +33,10 @@ body.q-ios-padding .q-notifications__list
 
   max-width: 95vw
 
-  background: #323232
-  color: #fff
+  background: $notify-background
+  background: var(--q-color-notify-background)
+  color: $dark-text
+  color: var(--q-color-dark-text)
 
   font-size: 14px
 
@@ -76,7 +78,8 @@ body.q-ios-padding .q-notifications__list
     box-shadow: $shadow-1
     background-color: $negative
     background-color: var(--q-color-negative)
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
     border-radius: $generic-border-radius
     font-size: 12px
     line-height: 12px
diff --git a/ui/src/plugins/Notify.styl b/ui/src/plugins/Notify.styl
index 4f21a59108a8..7483457db4d5 100644
--- a/ui/src/plugins/Notify.styl
+++ b/ui/src/plugins/Notify.styl
@@ -33,8 +33,10 @@ body.q-ios-padding .q-notifications__list
 
   max-width: 95vw
 
-  background: #323232
-  color: #fff
+  background: $notify-background
+  background: var(--q-color-notify-background)
+  color: $dark-text
+  color: var(--q-color-dark-text)
 
   font-size: 14px
 
@@ -76,7 +78,8 @@ body.q-ios-padding .q-notifications__list
     box-shadow: $shadow-1
     background-color: $negative
     background-color: var(--q-color-negative)
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
     border-radius: $generic-border-radius
     font-size: 12px
     line-height: 12px