Set entire app to Dark Theme?
Jezzta667 last edited by
@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 last edited by 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.
You still have to do initial work, but after that, you’ll have your own “style” rolling. Notice the reuse of my
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--darkcss class, which all components have rule for, like
.app--dark .buttonand so on. Think it won’t be such a hard thing to implement
Building a desktop app. I wish dark was easy as well.
+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 last edited by
Please read this issue for now and if and until a better solution is created.
valasek last edited by
metalsadman last edited by
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
@metalsadman Thank you for making the sandbox!
Quasar.Conf.Jsfile. Go to the
frameworksection. Then, inside, find the section named
If there is no such section create it inside framework section. Then inside of it write
dark: true. That’s it.