Can't customize built-in theme

Hi! First of all thanks a lot for such a great framework, fantastic job!

I’m new to vaadin and actually new to Java (I started to learn java within i investigated vaadin).

There is several similar problems with customizing built-in themes.I followed the steps described in the book, but I can’t achieve the desired result.

The task is simple : I wanted to override a few classed from built-in theme, such as

This is my project structure , and picture from Chrome structure:

The content of cdstheme/style.css :

@import url(../reindeer/styles.css);


And in the init function I added:

package com.example.newtest;

import com.vaadin.Application;
import com.vaadin.ui.*;

public class NewtestApplication extends Application {
	public void init() {
		Window mainWindow = new Window("Newtest Application");
		mainWindow.setContent(new NewComposite());


But after I run the project the page is still under reindeer theme, although it should be black, as you can guess. What’s going wrong?

Vaadin version : 6-8-1, browser : Google Chrome.

Thx for help in advance!

P.S. Sorry for my english:*)

Use the “Elements” tab of developer tools to see what style rules apply to each element and what gets overridden by what. With developer tools you can also check that the theme gets loaded and there is no problem with stale caches (e.g. Chrome tends to cache CSS aggressively even when you tell it not to do so, several forced refreshes with Ctrl-F5 might help), server working directories etc.

Maybe something for .v-generated-body or .v-app overrides your rule, or something inside the body does?

I also tried to follow by your advice, and unfortunately there is still no overriden styles. Nothing but reindeer theme is loaded. I aslo tried to clear Chrome cache, cause I know that it tends to cache css aggressively - still reindeer theme. It seems to my that I did not properly organized the structure of my project. Obviously Chrome load my
, but Chrome ould’t understand that line:
@import url(…/reindeer/styles.css);
. Still can’t figure out what’s the problem?!

.v-app {
background-color: black;

doesn’t work?

i removed .scss files
then it worked
i have no idea why and what i broke.