feat(dark): make dark mode work with auto on SSR quasarframework#7530

Not solved problems: - vmColor in DialogPlugin - classes in QStepper Once these are solved isDark can be removed.
pdanpdan · Aug 6, 2020 · 05c4fb8 · 05c4fb8
1 parent ed05e3f
commit 05c4fb8
Show file tree

Hide file tree

Showing 102 changed files with 623 additions and 135 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)