Quasar: Allow to globally set props (example: „dark“) on all components

[florianlink]

We are using a dark style and have to set the „dark“ property on each component that we use.

When an application uses a dark style, it would make sense to globally enable the dark property as default, instead of having to put it into the props of every component.

Especially when the components are created indirectly, e.g. via Dialog plugin, it becomes hard to set the dark property everywhere.

Maybe the default dark property could be part of the quasar.conf.js?

[florianlink]

I helped myself by injecting a dark property with default: true into all Quasar components that support a dark property inside of a boot plugin. It got a bit tricky on the mixins, but works as well.

It would still be nicer to have this as a configurable option.

[mesqueeb]

This is an amazing idea and very helpful for any developer who creates DARK and LIGHT versions of their apps.

However, couldn't it be easily achieved by just passing a state value from vuex?
In any component you could write: dark="$store.state.darkMode"

and then just setting this state value to true or false triggers your whole app. ;)

I'm not sure if all Quasar components get properly re-rendered though.

[metalsadman]

This is an amazing idea and very helpful for any developer who creates DARK and LIGHT versions of their apps.

However, couldn't it be easily achieved by just passing a state value from vuex?
In any component you could write: dark="$store.state.darkMode"

and then just setting this state value to true or false triggers your whole app. ;)

I'm not sure if all Quasar components get properly re-rendered though.

that's actually the blunder op refers too, "setting dark props in every component". a global config like he suggested is much appreciated.

[florianlink]

Exactly, my intent was to avoid having to add the dark property to every component. Although your store state would work, it would mean to add that property all over your code and every developer working on the code has to know/remember that. Eventually you will have QSelect without dark property and it will look bad/strange and someone has to rememeber to add the dark property.

Wouldn‘t it be possible to do dark mode with styling only? Then having a dark property could be obsolete? But probably the dark property swiches more complex things?

[mesqueeb]

I actually think it's bad to have a "dark" property enabled without it being added to the components themselves.
Because that is less specific and thus would make your code less readable. I always think it's better to be specific than to have global properties change the look of things without there being an indication of it on the actual components. 😖

If every component has dark with a boolean it's really clear what's happening. And even in a team, i'm sure a simple "check" before publishing any code resolves your problem about a "dev not knowing". 🥵

Anyway that's just my two cents! 💸

[nothingismagick]

This is something that I have been thinking about for some time, and I have to agree with @florianlink - would you mind sharing the code you used in the boot file to do this? I'll take a look at it and see if there is a way for us to offer this as an app-extension. I know a lot of people would use this, even if @mesqueeb makes a valid point.

My feeling though, is that its important for devs to work the way that they want to work, and not having to declare dark in your 40 component files is something I can totally understand. (Especially if you suddenly want to change behaviour in the middle of your project, and e.g. use dotenv vars to change for specific build targets or something.) Hoist the sail, I say!

[rstoenescu]

I'll do a proper research on this to enable the most generic approach possible. I want to add the support of using a boot file to supply the equivalent of quasar.conf.js > framework > conf too. And this is where "dark" could come into place. I'll post here updates when I get to it.

Note that some components have dark prop only to notify the component that it's rendered on a dark background -- and they require specifying proper bg and text color (no default ones because it would make CSS very hard to override and we'll revert all the nice work I've done in v1 as opposed to 0.17 regarding easy CSS override).

[rstoenescu]

Not saying this can't be done, but I want to avoid any runtime overhead, because performance is VERY important. Will post updates on this as I have time to make progress.

[florianlink]

This is what I do in my boot plugin:

  let dark = ["QField", "QBar", "QCard", "QColor", "QExpansionItem", "QInnerLoading", "QItem",
    "QLinearProgress", "QList", "QMarkupTable", "QOptionGroup", "QRadio", "QSeparator", "QSplitter", "QStepper", "QTable",
    "QTimeline", "QTree", "QUploaderBase",
    "QRange", "QSlider", "QToggle", "QCheckbox"]

  // Force dark property as default:
  for (let c of dark) {
    var comp = Vue.component(c)
    if (comp !== undefined) {
      if (comp.options.mixins !== undefined) {
        for (let m of comp.options.mixins) {
          if (m.props !== undefined && m.props.dark !== undefined) {
            m.props.dark = { type: Boolean, default: true }
          }
        }
      }
      comp.options.props.dark = { type: Boolean, default: true }
    }
  }

[mesqueeb]

@florianlink That's genius! 😃 wouldn't have thought about that ever. Another day, another lesson!

[Basgrani]

This is what I do in my boot plugin:

  let dark = ["QField", "QBar", "QCard", "QColor", "QExpansionItem", "QInnerLoading", "QItem",
    "QLinearProgress", "QList", "QMarkupTable", "QOptionGroup", "QRadio", "QSeparator", "QSplitter", "QStepper", "QTable",
    "QTimeline", "QTree", "QUploaderBase",
    "QRange", "QSlider", "QToggle", "QCheckbox"]

  // Force dark property as default:
  for (let c of dark) {
    var comp = Vue.component(c)
    if (comp !== undefined) {
      if (comp.options.mixins !== undefined) {
        for (let m of comp.options.mixins) {
          if (m.props !== undefined && m.props.dark !== undefined) {
            m.props.dark = { type: Boolean, default: true }
          }
        }
      }
      comp.options.props.dark = { type: Boolean, default: true }
    }
  }

this is great !!, but it would be even more ... if we could later change the mode (dark || light) in a reactive way without having to refresh the page (especially for the dynamically generated components such as: q-dialog -> QField , etc ..., for the rest we can do something like this, :dark="isDark"). Any idea?

[florianlink]

I don’t know if a default value of a property can be reactive... if it can
be, you could try using a vuex reactive variable instead of true as
default. Not sure if that’s possible...

On Wed 1. May 2019 at 15:36, Jorge Gonzalez [e-mail]
wrote:

This is what I do in my boot plugin:

let dark = ["QField", "QBar", "QCard", "QColor", "QExpansionItem", "QInnerLoading", "QItem",
"QLinearProgress", "QList", "QMarkupTable", "QOptionGroup", "QRadio", "QSeparator", "QSplitter", "QStepper", "QTable",
"QTimeline", "QTree", "QUploaderBase",
"QRange", "QSlider", "QToggle", "QCheckbox"]

// Force dark property as default:
for (let c of dark) {
var comp = Vue.component(c)
if (comp !== undefined) {
if (comp.options.mixins !== undefined) {
for (let m of comp.options.mixins) {
if (m.props !== undefined && m.props.dark !== undefined) {
m.props.dark = { type: Boolean, default: true }
}
}
}
comp.options.props.dark = { type: Boolean, default: true }
}
}

this is great !!, but it would be even more ... if we could later change
the mode (dark || light) in a reactive way without having to refresh the
page (especially for the dynamically generated components such as:
q-dialog, etc ..., for the rest we can do something like this,
:dark="isDark"). Any idea?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/quasarframework/quasar/issues/3968#issuecomment-488283675,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABKHPHDZ4ACPGV244XBZGG3PTGMEBANCNFSM4HIKCLXA
.

[Basgrani]

I don’t know if a default value of a property can be reactive... if it can be, you could try using a vuex reactive variable instead of true as default. Not sure if that’s possible...
…
On Wed 1. May 2019 at 15:36, Jorge Gonzalez @.*> wrote: This is what I do in my boot plugin: let dark = ["QField", "QBar", "QCard", "QColor", "QExpansionItem", "QInnerLoading", "QItem", "QLinearProgress", "QList", "QMarkupTable", "QOptionGroup", "QRadio", "QSeparator", "QSplitter", "QStepper", "QTable", "QTimeline", "QTree", "QUploaderBase", "QRange", "QSlider", "QToggle", "QCheckbox"] // Force dark property as default: for (let c of dark) { var comp = Vue.component(c) if (comp !== undefined) { if (comp.options.mixins !== undefined) { for (let m of comp.options.mixins) { if (m.props !== undefined && m.props.dark !== undefined) { m.props.dark = { type: Boolean, default: true } } } } comp.options.props.dark = { type: Boolean, default: true } } } this is great !!, but it would be even more ... if we could later change the mode (dark || light) in a reactive way without having to refresh the page (especially for the dynamically generated components such as: q-dialog, etc ..., for the rest we can do something like this, :dark="isDark"). Any idea? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3968 (comment)>, or mute the thread https://github.com/notifications/unsubscribe-auth/ABKHPHDZ4ACPGV244XBZGG3PTGMEBANCNFSM4HIKCLXA .

Hi, I'm currently using vuex, I made a small modification of your previous code:

but, it is not reactive ...

Also check another thing, for dynamically created components this method does not work, for example in the table, "q-dialog -> q-field", "q-field" is not marked as "dark":

[florianlink]

Have you tried my code? I tested it with QField... but QTable is another
issue, it has an explicit white color in the style sheet, so you have to
specify a dark background color as style/class.

On Wed 1. May 2019 at 16:43, Jorge Gonzalez [e-mail]
wrote:

I don’t know if a default value of a property can be reactive... if it can
be, you could try using a vuex reactive variable instead of true as
default. Not sure if that’s possible...
… <#m_-9021424269837578169_>
On Wed 1. May 2019 at 15:36, Jorge Gonzalez @.*> wrote: This is what
I do in my boot plugin: let dark = ["QField", "QBar", "QCard", "QColor",
"QExpansionItem", "QInnerLoading", "QItem", "QLinearProgress", "QList",
"QMarkupTable", "QOptionGroup", "QRadio", "QSeparator", "QSplitter",
"QStepper", "QTable", "QTimeline", "QTree", "QUploaderBase", "QRange",
"QSlider", "QToggle", "QCheckbox"] // Force dark property as default: for
(let c of dark) { var comp = Vue.component(c) if (comp !== undefined) { if
(comp.options.mixins !== undefined) { for (let m of comp.options.mixins) {
if (m.props !== undefined && m.props.dark !== undefined) { m.props.dark = {
type: Boolean, default: true } } } } comp.options.props.dark = { type:
Boolean, default: true } } } this is great !!, but it would be even more
... if we could later change the mode (dark || light) in a reactive way
without having to refresh the page (especially for the dynamically
generated components such as: q-dialog, etc ..., for the rest we can do
something like this, :dark="isDark"). Any idea? — You are receiving this
because you were mentioned. Reply to this email directly, view it on GitHub
<#3968 (comment)
https://github.com/quasarframework/quasar/issues/3968#issuecomment-488283675>,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABKHPHDZ4ACPGV244XBZGG3PTGMEBANCNFSM4HIKCLXA
.

Hi, I'm currently using vuex, I made a small modification of your previous
code:

[image: Captura de pantalla 2019-05-01 16 34 27]
https://user-images.githubusercontent.com/3121125/57022332-20bc8800-6c2f-11e9-9e47-ee0e66ac64da.png

but, it is not reactive ...

Also check another thing, for dynamically created components this method
does not work, for example in the table, "q-dialog -> q-field", "q-field"
is not marked as "dark":

[image: Captura de pantalla 2019-05-01 16 42 31]
https://user-images.githubusercontent.com/3121125/57022681-26669d80-6c30-11e9-96e0-38de79fc6932.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/quasarframework/quasar/issues/3968#issuecomment-488301598,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABKHPHEGAE66SB5Z2NVAL63PTGUAZANCNFSM4HIKCLXA
.

[florianlink]

Btw. created() in a mixin will be too late, you need to try injecting the
reactive value in a boot plugin on the global components.

On Wed 1. May 2019 at 16:43, Jorge Gonzalez [e-mail]
wrote:

I don’t know if a default value of a property can be reactive... if it can
be, you could try using a vuex reactive variable instead of true as
default. Not sure if that’s possible...
… <#m_-9021424269837578169_>
On Wed 1. May 2019 at 15:36, Jorge Gonzalez @.*> wrote: This is what
I do in my boot plugin: let dark = ["QField", "QBar", "QCard", "QColor",
"QExpansionItem", "QInnerLoading", "QItem", "QLinearProgress", "QList",
"QMarkupTable", "QOptionGroup", "QRadio", "QSeparator", "QSplitter",
"QStepper", "QTable", "QTimeline", "QTree", "QUploaderBase", "QRange",
"QSlider", "QToggle", "QCheckbox"] // Force dark property as default: for
(let c of dark) { var comp = Vue.component(c) if (comp !== undefined) { if
(comp.options.mixins !== undefined) { for (let m of comp.options.mixins) {
if (m.props !== undefined && m.props.dark !== undefined) { m.props.dark = {
type: Boolean, default: true } } } } comp.options.props.dark = { type:
Boolean, default: true } } } this is great !!, but it would be even more
... if we could later change the mode (dark || light) in a reactive way
without having to refresh the page (especially for the dynamically
generated components such as: q-dialog, etc ..., for the rest we can do
something like this, :dark="isDark"). Any idea? — You are receiving this
because you were mentioned. Reply to this email directly, view it on GitHub
<#3968 (comment)
https://github.com/quasarframework/quasar/issues/3968#issuecomment-488283675>,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABKHPHDZ4ACPGV244XBZGG3PTGMEBANCNFSM4HIKCLXA
.

Hi, I'm currently using vuex, I made a small modification of your previous
code:

[image: Captura de pantalla 2019-05-01 16 34 27]
https://user-images.githubusercontent.com/3121125/57022332-20bc8800-6c2f-11e9-9e47-ee0e66ac64da.png

but, it is not reactive ...

Also check another thing, for dynamically created components this method
does not work, for example in the table, "q-dialog -> q-field", "q-field"
is not marked as "dark":

[image: Captura de pantalla 2019-05-01 16 42 31]
https://user-images.githubusercontent.com/3121125/57022681-26669d80-6c30-11e9-96e0-38de79fc6932.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/quasarframework/quasar/issues/3968#issuecomment-488301598,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABKHPHEGAE66SB5Z2NVAL63PTGUAZANCNFSM4HIKCLXA
.

[Basgrani]

@florianlink

Yes, I know of the problem in the "Table" I fixed it with css. But I refer to this component:

... that is inside the slots of the "table" but is actually a "q-field" is not marked as "dark" (I've also tried with its code, but it did not work either), for some strange reason ...

[2x2xplz]

Although I recognize that my issue #4393 and this one both involve pre-processing, there are significant differences. In my case, certain values, strings and code paths will NEVER be active on a specific platform, making those JavaScript fragments perfect for build-time evaluation. Meanwhile the original request (for a global dark theme) is for convenience and ease of development

my intent was to avoid having to add the dark property to every component

, but nothing that affects run-time performance.

[rstoenescu]

@2x2xplz will answer you on your initial ticket.

[bernhardberger]

Is there any solution in sight? I was in the middle of porting my SPA from a Vuetify base to quasar and just realized that I can't set a global dark mode which is absolutely essential for my app..

[mesqueeb]

@bernhardberger there are several workarounds available (which you can use right now) in this thread. Just scroll up and read around. 😉

The easiest is just use a global vuex state value or something for ever component with: :dark="globalDarkMode" or something.

[pdanpdan]

Dark mode is now available in v1.3.0.