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

…#7530, quasarframework#8602, quasarframework#10014
pdanpdan · Jan 11, 2023 · 0d7b517 · 0d7b517
1 parent e6d9858
commit 0d7b517
Show file tree

Hide file tree

Showing 123 changed files with 1,014 additions and 253 deletions.
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/badge/QBadge.sass b/ui/src/components/badge/QBadge.sass
@@ -1,7 +1,8 @@
 .q-badge
   background-color: $primary
   background-color: var(--q-color-primary)
-  color: #fff
+  color: $dark-text
+  color: var(--q-color-dark-text)
   padding: 2px 6px
   border-radius: $generic-border-radius
   font-size: 12px

diff --git a/ui/src/components/badge/QBadge.styl b/ui/src/components/badge/QBadge.styl
@@ -1,12 +1,13 @@
 .q-badge
   background-color: $primary
   background-color: var(--q-color-primary)
-  color: #fff
+  color: $dark-text
+  color: var(--q-color-dark-text)
   padding: 2px 6px
   border-radius: $generic-border-radius
   font-size: 12px
-  min-height: 12px
   line-height: 12px
+  min-height: 12px
   font-weight: normal
   vertical-align: baseline
 

diff --git a/ui/src/components/banner/QBanner.js b/ui/src/components/banner/QBanner.js
@@ -42,7 +42,7 @@ export default Vue.extend({
       class: {
         'q-banner--top-padding': actions !== void 0 && !this.inlineActions,
         'q-banner--dense': this.dense,
-        'q-banner--dark q-dark': this.isDark,
+        [`q-banner--${this.darkSuffix} q-${this.darkSuffix}`]: true,
         'rounded-borders': this.rounded
       },
       attrs,

diff --git a/ui/src/components/banner/QBanner.sass b/ui/src/components/banner/QBanner.sass
@@ -1,7 +1,6 @@
 .q-banner
   min-height: 54px
   padding: 8px 16px
-  background: #fff
 
   &--top-padding
     padding-top: 14px

diff --git a/ui/src/components/banner/QBanner.styl b/ui/src/components/banner/QBanner.styl
@@ -1,7 +1,6 @@
 .q-banner
   min-height: 54px
   padding: 8px 16px
-  background: #fff
 
   &--top-padding
     padding-top: 14px

diff --git a/ui/src/components/bar/QBar.js b/ui/src/components/bar/QBar.js
@@ -18,8 +18,8 @@ export default Vue.extend({
 
   computed: {
     classes () {
-      return `q-bar--${this.dense === true ? 'dense' : 'standard'} ` +
-        `q-bar--${this.isDark === true ? 'dark' : 'light'}`
+      return `q-bar--${this.dense === true ? 'dense' : 'standard'}` +
+        ` q-bar--${this.darkSuffix}`
     }
   },
 

diff --git a/ui/src/components/bar/QBar.sass b/ui/src/components/bar/QBar.sass
@@ -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
@@ -20,7 +20,7 @@ export default Vue.extend({
   computed: {
     classes () {
       return 'q-card' +
-        (this.isDark === true ? ' q-card--dark q-dark' : '') +
+        ` q-card--${this.darkSuffix} q-${this.darkSuffix}` +
         (this.bordered === true ? ' q-card--bordered' : '') +
         (this.square === true ? ' q-card--square no-border-radius' : '') +
         (this.flat === true ? ' q-card--flat no-shadow' : '')

diff --git a/ui/src/components/card/QCard.sass b/ui/src/components/card/QCard.sass
@@ -2,7 +2,6 @@
   box-shadow: $shadow-2
   border-radius: $generic-border-radius
   vertical-align: top
-  background: #fff
   position: relative
 
   > div,
@@ -94,3 +93,7 @@
     width: 100%
     max-width: 100%
     border: 0
+
+@media (prefers-color-scheme: dark)
+  .q-card--dark-auto
+    border-color: $separator-dark-color
diff --git a/ui/src/components/card/QCard.styl b/ui/src/components/card/QCard.styl
@@ -2,7 +2,6 @@
   box-shadow: $shadow-2
   border-radius: $generic-border-radius
   vertical-align: top
-  background: #fff
   position: relative
 
   > div,
@@ -94,3 +93,7 @@
     width: 100%
     max-width: 100%
     border: 0
+
+@media (prefers-color-scheme: dark)
+  .q-card--dark-auto
+    border-color: $separator-dark-color
diff --git a/ui/src/components/carousel/QCarousel.js b/ui/src/components/carousel/QCarousel.js
@@ -60,7 +60,7 @@ export default Vue.extend({
     classes () {
       return `q-carousel q-panel-parent q-carousel--with${this.padding === true ? '' : 'out'}-padding` +
         (this.inFullscreen === true ? ' fullscreen' : '') +
-        (this.isDark === true ? ' q-carousel--dark q-dark' : '') +
+        ` q-carousel--${this.darkSuffix} q-${this.darkSuffix}` +
         (this.arrows === true ? ` q-carousel--arrows-${this.direction}` : '') +
         (this.navigation === true ? ` q-carousel--navigation-${this.navigationPositionComputed}` : '')
     },

diff --git a/ui/src/components/carousel/QCarousel.sass b/ui/src/components/carousel/QCarousel.sass
@@ -1,5 +1,4 @@
 .q-carousel
-  background-color: #fff // needed for fullscreen
   height: 400px
 
   &__slide
@@ -14,7 +13,8 @@
     height: 100%
 
   &__control
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
 
   &__arrow
     pointer-events: none

diff --git a/ui/src/components/carousel/QCarousel.styl b/ui/src/components/carousel/QCarousel.styl
@@ -1,5 +1,4 @@
 .q-carousel
-  background-color: #fff // needed for fullscreen
   height: 400px
 
   &__slide
@@ -14,7 +13,8 @@
     height: 100%
 
   &__control
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
 
   &__arrow
     pointer-events: none

diff --git a/ui/src/components/checkbox/QCheckbox.sass b/ui/src/components/checkbox/QCheckbox.sass
@@ -26,7 +26,8 @@ $checkbox-transition: .22s cubic-bezier(0,0,.2,1) 0ms
     font-size: .5em
 
   &__svg
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
 
   &__truthy
     stroke: currentColor
@@ -122,3 +123,13 @@ body.desktop
     &:hover
       .q-checkbox__inner:before
         transform: scale3d(1.4, 1.4, 1)
+
+@media (prefers-color-scheme: dark)
+  .q-checkbox--dark-auto
+    .q-checkbox__inner
+      color: rgba(255,255,255,.7)
+      &:before
+        opacity: .32 !important
+      &--truthy, &--indet
+        color: $primary
+        color: var(--q-color-primary)
diff --git a/ui/src/components/checkbox/QCheckbox.styl b/ui/src/components/checkbox/QCheckbox.styl
@@ -26,7 +26,8 @@ $checkbox-transition = .22s cubic-bezier(0,0,.2,1) 0ms
     font-size: .5em
 
   &__svg
-    color: #fff
+    color: $dark-text
+    color: var(--q-color-dark-text)
 
   &__truthy
     stroke: currentColor
@@ -122,3 +123,13 @@ body.desktop
     &:hover
       .q-checkbox__inner:before
         transform: scale3d(1.4, 1.4, 1)
+
+@media (prefers-color-scheme: dark)
+  .q-checkbox--dark-auto
+    .q-checkbox__inner
+      color: rgba(255,255,255,.7)
+      &:before
+        opacity: .32 !important
+      &--truthy, &--indet
+        color: $primary
+        color: var(--q-color-primary)
diff --git a/ui/src/components/chip/QChip.js b/ui/src/components/chip/QChip.js
@@ -76,10 +76,18 @@ export default Vue.extend({
         'q-chip--selected': this.selected,
         'q-chip--clickable cursor-pointer non-selectable q-hoverable': this.isClickable,
         'q-chip--square': this.square,
-        'q-chip--dark q-dark': this.isDark
+        [`q-chip--${this.localDarkSuffix}`]: true
       }
     },
 
+    localDarkSuffix () {
+      if (typeof this.color === 'string' && this.color.trim().length > 0) {
+        return this.dark === true ? 'dark' : 'light'
+      }
+
+      return this.darkSuffix
+    },
+
     hasLeftIcon () {
       return this.selected === true || this.icon !== void 0
     },

diff --git a/ui/src/components/chip/QChip.sass b/ui/src/components/chip/QChip.sass
@@ -10,13 +10,22 @@ $chip-height: 2em
   max-width: 100%
   margin: 4px
 
-  background: #e0e0e0
-  color: rgba(0,0,0,.87)
+  background: $chip-background-light
+  background: var(--q-color-chip-background-light)
+  color: $light-text
+  color: var(--q-color-light-text)
 
   font-size: 14px
   padding: .5em .9em
 
-  &--colored, &--dark
+  &--dark
+    background: $chip-background-dark
+    background: var(--q-color-chip-background-dark)
+    color: $dark-text
+    color: var(--q-color-dark-text)
+
+  &--colored,
+  &--dark
     .q-chip__icon
       color: inherit
 
@@ -100,3 +109,13 @@ $chip-height: 2em
 
 body.desktop .q-chip--clickable:focus
   box-shadow: $shadow-1
+
+@media (prefers-color-scheme: dark)
+  .q-chip--dark-auto
+    background: $chip-background-dark
+    background: var(--q-color-chip-background-dark)
+    color: $dark-text
+    color: var(--q-color-dark-text)
+
+    .q-chip__icon
+      color: inherit
diff --git a/ui/src/components/chip/QChip.styl b/ui/src/components/chip/QChip.styl
@@ -10,13 +10,22 @@ $chip-height = 2em
   max-width: 100%
   margin: 4px
 
-  background: #e0e0e0
-  color: rgba(0,0,0,.87)
+  background: $chip-background-light
+  background: var(--q-color-chip-background-light)
+  color: $light-text
+  color: var(--q-color-light-text)
 
   font-size: 14px
   padding: .5em .9em
 
-  &--colored, &--dark
+  &--dark
+    background: $chip-background-dark
+    background: var(--q-color-chip-background-dark)
+    color: $dark-text
+    color: var(--q-color-dark-text)
+
+  &--colored,
+  &--dark
     .q-chip__icon
       color: inherit
 
@@ -100,3 +109,13 @@ $chip-height = 2em
 
 body.desktop .q-chip--clickable:focus
   box-shadow: $shadow-1
+
+@media (prefers-color-scheme: dark)
+  .q-chip--dark-auto
+    background: $chip-background-dark
+    background: var(--q-color-chip-background-dark)
+    color: $dark-text
+    color: var(--q-color-dark-text)
+
+    .q-chip__icon
+      color: inherit