Get rid of text-white in QBtn

  • Hello,
    by default, vanilla QBtn has text-white CSS class. If you work with a very light theme, it makes buttons hard to read unless you make them all flat. Is there a way to prevent or remove this behaviour? Or to configure it, like through the colors plugin?

  • Thanks, but I mean globally and not changing all buttons everywhere.

  • Well, if you build your own button component with the colors you want and use it everywhere instead of Quasar’s, then it will be globally the same and if you decide you want to change the colors, you only change your custom component, right? Or, you can make the value dynamic and via Vuex set the value globally too. There are a few ways to do this in devland. There isn’t a direct way in Quasar except via the prop.


  • I already use vuex to store my application themes/theme with extensive usage of setBrand/Dark plugins. I’ll rewrite all my buttons to get the color from my theme object but I think the arbitrary add of text-white for button regardless dark/light is not the best choice.

    Thanks for the hints!

  • Well, from a Material Design aspect and seeing that button color is a form of emphasis, flat = low emphasis, outlined = medium emphasis, default = high emphasis, the darker color with white text makes some sense to make the button stand out. Just sayin… 😁



  • If you go to the material color tools:!/ button content vary regarding the primary color.

    For blue 900 the text is white, for light green 500 it’s black. There is a default logic here having a “text” color readable regarding the background color.

    You define primary/secondary color AND text color on primary/secondary color.

  • Interesting. I was looking for something in particular and ran into this.

    Click on “Accent”, change the color to something lighter and watch the color of the icon. I’m wondering if using brand colors will get you what you are expecting…

    If you aren’t into trying it out, I’ll try it out. 😄


  • Yes is it what I expecting, but I’m pretty sure it’s not working for text button, only icon. I’m trying to do a codepen for that.

  • Well, if that is the case that the text doesn’t change like the icon, and you get the code pen working to show it, then I think it could be entered as a bug in GH.


  • So, the codepen shows that changing the brand does not change the button text-color, it always stays white.

    I check the code in the doc and it’s explicitly set there:
    line 63 :text-color="dark.accent === true ? 'white' : 'black'"

    Doing that on every button of an app is not very DRY 🙂

  • You don’t have to do it for everyone button. Build your own button component with Quasar’s and set the prop and use your own button everywhere. Of course, if you have already built out your app, you’ll need to refactor it.


  • Btw, via this discussion and your digging, I’ve learned that little gem of dark.accent too. So, thanks for that! 😁


  • I have my themes fixed in json files, so I pass the text-color directly everywhere when I need with something like that:
    q-btn(color="primary" :text-color="$theme.primaryText")
    $theme is an object injected in a boot file and not all buttons have a high emphasis
    It delegates the responsibility to have a readable color to the design.

    but I like your idea and I think it should be the default behavior in quasar. if q-btn does not have an explicit text-color, then q-btn should set it to white/black according to btn color with Quasar.colors.luminosity(this.btnColor) <= 0.4

  • Well, then there’d need to be two different props for text-color (the light and dark version instead of “white” and “black”) and the “0.4” would need to be hard coded or it would need another prop. Maybe someone will think the switch should happen with lighter or darker colors? Nah. Sometimes somethings are good to keep in devland. It’s just a matter of knowing it can be done. 😁


Log in to reply