Get rid of text-white in QBtn
-
Hello,
by default, vanilla QBtn hastext-whiteCSS class. If you work with a very light theme, it makes buttons hard to read unless you make them allflat. Is there a way to prevent or remove this behaviour? Or to configure it, like through thecolorsplugin?
Thanks -
-
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.
Scott
-
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-whitefor 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…
Scott
-
If you go to the material color tools: https://material.io/resources/color/#!/ button content vary regarding the primary color.
For
blue 900the text is white, forlight green 500it’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.
https://quasar.dev/style/theme-builder
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.
Scott
-
Yes is it what I expecting, but I’m pretty sure it’s not working for
text button, onlyicon. 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.
Scott
-
So, the codepen shows that changing the
branddoes not change the buttontext-color, it always stays white.
https://codepen.io/jraez/pen/vYOZxMyI check the code in the doc and it’s explicitly set there:
https://github.com/quasarframework/quasar/blob/dev/docs/src/components/page-parts/theming/ThemeBuilder.vue
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.
Scott
-
Btw, via this discussion and your digging, I’ve learned that little gem of
dark.accenttoo. So, thanks for that!Scott
-
-
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")
$themeis 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.
Scott
