+
{{ item.label }} #{{ index }}
@@ -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 @@
-
+
-
+
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 43465e2ed995..58f98be3fd5c 100644
--- a/ui/src/components/date/QDate.js
+++ b/ui/src/components/date/QDate.js
@@ -98,8 +98,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 90dc39770158..bf00f945c52b 100644
--- a/ui/src/components/date/QDate.sass
+++ b/ui/src/components/date/QDate.sass
@@ -177,3 +177,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 90dc39770158..bf00f945c52b 100644
--- a/ui/src/components/date/QDate.styl
+++ b/ui/src/components/date/QDate.styl
@@ -177,3 +177,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 1d9bca06ed0b..bdbf89102519 100644
--- a/ui/src/components/editor/QEditor.js
+++ b/ui/src/components/editor/QEditor.js
@@ -240,13 +240,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 8b0c857b5879..35fd934a0df6 100644
--- a/ui/src/components/field/QField.js
+++ b/ui/src/components/field/QField.js
@@ -153,7 +153,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 88b3e32d84e1..8cf04df22f1d 100644
--- a/ui/src/components/field/QField.sass
+++ b/ui/src/components/field/QField.sass
@@ -503,6 +503,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 24db98beff31..0b0583c614f0 100644
--- a/ui/src/components/field/QField.styl
+++ b/ui/src/components/field/QField.styl
@@ -503,6 +503,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 6c43b60ac370..c9d5c0447beb 100644
--- a/ui/src/components/menu/QMenu.js
+++ b/ui/src/components/menu/QMenu.js
@@ -97,7 +97,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 d2fe54eaf428..621d4436f083 100755
--- a/ui/src/components/select/QSelect.js
+++ b/ui/src/components/select/QSelect.js
@@ -159,11 +159,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
@@ -1249,7 +1257,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 a1d88cf70599..03afd5a9e862 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` +
+ return `q-slider q-slider${this.axis} q-slider--${this.active === true ? '' : 'in'}active q-slider--${this.darkSuffix}` +
(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 ddf2b5e44803..2a5c09a88010 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 0242a6dbbd10..a62996604af3 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-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}` +
(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 () {