diff --git a/ui/dev/src/pages/components/virtual-scroll-2.vue b/ui/dev/src/pages/components/virtual-scroll-2.vue
index f608e390874b..a1dea4fa4e9c 100644
--- a/ui/dev/src/pages/components/virtual-scroll-2.vue
+++ b/ui/dev/src/pages/components/virtual-scroll-2.vue
@@ -1,7 +1,7 @@
-
+
Before list
@@ -26,7 +26,7 @@
{{ item.label }} #{{ index }}
-
+
{{ item.label }} #{{ index }}
diff --git a/ui/dev/src/pages/components/virtual-scroll-3.vue b/ui/dev/src/pages/components/virtual-scroll-3.vue
index bd9d110e00d8..a71bd508fd66 100644
--- a/ui/dev/src/pages/components/virtual-scroll-3.vue
+++ b/ui/dev/src/pages/components/virtual-scroll-3.vue
@@ -7,7 +7,7 @@
-
+
Spacer
@@ -32,7 +32,7 @@
{{ item.label }} #{{ index }}
-
+
{{ 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 7dd3434cd576..4c708c6f5dce 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 @@
-
+
-
+
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
index e4111cc8b0dd..0f675a7ba069 100644
--- 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
index cf81c0ffb16a..e4a889bebfd6 100644
--- 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
index bb631f5bc5f1..a6683e49849c 100644
--- 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
index bb631f5bc5f1..a6683e49849c 100644
--- 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
index 079d2d376c9c..c7fae7dec51e 100644
--- 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
index 76bc87d77f01..34d1c1e81813 100644
--- 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
index 71da2b5960fe..b90809e4adb2 100644
--- 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
index 59b546057eab..e6565a7a0b0f 100644
--- 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
index 6ccd6f2167a2..b680c8232778 100644
--- 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
diff --git a/ui/src/components/color/QColor.js b/ui/src/components/color/QColor.js
index 478012a32fa9..7c5b7c01928b 100644
--- a/ui/src/components/color/QColor.js
+++ b/ui/src/components/color/QColor.js
@@ -191,7 +191,7 @@ export default Vue.extend({
(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' : '')
+ ` q-color-picker--${this.darkSuffix} q-${this.darkSuffix}`
},
attrs () {
@@ -472,7 +472,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', {
@@ -499,7 +499,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', {
@@ -527,7 +527,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),
@@ -552,7 +552,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 bba1b12c5097..b8942b860b04 100644
--- a/ui/src/components/color/QColor.sass
+++ b/ui/src/components/color/QColor.sass
@@ -1,6 +1,5 @@
.q-color-picker
overflow: hidden
- background: #fff
max-width: 350px
vertical-align: top
@@ -42,13 +41,17 @@
&__header-content
position: relative
- background: #fff
+ background: $light-page
+ background: var(--q-color-light-page)
&--light
- color: #000
+ color: $light-text
+ color: var(--q-color-light-text)
&--dark
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
+
.q-tab--inactive
&:before
content: ''
@@ -62,7 +65,8 @@
&__header-banner
height: 36px
&__header-bg
- background: #fff
+ background: $light-page
+ background: var(--q-color-light-page)
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==') !important
&__footer
@@ -172,7 +176,15 @@
&--dark
.q-color-picker__tune-tab input
- border: 1px solid rgba(#fff, .3)
+ border: 1px solid rgba($dark-text, .3)
+
+ .q-slider
+ color: $grey-1
+
+@media (prefers-color-scheme: dark)
+ .q-color-picker--dark-auto
+ .q-color-picker__tune-tab input
+ border: 1px solid rgba($dark-text, .3)
.q-slider
color: $grey-1
diff --git a/ui/src/components/color/QColor.styl b/ui/src/components/color/QColor.styl
index d6b9686544a9..ae158fe59f51 100644
--- a/ui/src/components/color/QColor.styl
+++ b/ui/src/components/color/QColor.styl
@@ -1,6 +1,5 @@
.q-color-picker
overflow: hidden
- background: #fff
max-width: 350px
vertical-align: top
@@ -42,13 +41,17 @@
&__header-content
position: relative
- background: #fff
+ background: $light-page
+ background: var(--q-color-light-page)
&--light
- color: #000
+ color: $light-text
+ color: var(--q-color-light-text)
&--dark
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
+
.q-tab--inactive
&:before
content: ''
@@ -62,7 +65,8 @@
&__header-banner
height: 36px
&__header-bg
- background: #fff
+ background: $light-page
+ background: var(--q-color-light-page)
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==') !important
&__footer
@@ -172,7 +176,15 @@
&--dark
.q-color-picker__tune-tab input
- border: 1px solid alpha(#fff, .3)
+ border: 1px solid alpha($dark-text, .3)
+
+ .q-slider
+ color: $grey-1
+
+@media (prefers-color-scheme: dark)
+ .q-color-picker--dark-auto
+ .q-color-picker__tune-tab input
+ border: 1px solid alpha($dark-text, .3)
.q-slider
color: $grey-1
diff --git a/ui/src/components/date/QDate.js b/ui/src/components/date/QDate.js
index d7574bdae8d2..44efe925d162 100644
--- a/ui/src/components/date/QDate.js
+++ b/ui/src/components/date/QDate.js
@@ -130,7 +130,7 @@ export default Vue.extend({
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' : '') +
+ ` 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 2f348f3d39cf..1df2db961964 100644
--- a/ui/src/components/date/QDate.sass
+++ b/ui/src/components/date/QDate.sass
@@ -2,7 +2,8 @@
display: inline-flex
box-shadow: $shadow-2
border-radius: $generic-border-radius
- background: #fff
+ background: $light-page
+ background: var(--q-color-light-page)
width: 290px
min-width: 290px
max-width: 100%
@@ -12,7 +13,8 @@
&__header
border-top-left-radius: inherit
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
background-color: $primary
background-color: var(--q-color-primary)
padding: 16px
@@ -251,3 +253,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 2f348f3d39cf..1df2db961964 100644
--- a/ui/src/components/date/QDate.styl
+++ b/ui/src/components/date/QDate.styl
@@ -2,7 +2,8 @@
display: inline-flex
box-shadow: $shadow-2
border-radius: $generic-border-radius
- background: #fff
+ background: $light-page
+ background: var(--q-color-light-page)
width: 290px
min-width: 290px
max-width: 100%
@@ -12,7 +13,8 @@
&__header
border-top-left-radius: inherit
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
background-color: $primary
background-color: var(--q-color-primary)
padding: 16px
@@ -251,3 +253,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 1681839fa396..68472b227d2e 100644
--- a/ui/src/components/dialog-bottom-sheet/BottomSheet.js
+++ b/ui/src/components/dialog-bottom-sheet/BottomSheet.js
@@ -71,7 +71,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',
@@ -110,7 +110,7 @@ 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,
@@ -118,7 +118,7 @@ export default Vue.extend({
props: {
tabindex: 0,
clickable: true,
- dark: this.isDark
+ dark: this.dark
},
on: {
click: () => {
@@ -176,7 +176,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 9f2289fca07c..32cac0b66a45 100644
--- a/ui/src/components/dialog-plugin/DialogPlugin.js
+++ b/ui/src/components/dialog-plugin/DialogPlugin.js
@@ -59,7 +59,7 @@ export default Vue.extend({
computed: {
classes () {
return 'q-dialog-plugin' +
- (this.isDark === true ? ' q-dialog-plugin--dark q-dark' : '') +
+ ` q-dialog-plugin--${this.darkSuffix} q-${this.darkSuffix}` +
(this.progress !== false ? ' q-dialog-plugin--progress' : '')
},
@@ -102,7 +102,7 @@ export default Vue.extend({
},
vmColor () {
- return this.color || (this.isDark === true ? 'amber' : 'primary')
+ return this.color || `dialog-plugin-${this.darkSuffix}`
},
okDisabled () {
@@ -169,7 +169,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', {
@@ -198,7 +198,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 }
@@ -288,13 +288,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 } })
)
}
@@ -320,7 +320,7 @@ export default Vue.extend({
staticClass: this.classes,
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 196aba90bb08..75a1d1e6db39 100644
--- a/ui/src/components/drawer/QDrawer.js
+++ b/ui/src/components/drawer/QDrawer.js
@@ -275,7 +275,7 @@ export default Vue.extend({
classes () {
return `q-drawer--${this.side}` +
(this.bordered === true ? ' q-drawer--bordered' : '') +
- (this.isDark === true ? ' q-drawer--dark q-dark' : '') +
+ ` q-drawer--${this.darkSuffix} q-${this.darkSuffix}` +
(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 cfed8ee704f8..c059f62d7abe 100644
--- a/ui/src/components/editor/QEditor.js
+++ b/ui/src/components/editor/QEditor.js
@@ -253,7 +253,7 @@ export default Vue.extend({
(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' : '')
+ ` q-editor--${this.darkSuffix} q-${this.darkSuffix}`
},
innerClass () {
diff --git a/ui/src/components/editor/QEditor.sass b/ui/src/components/editor/QEditor.sass
index eef9aa6dda83..69b6f0587c8d 100644
--- a/ui/src/components/editor/QEditor.sass
+++ b/ui/src/components/editor/QEditor.sass
@@ -1,7 +1,6 @@
.q-editor
border: 1px solid $editor-border-color
border-radius: $generic-border-radius
- background-color: #fff
&.disabled
border-style: dashed
@@ -84,7 +83,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 eef9aa6dda83..69b6f0587c8d 100644
--- a/ui/src/components/editor/QEditor.styl
+++ b/ui/src/components/editor/QEditor.styl
@@ -1,7 +1,6 @@
.q-editor
border: 1px solid $editor-border-color
border-radius: $generic-border-radius
- background-color: #fff
&.disabled
border-style: dashed
@@ -84,7 +83,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 762e60cd3092..15912f33b23b 100644
--- a/ui/src/components/expansion-item/QExpansionItem.js
+++ b/ui/src/components/expansion-item/QExpansionItem.js
@@ -259,7 +259,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
@@ -309,11 +309,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 639b7a969f44..eea779c5b9de 100644
--- a/ui/src/components/field/QField.js
+++ b/ui/src/components/field/QField.js
@@ -157,7 +157,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 bc6b2c001823..8278dd904b36 100644
--- a/ui/src/components/field/QField.sass
+++ b/ui/src/components/field/QField.sass
@@ -270,7 +270,8 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
border: 1px solid rgba(0,0,0,.24)
transition: border-color $field-transition
&:hover:before
- border-color: #000
+ border-color: $light-text
+ border-color: var(--q-color-light-text)
&:after
height: inherit
@@ -308,7 +309,8 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
transition: border-color $field-transition
&:hover:before
- border-color: #000
+ border-color: $light-text
+ border-color: var(--q-color-light-text)
&:after
height: 2px
@@ -334,10 +336,12 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
border-color: rgba(255,255,255,.6)
.q-field__control:hover:before
- border-color: #fff
+ border-color: $dark-text
+ border-color: var(--q-color-dark-text)
.q-field__native, .q-field__prefix, .q-field__suffix, .q-field__input
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
&:not(.q-field--highlighted) .q-field__label, .q-field__marginal, .q-field__bottom
color: rgba(255,255,255,.7)
@@ -364,9 +368,11 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
&.q-field--highlighted
.q-field__control
box-shadow: $shadow-2
- background: #000
+ background: $dark-page
+ background: var(--q-color-dark-page)
.q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
&.q-field--readonly
.q-field__control:before
@@ -381,9 +387,11 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
background: rgba(255,255,255,.07)
&.q-field--highlighted
.q-field__control
- background: #fff
+ background: $light-page
+ background: var(--q-color-light-page)
.q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
- color: #000
+ color: $light-text
+ color: var(--q-color-light-text)
&.q-field--readonly
.q-field__control:before
border-color: rgba(255,255,255,.24)
@@ -538,6 +546,44 @@ $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--highlighted .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: $dark-text
+ border-color: var(--q-color-dark-text)
+
+ .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__input
+ color: $dark-text
+ color: var(--q-color-dark-text)
+
+ &:not(.q-field--highlighted) .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--highlighted
+ .q-field__control
+ background: $light-page
+ background: var(--q-color-light-page)
+ .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
+ color: $light-text
+ color: var(--q-color-light-text)
+ &.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 4f1c9c262cd8..49d520ded1c4 100644
--- a/ui/src/components/field/QField.styl
+++ b/ui/src/components/field/QField.styl
@@ -270,7 +270,8 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
border: 1px solid rgba(0,0,0,.24)
transition: border-color $field-transition
&:hover:before
- border-color: #000
+ border-color: $light-text
+ border-color: var(--q-color-light-text)
&:after
height: inherit
@@ -308,7 +309,8 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
transition: border-color $field-transition
&:hover:before
- border-color: #000
+ border-color: $light-text
+ border-color: var(--q-color-light-text)
&:after
height: 2px
@@ -334,10 +336,12 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
border-color: rgba(255,255,255,.6)
.q-field__control:hover:before
- border-color: #fff
+ border-color: $dark-text
+ border-color: var(--q-color-dark-text)
.q-field__native, .q-field__prefix, .q-field__suffix, .q-field__input
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
&:not(.q-field--highlighted) .q-field__label, .q-field__marginal, .q-field__bottom
color: rgba(255,255,255,.7)
@@ -364,9 +368,11 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
&.q-field--highlighted
.q-field__control
box-shadow: $shadow-2
- background: #000
+ background: $dark-page
+ background: var(--q-color-dark-page)
.q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
&.q-field--readonly
.q-field__control:before
@@ -381,9 +387,11 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
background: rgba(255,255,255,.07)
&.q-field--highlighted
.q-field__control
- background: #fff
+ background: $light-page
+ background: var(--q-color-light-page)
.q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
- color: #000
+ color: $light-text
+ color: var(--q-color-light-text)
&.q-field--readonly
.q-field__control:before
border-color: rgba(255,255,255,.24)
@@ -538,6 +546,44 @@ $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--highlighted .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: $dark-text
+ border-color: var(--q-color-dark-text)
+
+ .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__input
+ color: $dark-text
+ color: var(--q-color-dark-text)
+
+ &:not(.q-field--highlighted) .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--highlighted
+ .q-field__control
+ background: $light-page
+ background: var(--q-color-light-page)
+ .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
+ color: $light-text
+ color: var(--q-color-light-text)
+ &.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 ad3a5eb44cbf..00aa79e0c7ec 100644
--- a/ui/src/components/inner-loading/QInnerLoading.js
+++ b/ui/src/components/inner-loading/QInnerLoading.js
@@ -28,7 +28,7 @@ export default Vue.extend({
computed: {
classes () {
return 'q-inner-loading absolute-full column flex-center' +
- (this.isDark === true ? ' q-inner-loading--dark' : '')
+ ` q-inner-loading--${this.darkSuffix}`
},
labelClasses () {
diff --git a/ui/src/components/inner-loading/QInnerLoading.sass b/ui/src/components/inner-loading/QInnerLoading.sass
index 42b6ca42e674..099f1729db4c 100644
--- a/ui/src/components/inner-loading/QInnerLoading.sass
+++ b/ui/src/components/inner-loading/QInnerLoading.sass
@@ -1,7 +1,12 @@
.q-inner-loading
background: $light-dimmed-background
+
&--dark
background: $dimmed-background
&__label
margin-top: 8px
+
+@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 42b6ca42e674..099f1729db4c 100644
--- a/ui/src/components/inner-loading/QInnerLoading.styl
+++ b/ui/src/components/inner-loading/QInnerLoading.styl
@@ -1,7 +1,12 @@
.q-inner-loading
background: $light-dimmed-background
+
&--dark
background: $dimmed-background
&__label
margin-top: 8px
+
+@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 b7a92a9cdce2..dae935da0351 100644
--- a/ui/src/components/item/QItem.js
+++ b/ui/src/components/item/QItem.js
@@ -44,7 +44,7 @@ export default Vue.extend({
classes () {
return 'q-item q-item-type row no-wrap' +
(this.dense === true ? ' q-item--dense' : '') +
- (this.isDark === true ? ' q-item--dark' : '') +
+ ` q-item--${this.darkSuffix}` +
(
this.hasLink === true && this.active === null
? this.linkClass
diff --git a/ui/src/components/item/QItem.sass b/ui/src/components/item/QItem.sass
index e59cc7c1b38a..cfbc5d7a3055 100644
--- a/ui/src/components/item/QItem.sass
+++ b/ui/src/components/item/QItem.sass
@@ -100,7 +100,8 @@
border-top-color: $separator-dark-color
.q-list--dark, .q-item--dark
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
border-color: $separator-dark-color
.q-item__section--side:not(.q-item__section--avatar)
@@ -118,3 +119,23 @@
&.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: $dark-text
+ color: var(--q-color-dark-text)
+ 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..cfbc5d7a3055 100644
--- a/ui/src/components/item/QItem.styl
+++ b/ui/src/components/item/QItem.styl
@@ -100,7 +100,8 @@
border-top-color: $separator-dark-color
.q-list--dark, .q-item--dark
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
border-color: $separator-dark-color
.q-item__section--side:not(.q-item__section--avatar)
@@ -118,3 +119,23 @@
&.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: $dark-text
+ color: var(--q-color-dark-text)
+ 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 2c46a0eb5809..bfb11d3bb5b9 100644
--- a/ui/src/components/item/QList.js
+++ b/ui/src/components/item/QList.js
@@ -28,7 +28,7 @@ export default Vue.extend({
(this.bordered === true ? ' q-list--bordered' : '') +
(this.dense === true ? ' q-list--dense' : '') +
(this.separator === true ? ' q-list--separator' : '') +
- (this.isDark === true ? ' q-list--dark' : '') +
+ ` q-list--${this.darkSuffix}` +
(this.padding === true ? ' q-list--padding' : '')
}
},
diff --git a/ui/src/components/layout/QLayout.sass b/ui/src/components/layout/QLayout.sass
index 8852dc8d30fd..408c5e068ba5 100644
--- a/ui/src/components/layout/QLayout.sass
+++ b/ui/src/components/layout/QLayout.sass
@@ -29,7 +29,8 @@
.q-layout__section--marginal
background-color: $primary
background-color: var(--q-color-primary)
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
.q-header
@@ -60,7 +61,6 @@
position: absolute
top: 0
bottom: 0
- background: #fff
z-index: $z-side
&--on-top
@@ -178,6 +178,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 95ae9f7aabf6..3f3495c52606 100644
--- a/ui/src/components/layout/QLayout.styl
+++ b/ui/src/components/layout/QLayout.styl
@@ -29,7 +29,8 @@
.q-layout__section--marginal
background-color: $primary
background-color: var(--q-color-primary)
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
.q-header
@@ -60,7 +61,6 @@
position: absolute
top: 0
bottom: 0
- background: #fff
z-index: $z-side
&--on-top
@@ -178,6 +178,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 48c62d6be004..605a31a7f4f5 100644
--- a/ui/src/components/linear-progress/QLinearProgress.js
+++ b/ui/src/components/linear-progress/QLinearProgress.js
@@ -74,7 +74,7 @@ export default Vue.extend({
trackClass () {
return `q-linear-progress__track absolute-full q-linear-progress__track--${this.transitionSuffix}` +
- ` q-linear-progress__track--${this.isDark === true ? 'dark' : 'light'}` +
+ ` q-linear-progress__track--${this.darkSuffix}` +
(this.trackColor !== void 0 ? ` bg-${this.trackColor}` : '')
},
@@ -92,8 +92,8 @@ export default Vue.extend({
},
stripeClass () {
- return `q-linear-progress__stripe q-linear-progress__stripe--${this.transitionSuffix}`
- + ` absolute-${this.reverse === true ? 'right' : 'left'}`
+ return `q-linear-progress__stripe q-linear-progress__stripe--${this.transitionSuffix}` +
+ ` absolute-${this.reverse === true ? 'right' : 'left'}`
},
attrs () {
diff --git a/ui/src/components/linear-progress/QLinearProgress.sass b/ui/src/components/linear-progress/QLinearProgress.sass
index 6e9d306a2dca..f35637d64cea 100644
--- a/ui/src/components/linear-progress/QLinearProgress.sass
+++ b/ui/src/components/linear-progress/QLinearProgress.sass
@@ -46,7 +46,8 @@
&__track
opacity: .4
- &--light
+ &--light,
+ &--dark-auto
background: rgba(0,0,0,.26)
&--dark
background: rgba(255,255,255,.6)
@@ -58,6 +59,10 @@
&--with-transition
transition: width .3s
+@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 6e9d306a2dca..f35637d64cea 100644
--- a/ui/src/components/linear-progress/QLinearProgress.styl
+++ b/ui/src/components/linear-progress/QLinearProgress.styl
@@ -46,7 +46,8 @@
&__track
opacity: .4
- &--light
+ &--light,
+ &--dark-auto
background: rgba(0,0,0,.26)
&--dark
background: rgba(255,255,255,.6)
@@ -58,6 +59,10 @@
&--with-transition
transition: width .3s
+@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 b20f722c9cf2..48db7ee9482f 100644
--- a/ui/src/components/markup-table/QMarkupTable.js
+++ b/ui/src/components/markup-table/QMarkupTable.js
@@ -26,7 +26,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' : '') +
+ ` 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 c36cfc34a563..eb3b748d8164 100644
--- a/ui/src/components/menu/QMenu.js
+++ b/ui/src/components/menu/QMenu.js
@@ -99,7 +99,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 1ac420dc1a4f..aa78c96d57e9 100644
--- a/ui/src/components/option-group/QOptionGroup.js
+++ b/ui/src/components/option-group/QOptionGroup.js
@@ -129,7 +129,7 @@ export default Vue.extend({
color: opt.color === void 0 ? this.color : opt.color,
checkedIcon: opt.checkedIcon,
uncheckedIcon: opt.uncheckedIcon,
- dark: opt.dark || this.isDark,
+ dark: opt.dark === void 0 ? this.dark : opt.dark,
size: opt.size === void 0 ? this.size : opt.size,
dense: this.dense,
keepColor: opt.keepColor === void 0 ? this.keepColor : opt.keepColor
diff --git a/ui/src/components/pagination/QPagination.js b/ui/src/components/pagination/QPagination.js
index 2e7f1979ca86..f2e6e7714b71 100644
--- a/ui/src/components/pagination/QPagination.js
+++ b/ui/src/components/pagination/QPagination.js
@@ -482,7 +482,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/pull-to-refresh/QPullToRefresh.sass b/ui/src/components/pull-to-refresh/QPullToRefresh.sass
index edc794eac668..c8ea2e087406 100644
--- a/ui/src/components/pull-to-refresh/QPullToRefresh.sass
+++ b/ui/src/components/pull-to-refresh/QPullToRefresh.sass
@@ -7,7 +7,8 @@
height: 40px
color: $primary
color: var(--q-color-primary)
- background: #fff
+ background: $light-page
+ background: var(--q-color-light-page)
box-shadow: 0 0 4px 0 rgba(0,0,0,.3)
&--animating
diff --git a/ui/src/components/pull-to-refresh/QPullToRefresh.styl b/ui/src/components/pull-to-refresh/QPullToRefresh.styl
index edc794eac668..c8ea2e087406 100644
--- a/ui/src/components/pull-to-refresh/QPullToRefresh.styl
+++ b/ui/src/components/pull-to-refresh/QPullToRefresh.styl
@@ -7,7 +7,8 @@
height: 40px
color: $primary
color: var(--q-color-primary)
- background: #fff
+ background: $light-page
+ background: var(--q-color-light-page)
box-shadow: 0 0 4px 0 rgba(0,0,0,.3)
&--animating
diff --git a/ui/src/components/radio/QRadio.js b/ui/src/components/radio/QRadio.js
index 60e29cd7b356..adb4c900e0aa 100644
--- a/ui/src/components/radio/QRadio.js
+++ b/ui/src/components/radio/QRadio.js
@@ -46,7 +46,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 0eef76d36898..464ab7534e76 100644
--- a/ui/src/components/radio/QRadio.sass
+++ b/ui/src/components/radio/QRadio.sass
@@ -103,3 +103,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 ec64f096a304..3f43cd0e4338 100644
--- a/ui/src/components/radio/QRadio.styl
+++ b/ui/src/components/radio/QRadio.styl
@@ -103,3 +103,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 993f79881ab3..5ea44728b280 100644
--- a/ui/src/components/scroll-area/QScrollArea.js
+++ b/ui/src/components/scroll-area/QScrollArea.js
@@ -88,7 +88,7 @@ export default Vue.extend({
computed: {
classes () {
return 'q-scrollarea' +
- (this.isDark === true ? ' q-scrollarea--dark' : '')
+ ` q-scrollarea--${this.darkSuffix}`
},
verticalScrollPercentage () {
diff --git a/ui/src/components/scroll-area/QScrollArea.sass b/ui/src/components/scroll-area/QScrollArea.sass
index 933c6b0a4be2..17b047321ac0 100644
--- a/ui/src/components/scroll-area/QScrollArea.sass
+++ b/ui/src/components/scroll-area/QScrollArea.sass
@@ -22,7 +22,8 @@
pointer-events: none
&__thumb
- background: #000
+ background: $dark-page
+ background: var(--q-color-dark-page)
&:hover
opacity: .3
@@ -34,4 +35,11 @@
min-width: 100%
&--dark .q-scrollarea__thumb
- background: #fff
+ background: $dark-text
+ background: var(--q-color-dark-text)
+
+@media (prefers-color-scheme: dark)
+ .q-scrollarea--dark-auto
+ .q-scrollarea__thumb
+ background: $dark-text
+ background: var(--q-color-dark-text)
diff --git a/ui/src/components/scroll-area/QScrollArea.styl b/ui/src/components/scroll-area/QScrollArea.styl
index 933c6b0a4be2..17b047321ac0 100644
--- a/ui/src/components/scroll-area/QScrollArea.styl
+++ b/ui/src/components/scroll-area/QScrollArea.styl
@@ -22,7 +22,8 @@
pointer-events: none
&__thumb
- background: #000
+ background: $dark-page
+ background: var(--q-color-dark-page)
&:hover
opacity: .3
@@ -34,4 +35,11 @@
min-width: 100%
&--dark .q-scrollarea__thumb
- background: #fff
+ background: $dark-text
+ background: var(--q-color-dark-text)
+
+@media (prefers-color-scheme: dark)
+ .q-scrollarea--dark-auto
+ .q-scrollarea__thumb
+ background: $dark-text
+ background: var(--q-color-dark-text)
diff --git a/ui/src/components/select/QSelect.js b/ui/src/components/select/QSelect.js
index d5e25fdd36b0..ca6d787ea370 100755
--- a/ui/src/components/select/QSelect.js
+++ b/ui/src/components/select/QSelect.js
@@ -190,10 +190,16 @@ export default Vue.extend({
computed: {
isOptionsDark () {
return this.optionsDark === null
- ? this.isDark
+ ? (this.dark === null ? this.$q.dark.isActive : this.dark)
: this.optionsDark
},
+ optionsDarkSuffix () {
+ return this.isOptionsDark === null
+ ? 'dark-auto'
+ : (this.isOptionsDark === true ? 'dark' : 'light')
+ },
+
virtualScrollLength () {
return Array.isArray(this.options)
? this.options.length
@@ -1460,7 +1466,6 @@ export default Vue.extend({
ref: 'dialog',
props: {
value: this.dialog,
- dark: this.isOptionsDark,
position: this.useInput === true ? 'top' : void 0,
contentClass: this.dialogContentClass,
contentStyle: this.dialogContentStyle,
@@ -1475,7 +1480,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/select/QSelect.sass b/ui/src/components/select/QSelect.sass
index 8087a4fb1cf2..106958a5fadc 100644
--- a/ui/src/components/select/QSelect.sass
+++ b/ui/src/components/select/QSelect.sass
@@ -62,7 +62,6 @@
width: 90vw !important
max-width: 90vw !important
max-height: calc(100vh - 70px) !important
- background: #fff
display: flex
flex-direction: column
diff --git a/ui/src/components/select/QSelect.styl b/ui/src/components/select/QSelect.styl
index 8087a4fb1cf2..106958a5fadc 100644
--- a/ui/src/components/select/QSelect.styl
+++ b/ui/src/components/select/QSelect.styl
@@ -62,7 +62,6 @@
width: 90vw !important
max-width: 90vw !important
max-height: calc(100vh - 70px) !important
- background: #fff
display: flex
flex-direction: column
diff --git a/ui/src/components/separator/QSeparator.js b/ui/src/components/separator/QSeparator.js
index 608152c19747..907aa09d06be 100644
--- a/ui/src/components/separator/QSeparator.js
+++ b/ui/src/components/separator/QSeparator.js
@@ -50,7 +50,7 @@ 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' : '')
+ ` q-separator--${this.darkSuffix}`
},
style () {
diff --git a/ui/src/components/separator/QSeparator.sass b/ui/src/components/separator/QSeparator.sass
index edd520a0cf42..977929cd0903 100644
--- a/ui/src/components/separator/QSeparator.sass
+++ b/ui/src/components/separator/QSeparator.sass
@@ -30,3 +30,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 edd520a0cf42..977929cd0903 100644
--- a/ui/src/components/separator/QSeparator.styl
+++ b/ui/src/components/separator/QSeparator.styl
@@ -30,3 +30,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 d9433e01200c..d7ea5099fbed 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 2dd47b03b280..c979cc0bc430 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 2dd47b03b280..c979cc0bc430 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 973dd10d8077..6d924e237288 100644
--- a/ui/src/components/slide-item/QSlideItem.js
+++ b/ui/src/components/slide-item/QSlideItem.js
@@ -199,8 +199,8 @@ 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/slide-item/QSlideItem.sass b/ui/src/components/slide-item/QSlideItem.sass
index 9318d8508b87..2ecd8087926b 100644
--- a/ui/src/components/slide-item/QSlideItem.sass
+++ b/ui/src/components/slide-item/QSlideItem.sass
@@ -1,11 +1,11 @@
.q-slide-item
position: relative
- background: white
&__left, &__right, &__top, &__bottom
visibility: hidden
font-size: 14px
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
.q-icon
font-size: 1.714em
diff --git a/ui/src/components/slide-item/QSlideItem.styl b/ui/src/components/slide-item/QSlideItem.styl
index 9318d8508b87..2ecd8087926b 100644
--- a/ui/src/components/slide-item/QSlideItem.styl
+++ b/ui/src/components/slide-item/QSlideItem.styl
@@ -1,11 +1,11 @@
.q-slide-item
position: relative
- background: white
&__left, &__right, &__top, &__bottom
visibility: hidden
font-size: 14px
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
.q-icon
font-size: 1.714em
diff --git a/ui/src/components/slider/QSlider.sass b/ui/src/components/slider/QSlider.sass
index f2ce29f2e239..78b2e62f7171 100644
--- a/ui/src/components/slider/QSlider.sass
+++ b/ui/src/components/slider/QSlider.sass
@@ -225,7 +225,8 @@
text-align: center
&__text
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
font-size: 12px
&--no-value
@@ -285,11 +286,11 @@
&--dark
.q-slider__track
- background: rgba(#fff,.1)
+ background: rgba($light-page,.1)
.q-slider__inner
- background: rgba(#fff,.1)
+ background: rgba($light-page,.1)
.q-slider__markers
- color: rgba(#fff,.3)
+ color: rgba($light-page,.3)
&--dense
.q-slider__track-container
@@ -297,3 +298,12 @@
padding: 6px 0
&--v
padding: 0 6px
+
+@media (prefers-color-scheme: dark)
+ .q-slider--dark-auto
+ .q-slider__track
+ background: rgba($light-page,.1)
+ .q-slider__inner
+ background: rgba($light-page,.1)
+ .q-slider__markers
+ color: rgba($light-page,.3)
diff --git a/ui/src/components/slider/QSlider.styl b/ui/src/components/slider/QSlider.styl
index 174ac1bc0c37..ccb3f6156678 100644
--- a/ui/src/components/slider/QSlider.styl
+++ b/ui/src/components/slider/QSlider.styl
@@ -225,7 +225,8 @@
text-align: center
&__text
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
font-size: 12px
&--no-value
@@ -285,11 +286,11 @@
&--dark
.q-slider__track
- background: rgba(#fff,.1)
+ background: alpha($light-page,.1)
.q-slider__inner
- background: rgba(#fff,.1)
+ background: alpha($light-page,.1)
.q-slider__markers
- color: rgba(#fff,.3)
+ color: alpha($light-page,.3)
&--dense
.q-slider__track-container
@@ -297,3 +298,12 @@
padding: 6px 0
&--v
padding: 0 6px
+
+@media (prefers-color-scheme: dark)
+ .q-slider--dark-auto
+ .q-slider__track
+ background: alpha($light-page,.1)
+ .q-slider__inner
+ background: alpha($light-page,.1)
+ .q-slider__markers
+ color: alpha($light-page,.3)
diff --git a/ui/src/components/slider/slider-utils.js b/ui/src/components/slider/slider-utils.js
index c337eebcae04..dfac6602d9c1 100644
--- a/ui/src/components/slider/slider-utils.js
+++ b/ui/src/components/slider/slider-utils.js
@@ -196,7 +196,7 @@ export const SliderMixin = {
(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' : '') +
+ ` q-slider--${this.darkSuffix}` +
(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 0ce173c1e99e..0346f6ae56fa 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 b92b914d6877..4bbd74228843 100644
--- a/ui/src/components/stepper/QStepper.js
+++ b/ui/src/components/stepper/QStepper.js
@@ -40,10 +40,12 @@ export default Vue.extend({
computed: {
classes () {
+ const isDark = this.dark === true || (this.dark === null && this.$q.dark.isActive !== false)
+
return `q-stepper q-stepper--${this.vertical === true ? 'vertical' : 'horizontal'}` +
- (this.flat === true || this.isDark === true ? ' q-stepper--flat no-shadow' : '') +
- (this.bordered === true || (this.isDark === true && this.flat === false) ? ' q-stepper--bordered' : '') +
- (this.isDark === true ? ' q-stepper--dark q-dark' : '')
+ (this.flat === true || isDark === true ? ' q-stepper--flat no-shadow' : '') +
+ (this.bordered === true || (isDark === true && this.flat === false) ? ' q-stepper--bordered' : '') +
+ ` q-stepper--${this.darkSuffix} q-${this.darkSuffix}`
},
headerClasses () {
diff --git a/ui/src/components/stepper/QStepper.sass b/ui/src/components/stepper/QStepper.sass
index be7a9b3155ce..bd1e07015175 100644
--- a/ui/src/components/stepper/QStepper.sass
+++ b/ui/src/components/stepper/QStepper.sass
@@ -1,7 +1,6 @@
.q-stepper
box-shadow: $shadow-2
border-radius: $generic-border-radius
- background: #fff
&__title
font-size: 14px
@@ -21,8 +20,10 @@
height: 24px
border-radius: 50%
background: currentColor
+
span
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
&__tab
padding: 8px 24px
@@ -30,10 +31,6 @@
color: $grey
flex-direction: row
- &--dark
- .q-stepper__dot span
- color: #000
-
&__tab
&--navigation
user-select: none
@@ -194,6 +191,34 @@
padding-bottom: 8px
&--dark
+ .q-stepper__dot span
+ color: $light-text
+ color: var(--q-color-light-text)
+
+ &.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)
+
+@media (prefers-color-scheme: dark)
+ .q-stepper--dark-auto
+ .q-stepper__dot span
+ color: $light-text
+ color: var(--q-color-light-text)
&.q-stepper--bordered,
.q-stepper__header--border
diff --git a/ui/src/components/stepper/QStepper.styl b/ui/src/components/stepper/QStepper.styl
index be7a9b3155ce..bd1e07015175 100644
--- a/ui/src/components/stepper/QStepper.styl
+++ b/ui/src/components/stepper/QStepper.styl
@@ -1,7 +1,6 @@
.q-stepper
box-shadow: $shadow-2
border-radius: $generic-border-radius
- background: #fff
&__title
font-size: 14px
@@ -21,8 +20,10 @@
height: 24px
border-radius: 50%
background: currentColor
+
span
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
&__tab
padding: 8px 24px
@@ -30,10 +31,6 @@
color: $grey
flex-direction: row
- &--dark
- .q-stepper__dot span
- color: #000
-
&__tab
&--navigation
user-select: none
@@ -194,6 +191,34 @@
padding-bottom: 8px
&--dark
+ .q-stepper__dot span
+ color: $light-text
+ color: var(--q-color-light-text)
+
+ &.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)
+
+@media (prefers-color-scheme: dark)
+ .q-stepper--dark-auto
+ .q-stepper__dot span
+ color: $light-text
+ color: var(--q-color-light-text)
&.q-stepper--bordered,
.q-stepper__header--border
diff --git a/ui/src/components/tab-panels/QTabPanel.sass b/ui/src/components/tab-panels/QTabPanel.sass
index eb56cd26fbff..d2f4b676cce4 100644
--- a/ui/src/components/tab-panels/QTabPanel.sass
+++ b/ui/src/components/tab-panels/QTabPanel.sass
@@ -1,5 +1,2 @@
-.q-tab-panels
- background: #fff
-
.q-tab-panel
padding: 16px
diff --git a/ui/src/components/tab-panels/QTabPanel.styl b/ui/src/components/tab-panels/QTabPanel.styl
index eb56cd26fbff..d2f4b676cce4 100644
--- a/ui/src/components/tab-panels/QTabPanel.styl
+++ b/ui/src/components/tab-panels/QTabPanel.styl
@@ -1,5 +1,2 @@
-.q-tab-panels
- background: #fff
-
.q-tab-panel
padding: 16px
diff --git a/ui/src/components/tab-panels/QTabPanels.js b/ui/src/components/tab-panels/QTabPanels.js
index 7be0cf6c50d5..fc011ef18086 100644
--- a/ui/src/components/tab-panels/QTabPanels.js
+++ b/ui/src/components/tab-panels/QTabPanels.js
@@ -11,7 +11,7 @@ export default Vue.extend({
computed: {
classes () {
return 'q-tab-panels q-panel-parent' +
- (this.isDark === true ? ' q-tab-panels--dark q-dark' : '')
+ ` 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 75a93f0aa330..0bf6b3dbca9a 100644
--- a/ui/src/components/table/QTable.js
+++ b/ui/src/components/table/QTable.js
@@ -212,7 +212,7 @@ export default Vue.extend({
cardDefaultClass () {
return ' q-table__card' +
- (this.isDark === true ? ' q-table__card--dark q-dark' : '') +
+ ` 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' : '')
@@ -221,7 +221,7 @@ export default Vue.extend({
__containerClass () {
return `q-table__container q-table--${this.separator}-separator column no-wrap` +
(this.grid === true ? ' q-table--grid' : this.cardDefaultClass) +
- (this.isDark === true ? ' q-table--dark' : '') +
+ ` q-table--${this.darkSuffix}` +
(this.dense === true ? ' q-table--dense' : '') +
(this.wrapCells === false ? ' q-table--no-wrap' : '') +
(this.inFullscreen === true ? ' fullscreen scroll' : '')
@@ -382,7 +382,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 eabdbd52a31a..d2cfc4510d2f 100644
--- a/ui/src/components/table/QTable.sass
+++ b/ui/src/components/table/QTable.sass
@@ -1,6 +1,5 @@
.q-markup-table
overflow: auto
- background: #fff
.q-table
width: 100%
@@ -36,8 +35,8 @@
font-size: 13px
&__card
- color: #000
- background-color: #fff
+ color: $light-text
+ color: var(--q-color-light-text)
border-radius: $table-border-radius
box-shadow: $table-box-shadow
@@ -270,7 +269,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
@@ -284,3 +282,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 eabdbd52a31a..d2cfc4510d2f 100644
--- a/ui/src/components/table/QTable.styl
+++ b/ui/src/components/table/QTable.styl
@@ -1,6 +1,5 @@
.q-markup-table
overflow: auto
- background: #fff
.q-table
width: 100%
@@ -36,8 +35,8 @@
font-size: 13px
&__card
- color: #000
- background-color: #fff
+ color: $light-text
+ color: var(--q-color-light-text)
border-radius: $table-border-radius
box-shadow: $table-box-shadow
@@ -270,7 +269,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
@@ -284,3 +282,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 7abff07c5a18..517098988208 100644
--- a/ui/src/components/table/table-body.js
+++ b/ui/src/components/table/table-body.js
@@ -44,7 +44,7 @@ export default {
props: {
value: selected,
color: this.color,
- dark: this.isDark,
+ dark: this.dark,
dense: this.dense
},
on: {
@@ -140,7 +140,7 @@ export default {
sort: this.sort,
rowIndex: this.firstRowIndex + data.pageIndex,
color: this.color,
- dark: this.isDark,
+ dark: this.dark,
dense: this.dense
})
diff --git a/ui/src/components/table/table-bottom.js b/ui/src/components/table/table-bottom.js
index dcc8722cc0d8..4a240961ecd3 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 0d4f5ad586b1..d5b7d697ef0b 100644
--- a/ui/src/components/table/table-grid.js
+++ b/ui/src/components/table/table-grid.js
@@ -39,7 +39,7 @@ export default {
props: {
value: scope.selected,
color: this.color,
- dark: this.isDark,
+ dark: this.dark,
dense: this.dense
},
on: {
@@ -52,7 +52,7 @@ export default {
child.unshift(
h('div', { staticClass: 'q-table__grid-item-row' }, content),
- h(QSeparator, { props: { dark: this.isDark } })
+ h(QSeparator, { props: { dark: this.dark } })
)
}
diff --git a/ui/src/components/table/table-header.js b/ui/src/components/table/table-header.js
index ca4330236ca7..e949ba841957 100644
--- a/ui/src/components/table/table-header.js
+++ b/ui/src/components/table/table-header.js
@@ -68,7 +68,7 @@ export default {
props: {
color: this.color,
value: this.headerSelectedValue,
- dark: this.isDark,
+ dark: this.dark,
dense: this.dense
},
on: cache(this, 'inp', {
@@ -96,7 +96,7 @@ export default {
sort: this.sort,
colsMap: this.computedColsMap,
color: this.color,
- dark: this.isDark,
+ dark: this.dark,
dense: this.dense
})
diff --git a/ui/src/components/time/QTime.js b/ui/src/components/time/QTime.js
index cfbd033fc450..135220afa376 100644
--- a/ui/src/components/time/QTime.js
+++ b/ui/src/components/time/QTime.js
@@ -111,7 +111,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' : '') +
+ ` 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 aa39d1465173..9fde1cc2d364 100644
--- a/ui/src/components/time/QTime.sass
+++ b/ui/src/components/time/QTime.sass
@@ -3,7 +3,6 @@
.q-time
box-shadow: $shadow-2
border-radius: $generic-border-radius
- background: #fff
outline: 0
width: 290px
min-width: 290px
@@ -14,7 +13,8 @@
&__header
border-top-left-radius: inherit
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
background-color: $primary
background-color: var(--q-color-primary)
padding: 16px
@@ -124,7 +124,8 @@
&--active
background-color: $primary
background-color: var(--q-color-primary)
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
@for $pos from 0 through 11
$angle: (270 + 30 * $pos)
@@ -147,7 +148,8 @@
&__now-button
background-color: $primary
background-color: var(--q-color-primary)
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
top: 12px
right: 12px
@@ -188,3 +190,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 32073dd4ff47..2d9eb559690d 100644
--- a/ui/src/components/time/QTime.styl
+++ b/ui/src/components/time/QTime.styl
@@ -12,7 +12,8 @@
&__header
border-top-left-radius: inherit
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
background-color: $primary
background-color: var(--q-color-primary)
padding: 16px
@@ -53,7 +54,7 @@
&__container-child
border-radius: 50%
- background: rgba(0, 0, 0, .12)
+ background: rgba(0,0,0,.12)
&__clock
padding: 24px
@@ -122,7 +123,8 @@
&--active
background-color: $primary
background-color: var(--q-color-primary)
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
for $pos in 0..11
$angle = (270 + 30 * $pos)
@@ -145,7 +147,8 @@
&__now-button
background-color: $primary
background-color: var(--q-color-primary)
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
top: 12px
right: 12px
@@ -186,3 +189,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 2d4d13cbe571..1391ba09d362 100644
--- a/ui/src/components/timeline/QTimeline.js
+++ b/ui/src/components/timeline/QTimeline.js
@@ -36,7 +36,7 @@ export default Vue.extend({
computed: {
classes () {
return `q-timeline--${this.layout} q-timeline--${this.layout}--${this.side}` +
- (this.isDark === true ? ' q-timeline--dark' : '')
+ ` q-timeline--${this.darkSuffix}`
}
},
diff --git a/ui/src/components/timeline/QTimeline.sass b/ui/src/components/timeline/QTimeline.sass
index dcbce41986bb..6e4aef5ef4ce 100644
--- a/ui/src/components/timeline/QTimeline.sass
+++ b/ui/src/components/timeline/QTimeline.sass
@@ -6,7 +6,9 @@
line-height: inherit
&--dark
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
+
.q-timeline__subtitle
opacity: .7
@@ -59,7 +61,9 @@
height: 38px
line-height: 38px
width: 100%
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
+
> svg,
> img
width: 1em
@@ -244,3 +248,11 @@
&__subtitle, &__content
width: 50%
+
+@media (prefers-color-scheme: dark)
+ .q-timeline--dark-auto
+ color: $dark-text
+ color: var(--q-color-dark-text)
+
+ .q-timeline__subtitle
+ opacity: .7
diff --git a/ui/src/components/timeline/QTimeline.styl b/ui/src/components/timeline/QTimeline.styl
index dcbce41986bb..6e4aef5ef4ce 100644
--- a/ui/src/components/timeline/QTimeline.styl
+++ b/ui/src/components/timeline/QTimeline.styl
@@ -6,7 +6,9 @@
line-height: inherit
&--dark
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
+
.q-timeline__subtitle
opacity: .7
@@ -59,7 +61,9 @@
height: 38px
line-height: 38px
width: 100%
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
+
> svg,
> img
width: 1em
@@ -244,3 +248,11 @@
&__subtitle, &__content
width: 50%
+
+@media (prefers-color-scheme: dark)
+ .q-timeline--dark-auto
+ color: $dark-text
+ color: var(--q-color-dark-text)
+
+ .q-timeline__subtitle
+ opacity: .7
diff --git a/ui/src/components/toggle/QToggle.sass b/ui/src/components/toggle/QToggle.sass
index b41975db2834..7d6194a3d3e9 100644
--- a/ui/src/components/toggle/QToggle.sass
+++ b/ui/src/components/toggle/QToggle.sass
@@ -30,13 +30,15 @@ $toggle-transition: .22s cubic-bezier(.4,0,.2,1)
bottom: 0
left: 0
border-radius: 50%
- background: #fff
+ background: $light-page
+ background: var(--q-color-light-page)
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)
.q-icon
font-size: .3em
min-width: 1em
- color: #000
+ color: $light-text
+ color: var(--q-color-light-text)
opacity: .54
z-index: 1
@@ -64,7 +66,8 @@ $toggle-transition: .22s cubic-bezier(.4,0,.2,1)
background-color: currentColor
.q-icon
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
opacity: 1
&.disabled
@@ -72,7 +75,9 @@ $toggle-transition: .22s cubic-bezier(.4,0,.2,1)
&--dark
.q-toggle__inner
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
+
&--truthy
color: $primary
color: var(--q-color-primary)
@@ -132,3 +137,14 @@ 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: $dark-text
+ color: var(--q-color-dark-text)
+
+ &--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 1972f4723058..5ece0b230afe 100644
--- a/ui/src/components/toggle/QToggle.styl
+++ b/ui/src/components/toggle/QToggle.styl
@@ -30,13 +30,15 @@ $toggle-transition = .22s cubic-bezier(.4,0,.2,1)
bottom: 0
left: 0
border-radius: 50%
- background: #fff
+ background: $light-page
+ background: var(--q-color-light-page)
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)
.q-icon
font-size: .3em
min-width: 1em
- color: #000
+ color: $light-text
+ color: var(--q-color-light-text)
opacity: .54
z-index: 1
@@ -64,7 +66,8 @@ $toggle-transition = .22s cubic-bezier(.4,0,.2,1)
background-color: currentColor
.q-icon
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
opacity: 1
&.disabled
@@ -72,7 +75,9 @@ $toggle-transition = .22s cubic-bezier(.4,0,.2,1)
&--dark
.q-toggle__inner
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
+
&--truthy
color: $primary
color: var(--q-color-primary)
@@ -132,3 +137,14 @@ 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: $dark-text
+ color: var(--q-color-dark-text)
+
+ &--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 f54b34ffc7e4..8627557500ed 100644
--- a/ui/src/components/tree/QTree.js
+++ b/ui/src/components/tree/QTree.js
@@ -81,7 +81,7 @@ export default Vue.extend({
classes () {
return `q-tree q-tree--${this.dense === true ? 'dense' : 'standard'}` +
(this.noConnectors === true ? ' q-tree--no-connectors' : '') +
- (this.isDark === true ? ' q-tree--dark' : '') +
+ ` q-tree--${this.darkSuffix}` +
(this.color !== void 0 ? ` text-${this.color}` : '')
},
@@ -420,7 +420,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 }
injectProp(
scope,
@@ -545,7 +545,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 8db591157b05..df99012d2a35 100644
--- a/ui/src/components/tree/QTree.sass
+++ b/ui/src/components/tree/QTree.sass
@@ -78,7 +78,8 @@
outline: 0
&__node-header-content
- color: #000
+ color: $light-text
+ color: var(--q-color-light-text)
transition: color .3s
&__node--selected .q-tree__node-header-content
@@ -122,8 +123,10 @@
> .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: $dark-text
+ color: var(--q-color-dark-text)
&--no-connectors
.q-tree__node:after,
@@ -184,3 +187,8 @@
&--rotate
transform: rotate3d(0, 0, 1, 90deg) #{"/* rtl:ignore */"}
+@media (prefers-color-scheme: dark)
+ .q-tree--dark-auto
+ .q-tree__node-header-content
+ color: $dark-text
+ color: var(--q-color-dark-text)
diff --git a/ui/src/components/tree/QTree.styl b/ui/src/components/tree/QTree.styl
index e676753bb32a..58a0fc0be4aa 100644
--- a/ui/src/components/tree/QTree.styl
+++ b/ui/src/components/tree/QTree.styl
@@ -78,7 +78,8 @@
outline: 0
&__node-header-content
- color: #000
+ color: $light-text
+ color: var(--q-color-light-text)
transition: color .3s
&__node--selected .q-tree__node-header-content
@@ -122,8 +123,10 @@
> .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: $dark-text
+ color: var(--q-color-dark-text)
&--no-connectors
.q-tree__node:after,
@@ -184,3 +187,8 @@
&--rotate
transform: rotate3d(0, 0, 1, 90deg) /* rtl:ignore */
+@media (prefers-color-scheme: dark)
+ .q-tree--dark-auto
+ .q-tree__node-header-content
+ color: $dark-text
+ color: var(--q-color-dark-text)
diff --git a/ui/src/components/uploader/QUploader.sass b/ui/src/components/uploader/QUploader.sass
index 55e9afabf1ce..05f801cb296c 100644
--- a/ui/src/components/uploader/QUploader.sass
+++ b/ui/src/components/uploader/QUploader.sass
@@ -2,7 +2,6 @@
box-shadow: $shadow-2
border-radius: $generic-border-radius
vertical-align: top
- background: #fff
position: relative
width: 320px
@@ -42,7 +41,8 @@
border-top-right-radius: inherit
background-color: $primary
background-color: var(--q-color-primary)
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
width: 100%
&__spinner
@@ -59,7 +59,8 @@
&__overlay
font-size: 36px
- color: #000
+ color: $light-text
+ color: var(--q-color-light-text)
background-color: rgba(255,255,255,.6)
&__list
@@ -78,7 +79,8 @@
font-size: 24px
&--img
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
height: 200px
min-width: 200px
background-position: 50% 50%
@@ -89,7 +91,8 @@
content: none
.q-circular-progress
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
.q-uploader__file-header
padding-bottom: 24px
@@ -132,4 +135,17 @@
.q-uploader__dnd, .q-uploader__overlay
background: rgba(255,255,255,.3)
.q-uploader__overlay
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
+
+@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: $dark-text
+ color: var(--q-color-dark-text)
diff --git a/ui/src/components/uploader/QUploader.styl b/ui/src/components/uploader/QUploader.styl
index a888b622eed9..2eb766ec21b1 100644
--- a/ui/src/components/uploader/QUploader.styl
+++ b/ui/src/components/uploader/QUploader.styl
@@ -2,7 +2,6 @@
box-shadow: $shadow-2
border-radius: $generic-border-radius
vertical-align: top
- background: #fff
position: relative
width: 320px
@@ -42,7 +41,8 @@
border-top-right-radius: inherit
background-color: $primary
background-color: var(--q-color-primary)
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
width: 100%
&__spinner
@@ -59,7 +59,8 @@
&__overlay
font-size: 36px
- color: #000
+ color: $light-text
+ color: var(--q-color-light-text)
background-color: rgba(255,255,255,.6)
&__list
@@ -78,7 +79,8 @@
font-size: 24px
&--img
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
height: 200px
min-width: 200px
background-position: 50% 50%
@@ -89,7 +91,8 @@
content: none
.q-circular-progress
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
.q-uploader__file-header
padding-bottom: 24px
@@ -132,4 +135,17 @@
.q-uploader__dnd, .q-uploader__overlay
background: rgba(255,255,255,.3)
.q-uploader__overlay
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
+
+@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: $dark-text
+ color: var(--q-color-dark-text)
diff --git a/ui/src/components/uploader/QUploaderBase.js b/ui/src/components/uploader/QUploaderBase.js
index a3bdfc462740..37fc990e5f59 100644
--- a/ui/src/components/uploader/QUploaderBase.js
+++ b/ui/src/components/uploader/QUploaderBase.js
@@ -438,7 +438,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/colors.sass b/ui/src/css/core/colors.sass
index 668f270ac194..1a4f08d7d0ec 100644
--- a/ui/src/css/core/colors.sass
+++ b/ui/src/css/core/colors.sass
@@ -7,8 +7,16 @@
--q-color-info: #{$info}
--q-color-warning: #{$warning}
--q-color-dark: #{$dark}
+ --q-color-light-text: #{$light-text}
+ --q-color-light-page: #{$light-page}
+ --q-color-dark-text: #{$dark-text}
--q-color-dark-page: #{$dark-page}
--q-color-backdrop-background: #{$backdrop-background}
+ --q-color-notify-background: #{$notify-background}
+ --q-color-chip-background-light: #{$chip-background-light}
+ --q-color-chip-background-dark: #{$chip-background-dark}
+ --q-color-dialog-plugin-light: #{$dialog-plugin-light}
+ --q-color-dialog-plugin-dark: #{$dialog-plugin-dark}
.text-dark
color: $dark !important
@@ -17,6 +25,30 @@
background: $dark !important
background: var(--q-color-dark) !important
+.text-dialog-plugin-light,
+.text-dialog-plugin-dark-auto
+ color: $dialog-plugin-light !important
+ color: var(--q-color-dialog-plugin-light) !important
+.bg-dialog-plugin-light,
+.bg-dialog-plugin-dark-auto
+ background: $dialog-plugin-light !important
+ background: var(--q-color-dialog-plugin-light) !important
+
+.text-dialog-plugin-dark
+ color: $dialog-plugin-dark !important
+ color: var(--q-color-dialog-plugin-dark) !important
+.bg-dialog-plugin-dark
+ background: $dialog-plugin-dark !important
+ background: var(--q-color-dialog-plugin-dark) !important
+
+@media (prefers-color-scheme: dark)
+ .text-dialog-plugin-dark-auto
+ color: $dialog-plugin-dark !important
+ color: var(--q-color-dialog-plugin-dark) !important
+ .bg-dialog-plugin-dark-auto
+ background: $dialog-plugin-dark !important
+ background: var(--q-color-dialog-plugin-dark) !important
+
.text-primary
color: $primary !important
color: var(--q-color-primary) !important
diff --git a/ui/src/css/core/colors.styl b/ui/src/css/core/colors.styl
index 1eacc6d215c4..09eb753831c2 100644
--- a/ui/src/css/core/colors.styl
+++ b/ui/src/css/core/colors.styl
@@ -7,8 +7,16 @@
--q-color-info: $info
--q-color-warning: $warning
--q-color-dark: $dark
+ --q-color-light-text: $light-text
+ --q-color-light-page: $light-page
+ --q-color-dark-text: $dark-text
--q-color-dark-page: $dark-page
--q-color-backdrop-background: $backdrop-background
+ --q-color-notify-background: $notify-background
+ --q-color-chip-background-light: $chip-background-light
+ --q-color-chip-background-dark: $chip-background-dark
+ --q-color-dialog-plugin-light: $dialog-plugin-light
+ --q-color-dialog-plugin-dark: $dialog-plugin-dark
.text-dark
color: $dark !important
@@ -17,6 +25,30 @@
background: $dark !important
background: var(--q-color-dark) !important
+.text-dialog-plugin-light,
+.text-dialog-plugin-dark-auto
+ color: $dialog-plugin-light !important
+ color: var(--q-color-dialog-plugin-light) !important
+.bg-dialog-plugin-light,
+.bg-dialog-plugin-dark-auto
+ background: $dialog-plugin-light !important
+ background: var(--q-color-dialog-plugin-light) !important
+
+.text-dialog-plugin-dark
+ color: $dialog-plugin-dark !important
+ color: var(--q-color-dialog-plugin-dark) !important
+.bg-dialog-plugin-dark
+ background: $dialog-plugin-dark !important
+ background: var(--q-color-dialog-plugin-dark) !important
+
+@media (prefers-color-scheme: dark)
+ .text-dialog-plugin-dark-auto
+ color: $dialog-plugin-dark !important
+ color: var(--q-color-dialog-plugin-dark) !important
+ .bg-dialog-plugin-dark-auto
+ background: $dialog-plugin-dark !important
+ background: var(--q-color-dialog-plugin-dark) !important
+
.text-primary
color: $primary !important
color: var(--q-color-primary) !important
diff --git a/ui/src/css/core/dark.sass b/ui/src/css/core/dark.sass
index cec2f364cc93..553588652b29 100644
--- a/ui/src/css/core/dark.sass
+++ b/ui/src/css/core/dark.sass
@@ -1,9 +1,33 @@
+body.body--light,
+body.body--dark-auto,
+.q-light,
+.q-dark-auto
+ color: $light-text
+ color: var(--q-color-light-text)
+ background: $light-page
+ background: var(--q-color-light-page)
+
body.body--dark
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
background: $dark-page
background: var(--q-color-dark-page)
.q-dark
- color: #fff
- background: $grey-9
+ color: $dark-text
+ color: var(--q-color-dark-text)
+ background: $dark
background: var(--q-color-dark)
+
+@media (prefers-color-scheme: dark)
+ body.body--dark-auto
+ color: $dark-text
+ color: var(--q-color-dark-text)
+ background: $dark-page
+ background: var(--q-color-dark-page)
+
+ .q-dark-auto
+ color: $dark-text
+ color: var(--q-color-dark-text)
+ background: $dark
+ background: var(--q-color-dark)
diff --git a/ui/src/css/core/dark.styl b/ui/src/css/core/dark.styl
index cec2f364cc93..553588652b29 100644
--- a/ui/src/css/core/dark.styl
+++ b/ui/src/css/core/dark.styl
@@ -1,9 +1,33 @@
+body.body--light,
+body.body--dark-auto,
+.q-light,
+.q-dark-auto
+ color: $light-text
+ color: var(--q-color-light-text)
+ background: $light-page
+ background: var(--q-color-light-page)
+
body.body--dark
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
background: $dark-page
background: var(--q-color-dark-page)
.q-dark
- color: #fff
- background: $grey-9
+ color: $dark-text
+ color: var(--q-color-dark-text)
+ background: $dark
background: var(--q-color-dark)
+
+@media (prefers-color-scheme: dark)
+ body.body--dark-auto
+ color: $dark-text
+ color: var(--q-color-dark-text)
+ background: $dark-page
+ background: var(--q-color-dark-page)
+
+ .q-dark-auto
+ color: $dark-text
+ color: var(--q-color-dark-text)
+ background: $dark
+ background: var(--q-color-dark)
diff --git a/ui/src/css/variables.sass b/ui/src/css/variables.sass
index f0c7fc2bd927..0377fd25c3d5 100644
--- a/ui/src/css/variables.sass
+++ b/ui/src/css/variables.sass
@@ -78,8 +78,13 @@ $primary : #1976D2 !default
$secondary : #26A69A !default
$accent : #9C27B0 !default
+// used by light mode
+$light-page : #ffffff !default
+$light-text : #000000 !default
+
// used by dark mode
$dark-page : #121212 !default
+$dark-text : #ffffff !default
$dark : #1d1d1d !default
$positive : #21BA45 !default
@@ -87,6 +92,14 @@ $negative : #C10015 !default
$info : #31CCEC !default
$warning : #F2C037 !default
+$dialog-plugin-light : $primary !default
+$dialog-plugin-dark : #ffc107 !default
+
+$notify-background : #323232 !default
+
+$chip-background-light : #e0e0e0 !default
+$chip-background-dark : #323232 !default
+
$backdrop-background : #000000 !default
$dimmed-background : rgba(0, 0, 0, .4) !default
diff --git a/ui/src/css/variables.styl b/ui/src/css/variables.styl
index 553d076b4d0d..bc77bbd86bc0 100644
--- a/ui/src/css/variables.styl
+++ b/ui/src/css/variables.styl
@@ -165,8 +165,13 @@ $primary ?= #1976D2
$secondary ?= #26A69A
$accent ?= #9C27B0
+// used by light mode
+$light-page ?= #ffffff
+$light-text ?= #000000
+
// used by dark mode
$dark-page ?= #121212
+$dark-text ?= #ffffff
$dark ?= #1d1d1d
$positive ?= #21BA45
@@ -174,6 +179,14 @@ $negative ?= #C10015
$info ?= #31CCEC
$warning ?= #F2C037
+$dialog-plugin-light ?= $primary
+$dialog-plugin-dark ?= #ffc107
+
+$notify-background ?= #323232
+
+$chip-background-light ?= #e0e0e0
+$chip-background-dark ?= #323232
+
$backdrop-background ?= #000000
$dimmed-background ?= rgba(0, 0, 0, .4)
@@ -483,12 +496,12 @@ $z-max ?= 9998
$shadow-color ?= black
$shadow-transition ?= box-shadow .28s cubic-bezier(.4, 0, .2, 1)
-$inset-shadow ?= 0 7px 9px -7px rgba($shadow-color, .7) inset
-$inset-shadow-down ?= 0 -7px 9px -7px rgba($shadow-color, .7) inset
+$inset-shadow ?= 0 7px 9px -7px alpha($shadow-color, .7) inset
+$inset-shadow-down ?= 0 -7px 9px -7px alpha($shadow-color, .7) inset
-$elevation-umbra ?= rgba($shadow-color, .2)
-$elevation-penumbra ?= rgba($shadow-color, .14)
-$elevation-ambient ?= rgba($shadow-color, .12)
+$elevation-umbra ?= alpha($shadow-color, .2)
+$elevation-penumbra ?= alpha($shadow-color, .14)
+$elevation-ambient ?= alpha($shadow-color, .12)
$shadow-0 ?= 0 0 0 $elevation-umbra, 0 0 0 $elevation-penumbra, 0 0 0 $elevation-ambient
$shadow-1 ?= 0 1px 3px $elevation-umbra, 0 1px 1px $elevation-penumbra, 0 2px 1px -1px $elevation-ambient
diff --git a/ui/src/mixins/checkbox.js b/ui/src/mixins/checkbox.js
index fd47efb3d178..a85e9b191d0e 100644
--- a/ui/src/mixins/checkbox.js
+++ b/ui/src/mixins/checkbox.js
@@ -77,7 +77,7 @@ export default {
classes () {
return `q-${this.type} cursor-pointer no-outline row inline no-wrap items-center` +
(this.disable === true ? ' disabled' : '') +
- (this.isDark === true ? ` q-${this.type}--dark` : '') +
+ ` q-${this.type}--${this.darkSuffix}` +
(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..9f9f7421c23a 100644
--- a/ui/src/mixins/dark.js
+++ b/ui/src/mixins/dark.js
@@ -7,10 +7,14 @@ export default {
},
computed: {
- isDark () {
- return this.dark === null
- ? this.$q.dark.isActive
- : this.dark
+ darkSuffix () {
+ if (this.dark === null && this.$q.dark.isActive === null) {
+ return 'dark-auto'
+ }
+
+ return this.dark === true || (this.dark === null && this.$q.dark.isActive === true)
+ ? 'dark'
+ : 'light'
}
}
}
diff --git a/ui/src/plugins/Dark.js b/ui/src/plugins/Dark.js
index 4b777ee433c1..8617e83721da 100644
--- a/ui/src/plugins/Dark.js
+++ b/ui/src/plugins/Dark.js
@@ -4,23 +4,25 @@ import { isSSR, fromSSR } from './Platform.js'
import { noop } from '../utils/event.js'
const Dark = {
- isActive: false,
+ isActive: null,
mode: false,
install ($q, queues, { dark }) {
- this.isActive = dark === true
+ this.isActive = dark === 'auto' ? null : dark === true
if (isSSR === true) {
queues.server.push((q, ctx) => {
q.dark = {
- isActive: false,
+ isActive: null,
mode: false,
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.isActive = val === 'auto' ? null : val === true
q.dark.mode = val
},
toggle: () => {
@@ -50,6 +52,7 @@ const Dark = {
ssrSet(initialVal)
queues.takeover.push(() => {
+ document.body.classList.remove('body--dark-auto')
this.set = originalSet
this.set(this.__fromSSR)
})
diff --git a/ui/src/plugins/Dark.json b/ui/src/plugins/Dark.json
index 0107bfa45bd2..d0870d957e26 100644
--- a/ui/src/plugins/Dark.json
+++ b/ui/src/plugins/Dark.json
@@ -10,7 +10,7 @@
"props": {
"isActive": {
"type": "Boolean",
- "desc": "Is Dark mode active?",
+ "desc": "Is Dark mode active? Has value `null` when on SSR and dark set to `auto`",
"reactive": true
},
diff --git a/ui/src/plugins/Loading.sass b/ui/src/plugins/Loading.sass
index 91749188d34f..207f652d8738 100644
--- a/ui/src/plugins/Loading.sass
+++ b/ui/src/plugins/Loading.sass
@@ -1,5 +1,6 @@
.q-loading
- color: #000
+ color: $light-text
+ color: var(--q-color-light-text)
// override q-transition--fade's absolute position
position: fixed !important
diff --git a/ui/src/plugins/Loading.styl b/ui/src/plugins/Loading.styl
index 91749188d34f..207f652d8738 100644
--- a/ui/src/plugins/Loading.styl
+++ b/ui/src/plugins/Loading.styl
@@ -1,5 +1,6 @@
.q-loading
- color: #000
+ color: $light-text
+ color: var(--q-color-light-text)
// override q-transition--fade's absolute position
position: fixed !important
diff --git a/ui/src/plugins/Notify.sass b/ui/src/plugins/Notify.sass
index 4f21a59108a8..7483457db4d5 100644
--- a/ui/src/plugins/Notify.sass
+++ b/ui/src/plugins/Notify.sass
@@ -33,8 +33,10 @@ body.q-ios-padding .q-notifications__list
max-width: 95vw
- background: #323232
- color: #fff
+ background: $notify-background
+ background: var(--q-color-notify-background)
+ color: $dark-text
+ color: var(--q-color-dark-text)
font-size: 14px
@@ -76,7 +78,8 @@ body.q-ios-padding .q-notifications__list
box-shadow: $shadow-1
background-color: $negative
background-color: var(--q-color-negative)
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
border-radius: $generic-border-radius
font-size: 12px
line-height: 12px
diff --git a/ui/src/plugins/Notify.styl b/ui/src/plugins/Notify.styl
index 4f21a59108a8..7483457db4d5 100644
--- a/ui/src/plugins/Notify.styl
+++ b/ui/src/plugins/Notify.styl
@@ -33,8 +33,10 @@ body.q-ios-padding .q-notifications__list
max-width: 95vw
- background: #323232
- color: #fff
+ background: $notify-background
+ background: var(--q-color-notify-background)
+ color: $dark-text
+ color: var(--q-color-dark-text)
font-size: 14px
@@ -76,7 +78,8 @@ body.q-ios-padding .q-notifications__list
box-shadow: $shadow-1
background-color: $negative
background-color: var(--q-color-negative)
- color: #fff
+ color: $dark-text
+ color: var(--q-color-dark-text)
border-radius: $generic-border-radius
font-size: 12px
line-height: 12px