Set default background color

Flow
1

What I want to do is set the background color in the browsers main window and set the background color for all panels and layouts to TRANSPARENT, that the the color of the main window shows through. I also do not want to effect the color of the controls on the screen. The problem is that I can not figure out the CSS to make that happen.

Thank you
Freddy

2

You need to set the v-app element as transparent. If using Valo, you can do that with:

$v-app-background-color: rgba(255,255,255,0.0);

Note that while the backgrcolor is transparent, Valo uses the RGB components to determine other component colors. Using keyword “transparent” would result in Sass compilation failure.

If not using Valo, you can define it with a regular CSS rule for the v-app element. Just note that the element is the same one as the one with the theme name. You may need to add some specificity to the rule, for example by including the theme name or some outer element.

In styles.scss:

.mytheme {
    @include addons;
    @include mytheme;
}

body {
    background: purple; /* This will show through */
}

.mytheme.v-app {
    background-color: transparent;
}

You could probably do that with the Sass parent selector as well.

Note that some inner components may have non-transparent colors as well.