For components provide a stylus alternative file that uses (more) variables

[dgk]

The components were developed with a bunch of styling in mind like the field component

      <q-field color="purple-12" label="Label" stack-label>
        <template v-slot:prepend>
          <q-icon name="event" />
        </template>
        <template v-slot:control>
          <div class="self-center full-width no-outline" tabindex="0">{{text}}</div>
        </template>
      </q-field>

Here the color prop is used to color the active/focused state. Which is great. One can even bind to it. But what one can’t do is bind to a stylus variable. Which means if you want to control the color outside of the script then you have to find the particular element/class in the field component that controls that element in the component. Then you can style it in stylus (i.e. theme it).

The time consuming activity for me has been to track down the tricky the classes. Especially painful are the ones that come and go. For example in the field component the label element has a no-pointer-events class added and removed as you click in the field. If you want to style that then you have to do this.

.q-field__label
  rfs($rfs-base-font-size * $field-font-factor)
  color $field-label-color
  padding-bottom .7em // needs to be dynamic based on font size
  &.no-pointer-events
    rfs($rfs-base-font-size * $field-font-factor * $field-label-font-factor)
    padding-bottom .5em // needs to be dynamic based on font size

So what then is the class that goes with that color prop. Good question. If you fire up the inspector and then click into the field you may or may not keep that focused so you can see that class that is added/removed.

There be my point. I’m sure for static theming everyone is happy they can color things like some color in a component with a prop but to theme an entire front end requires knowing most of the classes.

so could you find out in the code? Sure

https://github.com/quasarframework/quasar/blob/dev/ui/src/components/field/QField.styl

so with a bit of investigating you can come up with the selector from the above file

.q-field--focused
  .q-field__control-container
    background red

BUT, that doesn’t help to set the color of that transition line at the bottom on the control container.

So I am suggesting that stylus sheets for quasar use more variables to allow users to theme without the pain of
discovering all the classes/selectors to make it so like I have done. Not everyone can be or wants to be a css guru.

Those variables can have defaults just like what is more static coded now.

I’ve already done this for the critical ones (item, field, expansion, list) already that I now have pretty fine grain control using stylus variables. The effort is well worth it cause now with changing a couple stylus variables and/or my branding colors I can totally change the look.

for example here is my q-field stylus file

// QUASAR COMPONENT DEFAULT STYLING
// ===================== Q FIELD COMPPONENT ============================

$field-font-factor = 1.5  // relative to base font size
$field-label-font-factor = 1 // relative to field font size

$field-label-color  = $secondary-1
$field-text-color   = white
$field-color        = $secondary-5

// Classes
.q-field__native
  rfs($rfs-base-font-size * $field-font-factor)
  .q-checkbox__label
    color $field-text-color

.q-field__label
  rfs($rfs-base-font-size * $field-font-factor)
  color $field-label-color
  padding-bottom .7em // needs to be dynamic based on font size
  &.no-pointer-events
    rfs($rfs-base-font-size * $field-font-factor * $field-label-font-factor)
    padding-bottom .5em // needs to be dynamic based on font size

.q-field
  // margin .5em
  padding .2em 1em
  background $field-color

  &.checkbox
    padding 0
    .q-field__control-container
      padding-top 0

.q-field--focused
  .q-field__control-container
    background red

here is how it looks.

[s.molinari]

Hi dgk. Thanks for the input and feedback. If I may ask, would you be interested in creating an RFC for your thoughts to improve Quasar in terms of Design/ Styling/ Theming for v2.0? Don’t keep yourself reduced to this situation, but go “hog wild” in imagining a new way of designing with Quasar.

This is just me, but my wish would be that components aren’t styled in any one way to begin with. But rather, they are first “styleless”. Then, there would be a “core Design” that can be added to your app (i.e. Material, Bootstrap, Tailwind, etc.). Then there would be a “Theme” choice or even set of choices that can be added. But, that is just me and my ideas. I’m not a designer.

We can continue this discussion here, if you’d like. I guess bottom line is, this suggestion more than likely won’t be done. But, for v2.0, we can make designing in Quasar even better.

Scott