not able to set font-size and background-image in Vaadin custom theme

Question

I am defining my own custom theme on top of Vaadin's valo theme.

Here's the content of the file mycustomtheme.scss:

 //this line works, it sets the background-color of the app to light-blue:
 $v-background-color: hsl(192°, 61%, 51%);

 //the following line is supposed to set the font-color in the app to white but has no effect, the font-color in the app is still black: 
 $v-font-color: rgb(255, 255, 255);

 @import "../valo/valo.scss";


 @mixin mycustomtheme {

     @include valo;

    //the following 3 lines don't have any effect either. The background-image does not get displayed: 
    .defaultView {
        background-image: url("urlOf/Image");
    }
}

The java code for the component, for which the background-image is to be set, is:

    //other code ...
    gridLayout = new GridLayout(4,2);
    gridLayout.setSizeFull();
    gridLayout.addStyleName("defaultView");
    addComponent(gridLayout);
    //more code ...

1.) Why does setting the background-color to blue work, but setting the font-color to white does not work? I checked my code against examples from the Vaadin-team, I can't see what I might do wrong:

https://vaadin.com/docs/v8/framework/articles/ValoExamples.html

2.) Why is the background-image not displayed?