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 4, 2020 · 2588451 · 2588451
1 parent d082c77
commit 2588451
Show file tree

Hide file tree

Showing 96 changed files with 614 additions and 126 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/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)

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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