feat(Dark): q-dark CSS class; $dark and $dark-page variables

Author: rstoenescu

ui/dev/components/components/button-group.vue

@@ -113,7 +113,7 @@
     </q-btn-group>
 
     <div v-for="push in options" :key="push">
-    <div v-for="flat in options" :key="flat">
+      <div v-for="flat in options" :key="flat">
         <div v-for="outline in options" :key="outline">
           <div v-for="rounded in options" :key="rounded">
             <div v-for="size in sizes" :key="size" class="q-ma-sm">

ui/dev/components/components/data-table-part3.vue

@@ -3,8 +3,8 @@
     <q-toggle v-model="loading" label="Loading" :dark="dark" />
     <q-toggle v-model="dark" label="Dark" :dark="dark" :false-value="null" />
     <q-toggle v-model="dense" label="Dense" :dark="dark" />
-    <q-select class="q-ma-sm inline" filled v-model="separator" :options="['horizontal', 'vertical', 'cell', 'none']" />
-    <q-toggle v-model="hasSelection" label="Selection" />
+    <q-select class="q-ma-sm inline" filled v-model="separator" :options="['horizontal', 'vertical', 'cell', 'none']" :dark="dark" />
+    <q-toggle v-model="hasSelection" label="Selection" :dark="dark" />
 
     <q-table
       :data="data"
@@ -16,8 +16,7 @@
       :separator="separator"
       :dense="dense"
       class="q-my-lg"
-      :color="dark ? 'amber' : 'primary'"
-      :card-class="dark ? 'bg-purple text-white' : 'bg-amber text-black'"
+      :color="$q.dark.isActive || dark ? 'amber' : 'primary'"
       :selection="selection"
       :selected.sync="selected"
       :dark="dark"
@@ -45,7 +44,7 @@
           class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3"
           :style="props.selected ? 'transform: scale(0.95);' : ''"
         >
-          <q-card :class="dark ? 'bg-grey-9 text-white' : ''">
+          <q-card :dark="dark">
             <q-card-section>
               <q-checkbox :dark="dark" v-model="props.selected" :label="props.row.name" />
             </q-card-section>

ui/src/components/banner/QBanner.js

@@ -22,7 +22,7 @@ export default Vue.extend({
       class: {
         'q-banner--top-padding': actions !== void 0 && !this.inlineActions,
         'q-banner--dense': this.dense,
-        'q-banner--dark': this.isDark,
+        'q-banner--dark q-dark': this.isDark,
         'rounded-borders': this.rounded
       },
       on: this.$listeners

ui/src/components/banner/QBanner.sass

@@ -36,6 +36,3 @@
     .q-banner__actions
       &.col-auto
         padding-left: 8px
-
-  &--dark
-    background: $grey-9

ui/src/components/banner/QBanner.styl

@@ -36,6 +36,3 @@
     .q-banner__actions
       &.col-auto
         padding-left 8px
-
-  &--dark
-    background $grey-9

ui/src/components/card/QCard.js

@@ -18,7 +18,7 @@ export default Vue.extend({
     return h('div', {
       staticClass: 'q-card',
       class: {
-        'q-card--dark': this.isDark,
+        'q-card--dark q-dark': this.isDark,
         'q-card--bordered': this.bordered,
         'q-card--square no-border-radius': this.square,
         'q-card--flat no-shadow': this.flat

ui/src/components/card/QCard.sass

@@ -32,8 +32,6 @@
     border: 1px solid $separator-color
 
   &--dark
-    color: #fff
-    background: $grey-10
     border-color: $separator-dark-color
 
   &__section

ui/src/components/card/QCard.styl

@@ -32,7 +32,6 @@
     border 1px solid $separator-color
 
   &--dark
-    background $grey-9
     border-color $separator-dark-color
 
   &__section

ui/src/components/carousel/QCarousel.js

@@ -52,7 +52,7 @@ export default Vue.extend({
         fullscreen: this.inFullscreen,
         'q-carousel--arrows': this.padding === true && this.arrows === true,
         'q-carousel--navigation': this.padding === true && this.navigation === true,
-        'q-carousel--dark': this.isDark
+        'q-carousel--dark q-dark': this.isDark
       }
     },
 

ui/src/components/carousel/QCarousel.sass

@@ -67,6 +67,3 @@
 
   &.fullscreen
     height: 100%
-
-  &--dark
-    background: $grey-9