Setting $background-color in common.variables.styl has no effect

[ju11]

Hi,

I try to change the background color of all webpages. I set $background-color but the page stays white. Is it a bug or did I miss something?
Thanks

[rstoenescu]

There’s no $background-color Stylus variable. Just use CSS to set the background of whatever element you want.

[Max]

always check the list of available variables here: https://quasar-framework.org/components/stylus-variables.html .

[ju11]

Sorry, I made a mistake: the name of variable is $body-background, and I set it correctly.
I noticed today that the background appears well on Chrome, but not on Firefox. Very strange! Could someone test it? Set $body-background in common.variables.styl and try it on Chrome and Firefox.

[parag]

I am trying to use the body-background variable, but there is no effect. can you share more details on how to changes the default white background in light mode? I do not have an issue with dark more though.
I am curious about the light mode, which variables control the background color and text color for the overall app

[metalsadman]

@parag https://quasar.dev/style/dark-mode#How-to-style-your-app

[parag]

@metalsadman I am able to change the dark mode background using “–q-color-dark” variable.
In dark mode all components change to the color defined by the dark mode variable. whereas in light mode everything is #fff(white). If use the background: #000; then child components remain white.

What I am looking for is replacing everything in a single background color without playing with css classes for each child components, the default way in which light/dark mode operate.

[Hawkeye64]

Just override this:

body {
    background-color: #fafafa
}