Set entire app to Dark Theme?

[Jezzta667]

Hi Everyone,

Just beginning to explore Quasar and I’m wondering if you can easily set the entire app to be a dark theme (and therefore automatically default all text to white). This was something available in AngularJS-Material and was quite handy.

I have changed the $body-color Stylus variable as well as learning that I can add the ‘dark’ property on inputs etc but obviously it’s not the ideal solution to have to add that to all inputs.

There are no Stylus variables for the color of inputs so any expert suggestions would be greatly appreciated.

I assume some sort of global CSS rules would be the final solution but a dark theme setting would be great!

Thanks a lot.

[SharpBCD]

I want this too. Just leaving this comment here to get notified if anything changes.

[adsaviation]

Yes I would love this as well. Bootstrap has something called variant=“dark” to make it dark. and text automatically light. Now I could add just a class called .dark with card .dark etc, but it would be awesome if there are some themes in there for dark and light flavors.

[s.molinari]

Hi,

I believe there is contemplation being made for a global dark setting, but until then, I’d like to offer this thought. The OP wrote this:

I can add the ‘dark’ property on inputs etc but obviously it’s not the ideal solution to have to add that to all inputs.

I don’t mean to be disrespectful, but this shows a sort of incorrect perspective on what Quasar is offering or rather, what Vue is offering with the SFC system. You don’t have to add the dark prop to all of your inputs, but rather, you should design your own input component only once, with whatever other design or logic you need, and then use your component multiple times in your forms and not Quasar’s, (which means not needing to add the dark prop logic multiple times).

You see, if you think about that, offering a global dark prop won’t help you much, if you are building out your own components. And you really should build out your own components, because of the main reason mentioned above, and that is for your own DRY code.

Just to hit this slight paradigm shift a bit more home. Look at QSelect and the number of things you can do with it. Autocomplete, Filtered Selection, Chips Selection, and more. Imagine having to “set up” each use of QSelect for each use case in multiple forms. That would be ridiculous, right? The solution is to create your own select components, each one doing one use case, but only once! (oh, and with dark prop logic too!)

I hope that gets your mental juices in a whirl.

Scott

[s.molinari]

And, if you have some time on your hands and want to see what I mean in action (not about dark props, but with extending Quasar’s components), have a look at this article.

https://medium.com/quasar-framework/component-building-with-quasar-fc101b6730ae

Scott

[Jezzta667]

@s-molinari I actually did read that article, after I wrote this post, and it did help me design my components in a cleaner, dryer, more Vue-like fashion, so thank you. Adding the ‘dark’ property is not a big deal, but there are multiple components that default to white, such as QCard, QDialog, etc which all have to be addressed with CSS.

What this means is that anybody who wants to jump in and start building their brand new Quasar app with a darker colour scheme are immediately met with a set of micro-puzzles regarding which classes to target with CSS. Given that the Material Spec includes the full spectrum of potential colour schemes, I think it would be very worthwhile offering an easy way to create a global dark theme. Mac OS, Outlook and Chrome Dev Tools have all recently added dark modes, so grey is the new black, apparently.

[s.molinari]

@Jezzta667 - Yes, I dislike going from dark to something light now. I even tried going completely “dark” with Windows 10. Ugh… that failed, as you can imagine.

QCard and QDialog both have dark props, but only affect the text color on purpose. Maybe your dark is a blue? Again, this means you have to create your own “dark”.

I know you understand this @Jezzta667, but for others just coming to Quasar and looking for the “easy way out”, here is what I mean and what you’ll end up having to do to get dark working.

https://codepen.io/smolinari/pen/GzPOZR

You still have to do initial work, but after that, you’ll have your own “style” rolling. Notice the reuse of my my-card component.

Scott

[chelog]

Hey, Vuetify has this feature. But it’s as easy as changing CSS. You just set “dark” prop for app’s top-level container and it adds app--dark css class, which all components have rule for, like .app--dark .button and so on. Think it won’t be such a hard thing to implement

[Robert]

Building a desktop app. I wish dark was easy as well.

[gorsat]

+1 for this feature. These days, as the popularity of dark theming grows, this is one of the first things I look for in a UI framework. Vuetify has it and it makes development much quicker and easier.

[s.molinari]

Please read this issue for now and if and until a better solution is created.

https://github.com/quasarframework/quasar/issues/3968

Scott

[valasek]

Hi all,

this was released in Quasar 1.3.0. See https://dev.to/quasar/hys-1-quasar-1-3-0-15eo and https://quasar.dev/quasar-plugins/dark.

Enjoy.

[metalsadman]

updated my samples sandbox using the new darkmode plugin https://0ybb3.sse.codesandbox.io/table-extensions/dynamic-sample https://codesandbox.io/s/quasar-v1-samples-0ybb3

[Joshua]

@metalsadman Thank you for making the sandbox!

Best,

Joshua

[bekki]

Just use Quasar.Conf.Js file. Go to the framework section. Then, inside, find the section named config.
If there is no such section create it inside framework section. Then inside of it write dark: true. That’s it.