From 05c4fb86e799eda4b15bb60bc7525d8cafcb16bc Mon Sep 17 00:00:00 2001
From: Dan Popescu <pdan.popescu@gmail.com>
Date: Tue, 4 Aug 2020 11:00:44 +0300
Subject: [PATCH] feat(dark): make dark mode work with auto on SSR #7530

Not solved problems:
- vmColor in DialogPlugin
- classes in QStepper

Once these are solved isDark can be removed.
---
 ui/dev/quasar.conf.js                         |  3 ++
 ui/dev/src/App.vue                            |  2 +-
 .../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/banner/QBanner.js           |  2 +-
 ui/src/components/bar/QBar.js                 |  3 +-
 ui/src/components/bar/QBar.sass               |  4 +++
 ui/src/components/bar/QBar.styl               |  4 +++
 ui/src/components/card/QCard.js               |  3 +-
 ui/src/components/card/QCard.sass             |  4 +++
 ui/src/components/card/QCard.styl             |  4 +++
 ui/src/components/carousel/QCarousel.js       |  3 +-
 ui/src/components/checkbox/QCheckbox.sass     | 10 ++++++
 ui/src/components/checkbox/QCheckbox.styl     | 10 ++++++
 ui/src/components/chip/QChip.js               |  2 +-
 ui/src/components/chip/QChip.sass             |  5 +++
 ui/src/components/chip/QChip.styl             |  5 +++
 ui/src/components/color/QColor.js             | 13 ++++---
 ui/src/components/color/QColor.sass           |  7 ++++
 ui/src/components/color/QColor.styl           |  7 ++++
 ui/src/components/date/QDate.js               |  3 +-
 ui/src/components/date/QDate.sass             |  4 +++
 ui/src/components/date/QDate.styl             |  4 +++
 .../dialog-bottom-sheet/BottomSheet.js        |  8 ++---
 .../components/dialog-plugin/DialogPlugin.js  | 13 ++++---
 ui/src/components/drawer/QDrawer.js           |  3 +-
 ui/src/components/editor/QEditor.js           |  5 ++-
 ui/src/components/editor/QEditor.sass         | 13 +++++++
 ui/src/components/editor/QEditor.styl         | 13 +++++++
 .../expansion-item/QExpansionItem.js          |  9 +++--
 ui/src/components/field/QField.js             |  2 +-
 ui/src/components/field/QField.sass           | 34 +++++++++++++++++++
 ui/src/components/field/QField.styl           | 34 +++++++++++++++++++
 .../components/inner-loading/QInnerLoading.js |  3 +-
 .../inner-loading/QInnerLoading.sass          |  5 +++
 .../inner-loading/QInnerLoading.styl          |  5 +++
 ui/src/components/item/QItem.js               |  2 +-
 ui/src/components/item/QItem.sass             | 19 +++++++++++
 ui/src/components/item/QItem.styl             | 19 +++++++++++
 ui/src/components/item/QList.js               |  3 +-
 ui/src/components/layout/QLayout.sass         |  5 +++
 ui/src/components/layout/QLayout.styl         |  5 +++
 .../linear-progress/QLinearProgress.js        |  3 +-
 .../linear-progress/QLinearProgress.sass      |  7 +++-
 .../linear-progress/QLinearProgress.styl      |  7 +++-
 .../components/markup-table/QMarkupTable.js   |  3 +-
 ui/src/components/menu/QMenu.js               |  2 +-
 .../components/option-group/QOptionGroup.js   | 15 ++++----
 ui/src/components/pagination/QPagination.js   |  5 ++-
 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  |  3 +-
 .../components/scroll-area/QScrollArea.sass   |  5 +++
 .../components/scroll-area/QScrollArea.styl   |  5 +++
 ui/src/components/select/QSelect.js           | 14 ++++++--
 ui/src/components/separator/QSeparator.js     |  5 ++-
 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    |  3 +-
 ui/src/components/slider/QSlider.sass         |  7 ++++
 ui/src/components/slider/QSlider.styl         |  7 ++++
 ui/src/components/slider/slider-utils.js      |  3 +-
 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         |  5 ++-
 ui/src/components/stepper/QStepper.sass       | 30 +++++++++++++---
 ui/src/components/stepper/QStepper.styl       | 30 +++++++++++++---
 ui/src/components/tab-panels/QTabPanels.js    |  3 +-
 ui/src/components/table/QTable.js             | 20 +++++------
 ui/src/components/table/QTable.sass           | 20 ++++++++++-
 ui/src/components/table/QTable.styl           | 20 ++++++++++-
 ui/src/components/table/table-body.js         |  2 +-
 ui/src/components/table/table-bottom.js       |  2 +-
 ui/src/components/table/table-grid.js         |  4 +--
 ui/src/components/table/table-header.js       |  2 +-
 ui/src/components/time/QTime.js               |  3 +-
 ui/src/components/time/QTime.sass             |  4 +++
 ui/src/components/time/QTime.styl             |  4 +++
 ui/src/components/timeline/QTimeline.js       |  3 +-
 ui/src/components/timeline/QTimeline.sass     |  7 ++++
 ui/src/components/timeline/QTimeline.styl     |  7 ++++
 ui/src/components/toggle/QToggle.sass         | 11 ++++++
 ui/src/components/toggle/QToggle.styl         | 11 ++++++
 ui/src/components/tree/QTree.js               |  9 +++--
 ui/src/components/tree/QTree.sass             |  9 +++--
 ui/src/components/tree/QTree.styl             |  9 +++--
 ui/src/components/uploader/QUploader.sass     | 11 ++++++
 ui/src/components/uploader/QUploader.styl     | 11 ++++++
 ui/src/components/uploader/QUploaderBase.js   |  2 +-
 ui/src/css/core/dark.sass                     | 10 ++++++
 ui/src/css/core/dark.styl                     | 10 ++++++
 ui/src/mixins/checkbox.js                     |  3 +-
 ui/src/mixins/dark.js                         |  8 +++++
 ui/src/plugins/Dark.js                        |  6 ++--
 102 files changed, 623 insertions(+), 135 deletions(-)

diff --git a/ui/dev/quasar.conf.js b/ui/dev/quasar.conf.js
index a54226e2b979..0cf806af9364 100644
--- a/ui/dev/quasar.conf.js
+++ b/ui/dev/quasar.conf.js
@@ -25,6 +25,9 @@ module.exports = function (ctx) {
     framework: {
       // iconSet: 'svg-mdi-v4',
       // config: { ripple: { early: true } },
+      config: {
+        dark: 'auto'
+      },
       importStrategy: 'all'
     },
 
diff --git a/ui/dev/src/App.vue b/ui/dev/src/App.vue
index df60007cb0c0..5a35b6550681 100644
--- a/ui/dev/src/App.vue
+++ b/ui/dev/src/App.vue
@@ -10,7 +10,7 @@
     >
       <q-btn dense flat size="sm" icon="visibility" @click="showSelector = !showSelector" class="absolute-top-right z-top" />
       <template v-if="showSelector">
-        <q-toggle :value="$q.dark.isActive" @input="$q.dark.toggle" :label="`Dark Mode (${$q.dark.mode})`" />
+        <q-toggle :value="$q.dark.mode" @input="val => $q.dark.set(val)" toggle-indeterminate indeterminate-value="auto" :label="`Dark Mode (${$q.dark.mode})`" />
 
         <q-btn dense flat size="sm" :icon="lang === 'he' ? 'navigate_before' : 'navigate_next'" @click="lang = lang === 'en-us' ? 'he' : 'en-us'" class="absolute-bottom-right z-top" />
         <q-select
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 1c04b50babd5..987c3766ef0a 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 d91c500e1e0b..b11e7e68f8a1 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/banner/QBanner.js b/ui/src/components/banner/QBanner.js
index 34568906cd7b..c39727d87c96 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/bar/QBar.js b/ui/src/components/bar/QBar.js
index 7618e6990cff..abe2b9807204 100644
--- a/ui/src/components/bar/QBar.js
+++ b/ui/src/components/bar/QBar.js
@@ -18,8 +18,7 @@ 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 7095fc325e34..a2a17dad29a6 100644
--- a/ui/src/components/card/QCard.js
+++ b/ui/src/components/card/QCard.js
@@ -19,8 +19,7 @@ export default Vue.extend({
 
   computed: {
     classes () {
-      return 'q-card' +
-        (this.isDark === true ? ' q-card--dark q-dark' : '') +
+      return `q-card 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 70096551eca3..523655f753f6 100644
--- a/ui/src/components/card/QCard.sass
+++ b/ui/src/components/card/QCard.sass
@@ -94,3 +94,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 70096551eca3..523655f753f6 100644
--- a/ui/src/components/card/QCard.styl
+++ b/ui/src/components/card/QCard.styl
@@ -94,3 +94,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 233846c4bc78..9a6f81015689 100644
--- a/ui/src/components/carousel/QCarousel.js
+++ b/ui/src/components/carousel/QCarousel.js
@@ -57,9 +57,8 @@ export default Vue.extend({
     },
 
     classes () {
-      return `q-carousel q-panel-parent q-carousel--with${this.padding === true ? '' : 'out'}-padding` +
+      return `q-carousel q-panel-parent q-carousel--with${this.padding === true ? '' : 'out'}-padding q-carousel--${this.darkSuffix} q-${this.darkSuffix}` +
         (this.inFullscreen === true ? ' fullscreen' : '') +
-        (this.isDark === true ? ' q-carousel--dark q-dark' : '') +
         (this.arrows === true ? ` q-carousel--arrows-${this.direction}` : '') +
         (this.navigation === true ? ` q-carousel--navigation-${this.navigationPositionComputed}` : '')
     },
diff --git a/ui/src/components/checkbox/QCheckbox.sass b/ui/src/components/checkbox/QCheckbox.sass
index afb6ffcbc64d..f63640b1c600 100644
--- a/ui/src/components/checkbox/QCheckbox.sass
+++ b/ui/src/components/checkbox/QCheckbox.sass
@@ -113,3 +113,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 947f4551457e..7679e0ce19de 100644
--- a/ui/src/components/checkbox/QCheckbox.styl
+++ b/ui/src/components/checkbox/QCheckbox.styl
@@ -113,3 +113,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 663f62f2eff6..9d8a83ac5542 100644
--- a/ui/src/components/chip/QChip.js
+++ b/ui/src/components/chip/QChip.js
@@ -73,7 +73,7 @@ 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.darkSuffix} q-${this.darkSuffix}`]: true
       }
     },
 
diff --git a/ui/src/components/chip/QChip.sass b/ui/src/components/chip/QChip.sass
index 42f054e15db4..5d5f752f1a60 100644
--- a/ui/src/components/chip/QChip.sass
+++ b/ui/src/components/chip/QChip.sass
@@ -96,3 +96,8 @@ $chip-height: 2em
 
 body.desktop .q-chip--clickable:focus
   box-shadow: $shadow-1
+
+@media (prefers-color-scheme: dark)
+  .q-chip--dark-auto
+    .q-chip__icon
+      color: inherit
diff --git a/ui/src/components/chip/QChip.styl b/ui/src/components/chip/QChip.styl
index 69a4b1fd1510..11a21507d24e 100644
--- a/ui/src/components/chip/QChip.styl
+++ b/ui/src/components/chip/QChip.styl
@@ -96,3 +96,8 @@ $chip-height = 2em
 
 body.desktop .q-chip--clickable:focus
   box-shadow: $shadow-1
+
+@media (prefers-color-scheme: dark)
+  .q-chip--dark-auto
+    .q-chip__icon
+      color: inherit
diff --git a/ui/src/components/color/QColor.js b/ui/src/components/color/QColor.js
index af1cb4d77c99..65d0f913ee1e 100644
--- a/ui/src/components/color/QColor.js
+++ b/ui/src/components/color/QColor.js
@@ -190,12 +190,11 @@ export default Vue.extend({
     },
 
     classes () {
-      return 'q-color-picker' +
+      return `q-color-picker q-color-picker--${this.darkSuffix} q-${this.darkSuffix}` +
         (this.bordered === true ? ' q-color-picker--bordered' : '') +
         (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' : '')
+        (this.disable === true ? ' disabled' : '')
     },
 
     attrs () {
@@ -459,7 +458,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', {
@@ -491,7 +490,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', {
@@ -524,7 +523,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),
@@ -554,7 +553,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 d91e722b4108..75551fa84d93 100644
--- a/ui/src/components/color/QColor.sass
+++ b/ui/src/components/color/QColor.sass
@@ -180,7 +180,14 @@
     background: inherit
 
   &--dark
+    .q-color-picker__tune-tab input
+      border: 1px solid rgba(#fff, .3)
+
+    .q-slider
+      color: $grey-5
 
+@media (prefers-color-scheme: dark)
+  .q-color-picker--dark-auto
     .q-color-picker__tune-tab input
       border: 1px solid rgba(#fff, .3)
 
diff --git a/ui/src/components/color/QColor.styl b/ui/src/components/color/QColor.styl
index 1f8e9d7220be..5005f6708f3b 100644
--- a/ui/src/components/color/QColor.styl
+++ b/ui/src/components/color/QColor.styl
@@ -180,7 +180,14 @@
     background: inherit
 
   &--dark
+    .q-color-picker__tune-tab input
+      border: 1px solid alpha(#fff, .3)
+
+    .q-slider
+      color: $grey-5
 
+@media (prefers-color-scheme: dark)
+  .q-color-picker--dark-auto
     .q-color-picker__tune-tab input
       border: 1px solid alpha(#fff, .3)
 
diff --git a/ui/src/components/date/QDate.js b/ui/src/components/date/QDate.js
index 9b139e9a6196..f6585f556acb 100644
--- a/ui/src/components/date/QDate.js
+++ b/ui/src/components/date/QDate.js
@@ -119,8 +119,7 @@ export default Vue.extend({
   computed: {
     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' : '') +
+      return `q-date q-date--${type} q-date--${type}-${this.minimal === true ? 'minimal' : 'standard'} 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 8d06bb1ad2fd..a1cc719afebe 100644
--- a/ui/src/components/date/QDate.sass
+++ b/ui/src/components/date/QDate.sass
@@ -211,3 +211,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 8d06bb1ad2fd..a1cc719afebe 100644
--- a/ui/src/components/date/QDate.styl
+++ b/ui/src/components/date/QDate.styl
@@ -211,3 +211,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 7812a65e383a..dee235dd4cdc 100644
--- a/ui/src/components/dialog-bottom-sheet/BottomSheet.js
+++ b/ui/src/components/dialog-bottom-sheet/BottomSheet.js
@@ -64,7 +64,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',
@@ -100,14 +100,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: () => this.onOk(action),
@@ -168,7 +168,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 5fd9cd415660..8a46c29286cd 100644
--- a/ui/src/components/dialog-plugin/DialogPlugin.js
+++ b/ui/src/components/dialog-plugin/DialogPlugin.js
@@ -145,7 +145,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', {
@@ -174,7 +174,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 }
@@ -256,13 +256,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 } })
       )
     }
 
@@ -285,11 +285,10 @@ export default Vue.extend({
       })
     }, [
       h(QCard, {
-        staticClass: 'q-dialog-plugin' +
-          (this.isDark === true ? ' q-dialog-plugin--dark q-dark' : ''),
+        staticClass: `q-dialog-plugin q-dialog-plugin--${this.darkSuffix} q-${this.darkSuffix}`,
         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 c754727458eb..ffb8b9188056 100644
--- a/ui/src/components/drawer/QDrawer.js
+++ b/ui/src/components/drawer/QDrawer.js
@@ -278,9 +278,8 @@ export default Vue.extend({
     },
 
     classes () {
-      return `q-drawer--${this.side}` +
+      return `q-drawer--${this.side} q-drawer--${this.darkSuffix} q-${this.darkSuffix}` +
         (this.bordered === true ? ' q-drawer--bordered' : '') +
-        (this.isDark === true ? ' q-drawer--dark q-dark' : '') +
         (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 28cb1599f28b..acb5f038ef08 100644
--- a/ui/src/components/editor/QEditor.js
+++ b/ui/src/components/editor/QEditor.js
@@ -242,13 +242,12 @@ export default Vue.extend({
     },
 
     classes () {
-      return `q-editor q-editor--${this.isViewingSource === true ? 'source' : 'default'}` +
+      return `q-editor q-editor--${this.isViewingSource === true ? 'source' : 'default'} q-editor--${this.darkSuffix} q-${this.darkSuffix}` +
         (this.disable === true ? ' disabled' : '') +
         (this.inFullscreen === true ? ' fullscreen column' : '') +
         (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' : '')
+        (this.dense === true ? ' q-editor--dense' : '')
     },
 
     innerClass () {
diff --git a/ui/src/components/editor/QEditor.sass b/ui/src/components/editor/QEditor.sass
index c8bdfdc0ed08..7e622e46c358 100644
--- a/ui/src/components/editor/QEditor.sass
+++ b/ui/src/components/editor/QEditor.sass
@@ -66,7 +66,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 c8bdfdc0ed08..7e622e46c358 100644
--- a/ui/src/components/editor/QEditor.styl
+++ b/ui/src/components/editor/QEditor.styl
@@ -66,7 +66,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 6fae2c33b2d6..0bbc576149e5 100644
--- a/ui/src/components/expansion-item/QExpansionItem.js
+++ b/ui/src/components/expansion-item/QExpansionItem.js
@@ -9,7 +9,6 @@ import QSeparator from '../separator/QSeparator.js'
 
 import { RouterLinkMixin } from '../../mixins/router-link.js'
 import ModelToggleMixin from '../../mixins/model-toggle.js'
-import DarkMixin from '../../mixins/dark.js'
 
 import { stopAndPrevent } from '../../utils/event.js'
 import { slot } from '../../utils/slot.js'
@@ -20,7 +19,7 @@ const eventName = 'q:expansion-item:close'
 export default Vue.extend({
   name: 'QExpansionItem',
 
-  mixins: [ DarkMixin, RouterLinkMixin, ModelToggleMixin ],
+  mixins: [ RouterLinkMixin, ModelToggleMixin ],
 
   props: {
     icon: String,
@@ -211,7 +210,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
@@ -259,11 +258,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 054472ae0ea5..7fd55976682a 100644
--- a/ui/src/components/field/QField.js
+++ b/ui/src/components/field/QField.js
@@ -155,7 +155,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 08fb6381f62e..978c0e50b4cb 100644
--- a/ui/src/components/field/QField.sass
+++ b/ui/src/components/field/QField.sass
@@ -533,6 +533,40 @@ $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--focused .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: #fff
+
+    .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__input
+      color: #fff
+
+    &:not(.q-field--focused) .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--focused
+        .q-field__control
+          background: #fff
+        .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
+          color: #000
+      &.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 7a4735414b21..00e3b4a98be2 100644
--- a/ui/src/components/field/QField.styl
+++ b/ui/src/components/field/QField.styl
@@ -533,6 +533,40 @@ $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--focused .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: #fff
+
+    .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__input
+      color: #fff
+
+    &:not(.q-field--focused) .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--focused
+        .q-field__control
+          background: #fff
+        .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
+          color: #000
+      &.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 92b45930017d..6ad1fdafcf89 100644
--- a/ui/src/components/inner-loading/QInnerLoading.js
+++ b/ui/src/components/inner-loading/QInnerLoading.js
@@ -26,8 +26,7 @@ export default Vue.extend({
       ? [
         h('div',
           {
-            staticClass: 'q-inner-loading absolute-full column flex-center',
-            class: this.isDark === true ? 'q-inner-loading--dark' : null,
+            staticClass: `q-inner-loading absolute-full column flex-center q-inner-loading--${this.darkSuffix}`,
             on: { ...this.qListeners }
           },
           this.$scopedSlots.default !== void 0
diff --git a/ui/src/components/inner-loading/QInnerLoading.sass b/ui/src/components/inner-loading/QInnerLoading.sass
index f8c71d8fe668..8d9c9759aa36 100644
--- a/ui/src/components/inner-loading/QInnerLoading.sass
+++ b/ui/src/components/inner-loading/QInnerLoading.sass
@@ -1,4 +1,9 @@
 .q-inner-loading
   background: $light-dimmed-background
+
   &--dark
     background: $dimmed-background
+
+@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 f8c71d8fe668..8d9c9759aa36 100644
--- a/ui/src/components/inner-loading/QInnerLoading.styl
+++ b/ui/src/components/inner-loading/QInnerLoading.styl
@@ -1,4 +1,9 @@
 .q-inner-loading
   background: $light-dimmed-background
+
   &--dark
     background: $dimmed-background
+
+@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 e84126c3c76e..76911b03c0a9 100644
--- a/ui/src/components/item/QItem.js
+++ b/ui/src/components/item/QItem.js
@@ -48,7 +48,7 @@ export default Vue.extend({
         'q-manual-focusable--focused': this.isClickable === true && this.focused === true,
 
         'q-item--dense': this.dense,
-        'q-item--dark': this.isDark,
+        [`q-item--${this.darkSuffix}`]: true,
         'q-item--active': this.active,
         [this.activeClass]: this.active === true && this.hasRouterLink !== true && this.activeClass !== void 0,
 
diff --git a/ui/src/components/item/QItem.sass b/ui/src/components/item/QItem.sass
index e59cc7c1b38a..1b2eca113a76 100644
--- a/ui/src/components/item/QItem.sass
+++ b/ui/src/components/item/QItem.sass
@@ -118,3 +118,22 @@
   &.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: #fff
+    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..1b2eca113a76 100644
--- a/ui/src/components/item/QItem.styl
+++ b/ui/src/components/item/QItem.styl
@@ -118,3 +118,22 @@
   &.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: #fff
+    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 62625ccb59e9..01f6e817429d 100644
--- a/ui/src/components/item/QList.js
+++ b/ui/src/components/item/QList.js
@@ -19,11 +19,10 @@ export default Vue.extend({
 
   computed: {
     classes () {
-      return 'q-list' +
+      return `q-list q-list--${this.darkSuffix}` +
         (this.bordered === true ? ' q-list--bordered' : '') +
         (this.dense === true ? ' q-list--dense' : '') +
         (this.separator === true ? ' q-list--separator' : '') +
-        (this.isDark === true ? ' q-list--dark' : '') +
         (this.padding === true ? ' q-list--padding' : '')
     }
   },
diff --git a/ui/src/components/layout/QLayout.sass b/ui/src/components/layout/QLayout.sass
index c311710d7b02..d3271905c9f4 100644
--- a/ui/src/components/layout/QLayout.sass
+++ b/ui/src/components/layout/QLayout.sass
@@ -174,6 +174,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 2d57d85dc4cd..9dd02393eccb 100644
--- a/ui/src/components/layout/QLayout.styl
+++ b/ui/src/components/layout/QLayout.styl
@@ -174,6 +174,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 f3dbfadca682..db6f87e5b47f 100644
--- a/ui/src/components/linear-progress/QLinearProgress.js
+++ b/ui/src/components/linear-progress/QLinearProgress.js
@@ -64,8 +64,7 @@ export default Vue.extend({
     },
 
     trackClass () {
-      return `q-linear-progress__track--with${this.instantFeedback === true ? 'out' : ''}-transition` +
-        ` q-linear-progress__track--${this.isDark === true ? 'dark' : 'light'}` +
+      return `q-linear-progress__track--with${this.instantFeedback === true ? 'out' : ''}-transition q-linear-progress__track--${this.darkSuffix}` +
         (this.trackColor !== void 0 ? ` bg-${this.trackColor}` : '')
     },
 
diff --git a/ui/src/components/linear-progress/QLinearProgress.sass b/ui/src/components/linear-progress/QLinearProgress.sass
index a2dd63540c2f..f45eddde12c5 100644
--- a/ui/src/components/linear-progress/QLinearProgress.sass
+++ b/ui/src/components/linear-progress/QLinearProgress.sass
@@ -45,7 +45,8 @@
 
   &__track
     opacity: .4
-    &--light
+    &--light,
+    &--dark-auto
       background: rgba(0,0,0,.26)
     &--dark
       background: rgba(255,255,255,.6)
@@ -55,6 +56,10 @@
     background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent) !important
     background-size: 40px 40px !important
 
+@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 a2dd63540c2f..f45eddde12c5 100644
--- a/ui/src/components/linear-progress/QLinearProgress.styl
+++ b/ui/src/components/linear-progress/QLinearProgress.styl
@@ -45,7 +45,8 @@
 
   &__track
     opacity: .4
-    &--light
+    &--light,
+    &--dark-auto
       background: rgba(0,0,0,.26)
     &--dark
       background: rgba(255,255,255,.6)
@@ -55,6 +56,10 @@
     background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent) !important
     background-size: 40px 40px !important
 
+@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 24bdcafaa589..cf5564489b2a 100644
--- a/ui/src/components/markup-table/QMarkupTable.js
+++ b/ui/src/components/markup-table/QMarkupTable.js
@@ -25,8 +25,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` : '') +
+      return `q-table--${this.separator}-separator 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 0c61dfa89e56..a2140bfbfe4d 100644
--- a/ui/src/components/menu/QMenu.js
+++ b/ui/src/components/menu/QMenu.js
@@ -94,7 +94,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 7a913cd0bd12..f69e8abf823a 100644
--- a/ui/src/components/option-group/QOptionGroup.js
+++ b/ui/src/components/option-group/QOptionGroup.js
@@ -4,7 +4,6 @@ import QRadio from '../radio/QRadio.js'
 import QCheckbox from '../checkbox/QCheckbox.js'
 import QToggle from '../toggle/QToggle.js'
 
-import DarkMixin from '../../mixins/dark.js'
 import ListenersMixin from '../../mixins/listeners.js'
 
 import cache from '../../utils/cache.js'
@@ -20,7 +19,7 @@ const typeValues = Object.keys(components)
 export default Vue.extend({
   name: 'QOptionGroup',
 
-  mixins: [ DarkMixin, ListenersMixin ],
+  mixins: [ ListenersMixin ],
 
   props: {
     value: {
@@ -111,17 +110,17 @@ export default Vue.extend({
         props: {
           value: this.value,
           val: opt.value,
-          name: this.name || opt.name,
+          name: opt.name === void 0 ? this.name : opt.name,
           disable: this.disable || opt.disable,
           label: opt.label,
-          leftLabel: this.leftLabel || opt.leftLabel,
-          color: opt.color || this.color,
+          leftLabel: opt.leftLabel === void 0 ? this.leftLabel : opt.leftLabel,
+          color: opt.color === void 0 ? this.color : opt.color,
           checkedIcon: opt.checkedIcon,
           uncheckedIcon: opt.uncheckedIcon,
-          dark: opt.dark || this.isDark,
-          size: opt.size || this.size,
+          dark: opt.dark === void 0 ? this.dark : opt.dark,
+          size: opt.size === void 0 ? this.size : opt.size,
           dense: this.dense,
-          keepColor: opt.keepColor || this.keepColor
+          keepColor: opt.keepColor === void 0 ? this.keepColor : opt.keepColor
         },
         on: cache(this, 'inp', {
           input: this.__update
diff --git a/ui/src/components/pagination/QPagination.js b/ui/src/components/pagination/QPagination.js
index dcfa6f71093e..759ef05cc377 100644
--- a/ui/src/components/pagination/QPagination.js
+++ b/ui/src/components/pagination/QPagination.js
@@ -3,7 +3,6 @@ import Vue from 'vue'
 import QBtn from '../btn/QBtn.js'
 import QInput from '../input/QInput.js'
 
-import DarkMixin from '../../mixins/dark.js'
 import ListenersMixin from '../../mixins/listeners.js'
 
 import { stop } from '../../utils/event.js'
@@ -14,7 +13,7 @@ import cache from '../../utils/cache.js'
 export default Vue.extend({
   name: 'QPagination',
 
-  mixins: [ DarkMixin, ListenersMixin ],
+  mixins: [ ListenersMixin ],
 
   props: {
     value: {
@@ -247,7 +246,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/radio/QRadio.js b/ui/src/components/radio/QRadio.js
index c319151c609d..26f6f9336f74 100644
--- a/ui/src/components/radio/QRadio.js
+++ b/ui/src/components/radio/QRadio.js
@@ -41,7 +41,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 1f6d3ef78f42..6c29e8b6928d 100644
--- a/ui/src/components/radio/QRadio.sass
+++ b/ui/src/components/radio/QRadio.sass
@@ -94,3 +94,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 7d661b80433e..2cc7f6f613be 100644
--- a/ui/src/components/radio/QRadio.styl
+++ b/ui/src/components/radio/QRadio.styl
@@ -94,3 +94,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 5181312ffdbf..95aa3c8abacd 100644
--- a/ui/src/components/scroll-area/QScrollArea.js
+++ b/ui/src/components/scroll-area/QScrollArea.js
@@ -57,8 +57,7 @@ export default Vue.extend({
 
   computed: {
     classes () {
-      return 'q-scrollarea' +
-        (this.isDark === true ? ' q-scrollarea--dark' : '')
+      return `q-scrollarea q-scrollarea--${this.darkSuffix}`
     },
 
     thumbHidden () {
diff --git a/ui/src/components/scroll-area/QScrollArea.sass b/ui/src/components/scroll-area/QScrollArea.sass
index 3837d451bc97..d6f81d9bbbff 100644
--- a/ui/src/components/scroll-area/QScrollArea.sass
+++ b/ui/src/components/scroll-area/QScrollArea.sass
@@ -30,3 +30,8 @@
 
   &--dark .q-scrollarea__thumb
     background: #fff
+
+@media (prefers-color-scheme: dark)
+  .q-scrollarea--dark-auto
+    .q-scrollarea__thumb
+      background: #fff
diff --git a/ui/src/components/scroll-area/QScrollArea.styl b/ui/src/components/scroll-area/QScrollArea.styl
index 3837d451bc97..d6f81d9bbbff 100644
--- a/ui/src/components/scroll-area/QScrollArea.styl
+++ b/ui/src/components/scroll-area/QScrollArea.styl
@@ -30,3 +30,8 @@
 
   &--dark .q-scrollarea__thumb
     background: #fff
+
+@media (prefers-color-scheme: dark)
+  .q-scrollarea--dark-auto
+    .q-scrollarea__thumb
+      background: #fff
diff --git a/ui/src/components/select/QSelect.js b/ui/src/components/select/QSelect.js
index 55b43f5fa78c..74971702b66b 100755
--- a/ui/src/components/select/QSelect.js
+++ b/ui/src/components/select/QSelect.js
@@ -165,11 +165,19 @@ export default Vue.extend({
 
   computed: {
     isOptionsDark () {
-      return this.optionsDark === null
-        ? this.isDark
+      return this.optionsDark === void 0
+        ? this.dark
         : this.optionsDark
     },
 
+    optionsDarkSuffix () {
+      return this.isOptionsDark === null && this.$q.dark.mode === 'auto'
+        ? 'dark-auto'
+        : (
+          this.isOptionsDark === true ? 'dark' : 'light'
+        )
+    },
+
     virtualScrollLength () {
       return Array.isArray(this.options)
         ? this.options.length
@@ -1255,7 +1263,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/separator/QSeparator.js b/ui/src/components/separator/QSeparator.js
index 529ba89e30ce..8a7786d8126d 100644
--- a/ui/src/components/separator/QSeparator.js
+++ b/ui/src/components/separator/QSeparator.js
@@ -48,9 +48,8 @@ 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' : '')
+      return `q-separator${this.classPrefix}${this.insetClass} q-separator--${this.darkSuffix}` +
+        (this.color !== void 0 ? ` bg-${this.color}` : '')
     },
 
     style () {
diff --git a/ui/src/components/separator/QSeparator.sass b/ui/src/components/separator/QSeparator.sass
index fbaad4a3da10..72db1e5e365b 100644
--- a/ui/src/components/separator/QSeparator.sass
+++ b/ui/src/components/separator/QSeparator.sass
@@ -33,3 +33,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 fbaad4a3da10..72db1e5e365b 100644
--- a/ui/src/components/separator/QSeparator.styl
+++ b/ui/src/components/separator/QSeparator.styl
@@ -33,3 +33,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 056b805dc32d..96b4a28532d3 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 93613f701d54..8865e640d743 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 93613f701d54..8865e640d743 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 8bdfa463c3e1..97647e92bc9c 100644
--- a/ui/src/components/slide-item/QSlideItem.js
+++ b/ui/src/components/slide-item/QSlideItem.js
@@ -180,8 +180,7 @@ 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/slider/QSlider.sass b/ui/src/components/slider/QSlider.sass
index a32acdb74f39..6bb3c830d5b0 100644
--- a/ui/src/components/slider/QSlider.sass
+++ b/ui/src/components/slider/QSlider.sass
@@ -224,3 +224,10 @@
       height: 20px
     &--v
       width: 20px
+
+@media (prefers-color-scheme: dark)
+  .q-slider--dark-auto
+    .q-slider__track-container
+      background: rgba(#fff, .3)
+    .q-slider__track-markers
+      color: #fff
diff --git a/ui/src/components/slider/QSlider.styl b/ui/src/components/slider/QSlider.styl
index 9f13807ce178..622fb99a1c6c 100644
--- a/ui/src/components/slider/QSlider.styl
+++ b/ui/src/components/slider/QSlider.styl
@@ -224,3 +224,10 @@
       height: 20px
     &--v
       width: 20px
+
+@media (prefers-color-scheme: dark)
+  .q-slider--dark-auto
+    .q-slider__track-container
+      background: rgba(#fff, .3)
+    .q-slider__track-markers
+      color: #fff
diff --git a/ui/src/components/slider/slider-utils.js b/ui/src/components/slider/slider-utils.js
index a41c9fe35dfa..74dd66e56973 100644
--- a/ui/src/components/slider/slider-utils.js
+++ b/ui/src/components/slider/slider-utils.js
@@ -93,14 +93,13 @@ export const SliderMixin = {
     },
 
     classes () {
-      return `q-slider q-slider${this.axis} q-slider--${this.active === true ? '' : 'in'}active q-key-group-navigation--ignore-key` +
+      return `q-slider q-slider${this.axis} q-slider--${this.active === true ? '' : 'in'}active q-slider--${this.darkSuffix} q-key-group-navigation--ignore-key` +
         (this.isReversed === true ? ' q-slider--reversed' : '') +
         (this.color !== void 0 ? ` text-${this.color}` : '') +
         (this.disable === true ? ' disabled' : ' q-slider--enabled' + (this.editable === true ? ' q-slider--editable' : '')) +
         (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' : '') +
         (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 6475932b8967..d3430fa3d0d3 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 b20b7e09c398..822c0a877f8f 100644
--- a/ui/src/components/stepper/QStepper.js
+++ b/ui/src/components/stepper/QStepper.js
@@ -40,11 +40,10 @@ export default Vue.extend({
 
   computed: {
     classes () {
-      return `q-stepper q-stepper--${this.vertical === true ? 'vertical' : 'horizontal'}` +
+      return `q-stepper q-stepper--${this.vertical === true ? 'vertical' : 'horizontal'} q-stepper--${this.darkSuffix} q-${this.darkSuffix}` +
         (this.flat === true || this.isDark === true ? ' q-stepper--flat no-shadow' : '') +
         (this.bordered === true || (this.isDark === true && this.flat === false) ? ' q-stepper--bordered' : '') +
-        (this.contracted === true ? ' q-stepper--contracted' : '') +
-        (this.isDark === true ? ' q-stepper--dark q-dark' : '')
+        (this.contracted === true ? ' q-stepper--contracted' : '')
     },
 
     headerClasses () {
diff --git a/ui/src/components/stepper/QStepper.sass b/ui/src/components/stepper/QStepper.sass
index 758942e46f62..08b29b920824 100644
--- a/ui/src/components/stepper/QStepper.sass
+++ b/ui/src/components/stepper/QStepper.sass
@@ -29,10 +29,6 @@
     color: $grey
     flex-direction: row
 
-  &--dark
-    .q-stepper__dot span
-      color: #000
-
   &__tab
     &--navigation
       user-select: none
@@ -163,6 +159,8 @@
       padding-bottom: 8px
 
   &--dark
+    .q-stepper__dot span
+      color: #000
 
     &.q-stepper--bordered,
     .q-stepper__header--border
@@ -208,3 +206,27 @@
       margin: 0
     .q-stepper__label
       display: none
+
+@media (prefers-color-scheme: dark)
+  .q-stepper--dark-auto
+    .q-stepper__dot span
+      color: #000
+
+    &.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)
diff --git a/ui/src/components/stepper/QStepper.styl b/ui/src/components/stepper/QStepper.styl
index 758942e46f62..08b29b920824 100644
--- a/ui/src/components/stepper/QStepper.styl
+++ b/ui/src/components/stepper/QStepper.styl
@@ -29,10 +29,6 @@
     color: $grey
     flex-direction: row
 
-  &--dark
-    .q-stepper__dot span
-      color: #000
-
   &__tab
     &--navigation
       user-select: none
@@ -163,6 +159,8 @@
       padding-bottom: 8px
 
   &--dark
+    .q-stepper__dot span
+      color: #000
 
     &.q-stepper--bordered,
     .q-stepper__header--border
@@ -208,3 +206,27 @@
       margin: 0
     .q-stepper__label
       display: none
+
+@media (prefers-color-scheme: dark)
+  .q-stepper--dark-auto
+    .q-stepper__dot span
+      color: #000
+
+    &.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)
diff --git a/ui/src/components/tab-panels/QTabPanels.js b/ui/src/components/tab-panels/QTabPanels.js
index 7be0cf6c50d5..fa78d9815c08 100644
--- a/ui/src/components/tab-panels/QTabPanels.js
+++ b/ui/src/components/tab-panels/QTabPanels.js
@@ -10,8 +10,7 @@ export default Vue.extend({
 
   computed: {
     classes () {
-      return 'q-tab-panels q-panel-parent' +
-        (this.isDark === true ? ' q-tab-panels--dark q-dark' : '')
+      return `q-tab-panels q-panel-parent 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 9406383acc1a..f2659d5cfb44 100644
--- a/ui/src/components/table/QTable.js
+++ b/ui/src/components/table/QTable.js
@@ -210,21 +210,19 @@ export default Vue.extend({
     },
 
     cardDefaultClass () {
-      return ` q-table__card` +
-        (this.isDark === true ? ' q-table__card--dark q-dark' : '') +
-        (this.square === true ? ` q-table--square` : '') +
-        (this.flat === true ? ` q-table--flat` : '') +
-        (this.bordered === true ? ` q-table--bordered` : '')
+      return ` q-table__card 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' : '')
     },
 
     containerClass () {
-      return `q-table__container q-table--${this.separator}-separator column no-wrap` +
+      return `q-table__container q-table--${this.separator}-separator column no-wrap q-table--${this.darkSuffix}` +
         (this.loading === true ? ' q-table--loading' : '') +
         (this.grid === true ? ' q-table--grid' : this.cardDefaultClass) +
-        (this.isDark === true ? ` q-table--dark` : '') +
-        (this.dense === true ? ` q-table--dense` : '') +
-        (this.wrapCells === false ? ` q-table--no-wrap` : '') +
-        (this.inFullscreen === true ? ` fullscreen scroll` : '')
+        (this.dense === true ? ' q-table--dense' : '') +
+        (this.wrapCells === false ? ' q-table--no-wrap' : '') +
+        (this.inFullscreen === true ? ' fullscreen scroll' : '')
     },
 
     virtProps () {
@@ -357,7 +355,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 46582eaac8db..03fb82574ddb 100644
--- a/ui/src/components/table/QTable.sass
+++ b/ui/src/components/table/QTable.sass
@@ -263,7 +263,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
 
@@ -277,3 +276,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 46582eaac8db..03fb82574ddb 100644
--- a/ui/src/components/table/QTable.styl
+++ b/ui/src/components/table/QTable.styl
@@ -263,7 +263,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
 
@@ -277,3 +276,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 5f5c3cb7b177..8e90324a96d4 100644
--- a/ui/src/components/table/table-body.js
+++ b/ui/src/components/table/table-body.js
@@ -41,7 +41,7 @@ export default {
             props: {
               value: selected,
               color: this.color,
-              dark: this.isDark,
+              dark: this.dark,
               dense: this.dense
             },
             on: {
diff --git a/ui/src/components/table/table-bottom.js b/ui/src/components/table/table-bottom.js
index 34ea678c963c..3e2f86e83dd0 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 0ba336d18c38..bb51cb3be172 100644
--- a/ui/src/components/table/table-grid.js
+++ b/ui/src/components/table/table-grid.js
@@ -20,7 +20,7 @@ export default {
                 props: {
                   value: scope.selected,
                   color: this.color,
-                  dark: this.isDark,
+                  dark: this.dark,
                   dense: true
                 },
                 on: {
@@ -31,7 +31,7 @@ export default {
               })
             ]),
 
-            h(QSeparator, { props: { dark: this.isDark } })
+            h(QSeparator, { props: { dark: this.dark } })
           )
 
           const data = {
diff --git a/ui/src/components/table/table-header.js b/ui/src/components/table/table-header.js
index f514bb3cc709..2df026a5c834 100644
--- a/ui/src/components/table/table-header.js
+++ b/ui/src/components/table/table-header.js
@@ -62,7 +62,7 @@ export default {
               value: this.someRowsSelected === true
                 ? null
                 : this.allRowsSelected,
-              dark: this.isDark,
+              dark: this.dark,
               dense: this.dense
             },
             on: cache(this, 'inp', {
diff --git a/ui/src/components/time/QTime.js b/ui/src/components/time/QTime.js
index 08c974c51392..e4e894d54615 100644
--- a/ui/src/components/time/QTime.js
+++ b/ui/src/components/time/QTime.js
@@ -98,8 +98,7 @@ export default Vue.extend({
 
   computed: {
     classes () {
-      return `q-time q-key-group-navigation--ignore-key q-time--${this.landscape === true ? 'landscape' : 'portrait'}` +
-        (this.isDark === true ? ' q-time--dark q-dark' : '') +
+      return `q-time q-time--${this.landscape === true ? 'landscape' : 'portrait'} q-time--${this.darkSuffix} q-${this.darkSuffix} q-key-group-navigation--ignore-key` +
         (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 1bb23a7e943b..603600438e7d 100644
--- a/ui/src/components/time/QTime.sass
+++ b/ui/src/components/time/QTime.sass
@@ -188,3 +188,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 e1b17f7a4e86..dc750f63f4b8 100644
--- a/ui/src/components/time/QTime.styl
+++ b/ui/src/components/time/QTime.styl
@@ -186,3 +186,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 d3e4e1984f45..58896beb80bd 100644
--- a/ui/src/components/timeline/QTimeline.js
+++ b/ui/src/components/timeline/QTimeline.js
@@ -35,8 +35,7 @@ export default Vue.extend({
 
   computed: {
     classes () {
-      return `q-timeline--${this.layout} q-timeline--${this.layout}--${this.side}` +
-        (this.isDark === true ? ' q-timeline--dark' : '')
+      return `q-timeline--${this.layout} q-timeline--${this.layout}--${this.side} q-timeline--${this.darkSuffix}`
     }
   },
 
diff --git a/ui/src/components/timeline/QTimeline.sass b/ui/src/components/timeline/QTimeline.sass
index 792c7af5e8e2..c8a1e09714b3 100644
--- a/ui/src/components/timeline/QTimeline.sass
+++ b/ui/src/components/timeline/QTimeline.sass
@@ -7,6 +7,7 @@
 
   &--dark
     color: #fff
+
     .q-timeline__subtitle
       opacity: .7
 
@@ -241,3 +242,9 @@
       &__subtitle, &__content
         width: 50%
 
+@media (prefers-color-scheme: dark)
+  .q-timeline--dark-auto
+    color: #fff
+
+    .q-timeline__subtitle
+      opacity: .7
diff --git a/ui/src/components/timeline/QTimeline.styl b/ui/src/components/timeline/QTimeline.styl
index 792c7af5e8e2..c8a1e09714b3 100644
--- a/ui/src/components/timeline/QTimeline.styl
+++ b/ui/src/components/timeline/QTimeline.styl
@@ -7,6 +7,7 @@
 
   &--dark
     color: #fff
+
     .q-timeline__subtitle
       opacity: .7
 
@@ -241,3 +242,9 @@
       &__subtitle, &__content
         width: 50%
 
+@media (prefers-color-scheme: dark)
+  .q-timeline--dark-auto
+    color: #fff
+
+    .q-timeline__subtitle
+      opacity: .7
diff --git a/ui/src/components/toggle/QToggle.sass b/ui/src/components/toggle/QToggle.sass
index e05b129f5bc9..61edbbc45519 100644
--- a/ui/src/components/toggle/QToggle.sass
+++ b/ui/src/components/toggle/QToggle.sass
@@ -72,6 +72,7 @@ $toggle-transition: .22s cubic-bezier(.4,0,.2,1)
   &--dark
     .q-toggle__inner
       color: #fff
+
       &--truthy
         color: $primary
         color: var(--q-color-primary)
@@ -131,3 +132,13 @@ 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: #fff
+
+      &--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 9835ea97d0d0..aef80232b05b 100644
--- a/ui/src/components/toggle/QToggle.styl
+++ b/ui/src/components/toggle/QToggle.styl
@@ -72,6 +72,7 @@ $toggle-transition = .22s cubic-bezier(.4,0,.2,1)
   &--dark
     .q-toggle__inner
       color: #fff
+
       &--truthy
         color: $primary
         color: var(--q-color-primary)
@@ -131,3 +132,13 @@ 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: #fff
+
+      &--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 af84b7efa982..5ef2e8e30934 100644
--- a/ui/src/components/tree/QTree.js
+++ b/ui/src/components/tree/QTree.js
@@ -71,9 +71,8 @@ export default Vue.extend({
 
   computed: {
     classes () {
-      return `q-tree` +
-        (this.noConnectors === true ? ` q-tree--no-connectors` : '') +
-        (this.isDark === true ? ` q-tree--dark` : '') +
+      return `q-tree q-tree--${this.darkSuffix}` +
+        (this.noConnectors === true ? ' q-tree--no-connectors' : '') +
         (this.color !== void 0 ? ` text-${this.color}` : '')
     },
 
@@ -406,7 +405,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 }
 
       Object.defineProperty(scope, 'expanded', {
         get: () => { return meta.expanded },
@@ -530,7 +529,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 1bc38d963f08..a4e07e372d22 100644
--- a/ui/src/components/tree/QTree.sass
+++ b/ui/src/components/tree/QTree.sass
@@ -114,8 +114,9 @@
   > .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: #fff
 
   &--no-connectors
     .q-tree__node:after,
@@ -130,3 +131,7 @@
     &--rotate
       transform: rotate3d(0, 0, 1, 90deg) #{"/* rtl:ignore */"}
 
+@media (prefers-color-scheme: dark)
+  .q-tree--dark-auto
+    .q-tree__node-header-content
+      color: #fff
diff --git a/ui/src/components/tree/QTree.styl b/ui/src/components/tree/QTree.styl
index ad1da4f5a172..1b8ce805a0de 100644
--- a/ui/src/components/tree/QTree.styl
+++ b/ui/src/components/tree/QTree.styl
@@ -114,8 +114,9 @@
   > .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: #fff
 
   &--no-connectors
     .q-tree__node:after,
@@ -130,3 +131,7 @@
     &--rotate
       transform: rotate3d(0, 0, 1, 90deg) /* rtl:ignore */
 
+@media (prefers-color-scheme: dark)
+  .q-tree--dark-auto
+    .q-tree__node-header-content
+      color: #fff
diff --git a/ui/src/components/uploader/QUploader.sass b/ui/src/components/uploader/QUploader.sass
index d35b06266a19..49ef288a0a2e 100644
--- a/ui/src/components/uploader/QUploader.sass
+++ b/ui/src/components/uploader/QUploader.sass
@@ -132,3 +132,14 @@
       background: rgba(255,255,255,.3)
     .q-uploader__overlay
       color: #fff
+
+@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: #fff
diff --git a/ui/src/components/uploader/QUploader.styl b/ui/src/components/uploader/QUploader.styl
index d35b06266a19..49ef288a0a2e 100644
--- a/ui/src/components/uploader/QUploader.styl
+++ b/ui/src/components/uploader/QUploader.styl
@@ -132,3 +132,14 @@
       background: rgba(255,255,255,.3)
     .q-uploader__overlay
       color: #fff
+
+@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: #fff
diff --git a/ui/src/components/uploader/QUploaderBase.js b/ui/src/components/uploader/QUploaderBase.js
index f51bf8ad197a..9ad48dca7c55 100644
--- a/ui/src/components/uploader/QUploaderBase.js
+++ b/ui/src/components/uploader/QUploaderBase.js
@@ -432,7 +432,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/dark.sass b/ui/src/css/core/dark.sass
index d0d9f85928f8..2de3b87281e8 100644
--- a/ui/src/css/core/dark.sass
+++ b/ui/src/css/core/dark.sass
@@ -6,3 +6,13 @@ body.body--dark
   color: #fff
   background: $grey-9
   background: var(--q-color-dark)
+
+@media (prefers-color-scheme: dark)
+  body.body--dark-auto
+    color: #fff
+    background: $dark-page
+
+  .q-dark-auto
+    color: #fff
+    background: $grey-9
+    background: var(--q-color-dark)
diff --git a/ui/src/css/core/dark.styl b/ui/src/css/core/dark.styl
index d0d9f85928f8..2de3b87281e8 100644
--- a/ui/src/css/core/dark.styl
+++ b/ui/src/css/core/dark.styl
@@ -6,3 +6,13 @@ body.body--dark
   color: #fff
   background: $grey-9
   background: var(--q-color-dark)
+
+@media (prefers-color-scheme: dark)
+  body.body--dark-auto
+    color: #fff
+    background: $dark-page
+
+  .q-dark-auto
+    color: #fff
+    background: $grey-9
+    background: var(--q-color-dark)
diff --git a/ui/src/mixins/checkbox.js b/ui/src/mixins/checkbox.js
index d4210eed6155..88d55134922d 100644
--- a/ui/src/mixins/checkbox.js
+++ b/ui/src/mixins/checkbox.js
@@ -78,9 +78,8 @@ export default {
     },
 
     classes () {
-      return `q-${this.type} cursor-pointer no-outline row inline no-wrap items-center` +
+      return `q-${this.type} cursor-pointer no-outline row inline no-wrap items-center q-${this.type}--${this.darkSuffix}` +
         (this.disable === true ? ' disabled' : '') +
-        (this.isDark === true ? ` q-${this.type}--dark` : '') +
         (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..16ec47dc3144 100644
--- a/ui/src/mixins/dark.js
+++ b/ui/src/mixins/dark.js
@@ -11,6 +11,14 @@ export default {
       return this.dark === null
         ? this.$q.dark.isActive
         : this.dark
+    },
+
+    darkSuffix () {
+      return this.dark === null && this.$q.dark.mode === 'auto'
+        ? 'dark-auto'
+        : (
+          this.isDark === true ? 'dark' : 'light'
+        )
     }
   }
 }
diff --git a/ui/src/plugins/Dark.js b/ui/src/plugins/Dark.js
index 4b777ee433c1..005c606a7c1a 100644
--- a/ui/src/plugins/Dark.js
+++ b/ui/src/plugins/Dark.js
@@ -18,7 +18,8 @@ const Dark = {
           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.mode = val
@@ -81,8 +82,9 @@ const Dark = {
 
     this.isActive = val === true
 
+    document.body.classList.remove('body--dark-auto')
     document.body.classList.remove(`body--${val === true ? 'light' : 'dark'}`)
-    document.body.classList.add(`body--${val === true ? 'dark' : 'light'}`)
+    document.body.classList.add(`body--${val === true ? 'dark' : (val === 'auto' ? 'dark-auto' : 'light')}`)
   },
 
   toggle () {