Theme Builder Presets

  • Are there any alternate presets available for the Theme Builder?

    I searched the forum, but didn’t find any mention of the Theme Builder that might point me in the right direction.

    I also tried a Google search but that didn’t find anything either.

  • What do you mean by alternate presets?


  • @s-molinari

    Alternate Preset = a set of predefined colours.

    For example, the “Standard” Preset …

    Primary #027BE3
    Secondary #26A69A
    Accent #9C27B0
    Positive #21BA45
    Negative #C10015
    Info #31CCEC
    Warning #F2C037

    It might be useful to provide a few other “presets” … eg, Bright, Muted, Shades of grey … and so on.

    I’m not good with colours as I suffer from red/green colour-blindness.

    It would be good to provide a few alternative starting points.

  • Ah. Ok. I would imagine it wouldn’t be too hard to build presets into the Theme Builder. In fact, I could imagine something like a simple color picker and based on the selection, the colors are generated automatically with some built in design rules. But, if this idea were to be suggested in the quasar repo on Github as an improvement, it would definitely be going to the bottom of the already huge to-do list and won’t be looked at until sometime after v1.0 goes final. I’m sure you understand. 😄


  • @s-molinari I understand that completely…

    I actually wondered if this could become a component QThemeBuilder … with instructions on how we could use the “export” as an “import” … so that individual users of our finished projects to use their own custom colour themes.

  • Just be aware, and maybe you already know this, but that method of styling/ theming isn’t really dynamic or possible during runtime. Each theme would need a rebuild of the application and in a multi-tenant application, might not be totally feasible. What you’d need to do is build out your own components doing something similar as to what the Theme Builder does itself via dynamic class declarations like

    :class="`bg-${color} text-${dark[color] === true ? 'white' : 'black'}`"


  • @s-molinari A page in the docs explaining something like that was exactly what I meant by “with instructions on how we could use the export as an import”

    You’ve just explained exactly how we could achieve it … many thanks,

  • Um. Well, not as an import. 😄 But yeah, dynamic styling is possible, it just adds overhead. One should think about implementing dynamic styling wisely. That’s also the reason why dynamic styling (other than the dark prop and other minor styling props) is not completely built into Quasar. There is just too much to cover and being opinionated here will only cause major headaches for the development of Quasar and even the applications that are built with it. I’m sure there are other reasons, like avoiding bloat and lower performance too. That’s just my take also.


  • @s-molinari I agree with you regarding all those points … however, as Quasar grows, and extends it’s reach, I think run-time styling will be an issue many deveolers might wish to consider at some stage … but, yes, it should definitely be an optional thing rather than a built-in thing.

  • It’s definitely possible and definitely optional. 😄 The way it should be.


Log in to reply