valo dark theme seems to make Grid broken

I’m using 7.4.3 Grid. No probs with standard Valo or blueprint, facebook, light, even raindeer, runo, chameleon.

However if I set it to use dark. then the grid goes bonkers, contents jump out of grid etc.

Anyone else see this?

Pity the valo demo doesn’t use a Grid.


Grid works for me with $v-app-background-color: #000000; as well as with the dark settings given in the
Valo Examples

…or how do you set the dark colors for Valo?

By using the test-valo-dark them from valo demo.


$v-app-loading-text: “Dark Valo”;
$v-background-color: #444d50;
$v-focus-color: #07a9ca;
$v-focus-style: 0 0 3px 2px $v-focus-color;
$v-bevel-depth: 40%;
$v-gradient: v-linear 12%;
$v-border-radius: 10px;
$v-font-family: Roboto, sans-serif;
$v-font-weight: 400;
$v-font-weight–header: 400;
$v-bevel: inset 0 1px 2px v-tint, inset 0 0 1px (v-tint 0.1);
$v-shadow: 0 0 0 3px rgba(0,0,0,0.32), 0 1px 0 3px rgba(255,255,255,0.14);
$v-textfield-bevel: inset 0 2px 2px v-shade;
$v-textfield-shadow: $v-shadow;
$v-unit-size: 40px;
$v-overlay-shadow: 0 0 0 3px (v-shade 8), 0 5px 10px (v-shade 4);
$v-component-group-spacing: 6px;

@import “…/valo/valo”;

Works for me.

It’s odd if Valo works OK with more normal settings. Otherwise, it would sound like you have some version incompatibility, such as in the theme or widget set, or something else. You can check that the theme has compiled properly by opening the compiled styles.css and look for the rules for Grid.

I hope you’re not using $v-included-components to optimize the theme and forgot to add grid.

Actually was my fault. For some reason I had a styles.css in there (i.e. compiled from the scss).

Didn’t have it for any of the other themes, hence why they worked fine.

It was there for ages, but didn’t make itself visible and haven’t been using Grid, until right now.

So, a big “doh!”.