change color site-wise conflicts with "text-color"

[sandroden]

Hi,

I’d like to set a color for fonts site-wise. I used to do that in App.vue in non scoped style section for p element, h* elem…
I just realized that setting a non-scoped style section there will prevent the possibility to use eg: text-color class that will loose against the specificity of a p element. This is demostrated in this codepen (independent from quasar).

Is there a working way to set a default color that does not brake the possibility to use text-color classes?

sandro

[sandroden]

I solved it by setting color on body element. This curiously leave non styled the menu button (toolbar > div > router-link > q-btn) that gets a purple color on firefox and a blue color on chrome. I wasn’t able to find where does it come from and why. Any hints?

[rab]

@sandroden How about using app.sass file for site-wise fonts.

Btw …

p {
  color: green;
}
.text-red {
  color: red !important;
}

<div>
  <p class="text-red">This is red...</p>
</div>

[sandroden]

Thanks @rab, I understand that setting the color on the p element makes a difference but is totally impracticable when the content comes from the user via an editor.

I don’t use any app.sass con (btw I use stylus and quasar.variables.stylus), but that doesn’t seem a solution to me.

The main problem is that text-color applied on the parent will have low impact in some circumtancies, links in particular as those are already directly styled by the user agent, so that to style them the only solution I see is to address them directly (a {color: ...}) or with the class text-color.

In my original case I wanted to style buttons in a router-link in the toolbar and the only option I had was to attach color to each of them.
I I use:

* {
   color: brown ;
}

the style is set everywhere and you cannot almost override (unless inline). Even `<q-btn text-color=“red”> will fail. I you use

body {
   color: brown ;
}

everything seems ok apart from ‘a’ element, in that case the color is blue… (I guess a browser’s default). Adding body a makes it almost ok with something I have not been able to understand. I cant undertand why a button within a router link and a button with to behave differently.

Links in the drawer + q-list style correctly if using text-<color>. A codesandbox example can be found here.