Extend standard chameleon with customization from online editor

I customized the cameleon theme using this editor: http://demo.vaadin.com/chameleon-editor
Then I downloaded the jar and saw that it only contains a css file with very few rules, but importing the original chameleon one. However, when I put this jar into /WEB-INF/lib and add to my Eclipse project, I’m able to use it by specifying


The custom colors seem to work somehow, but everything else is messed up, i.e. font is sans-serif and all icons are gone. On the console, I see

Information: Requested resource 
[/VAADIN/themes/reddish-chameleon/favicon.ico] not found from filesystem or through class loader.
Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.

How can I keep the original chameleon theme and just extend it?


Hello Cedric,

I have a similar problem to integrate the my-chameleon theme.

Would be nice to get a solution.

I unpacked the original chameleon theme from the JAR to VAADDIN-themes folder and openend a new my-chameleon folder and put the styles.css into it.

Made many trials but it doesn´t work.

Web page looks deranged.

I don´t know how to integrate it.

The Vaadin 7 book doesn´t give enough information.

Hope to get response from vaadin team.

Regards Alex.

Hi guys,

The chameleon theme color editor isn’t updated yet to produce Vaadin 7 compatible selectors.

There are two options to make it work: either convert the editor output to be Sass compatible (the new Vaadin 7 way), or convert the editor output to use legacy-styles.css (deprecated backwards compatibility way).

Option #1

  • Extract the the styles.css from the JAR which you download from the editor
  • Place it into your VAADIN/themes/my-chameleon folder and rename it to e.g. colors.scss
  • Modify the file like so:
    • Remove the first line (@import…)
    • Add
      @mixin colors {
      to the beginning of the file
    • Close the mixin with a curly brace in the end of the file[code]
      @mixin colors {


[/code] - Find & replace
(prepend with an ampersand)

  • Create a file named styles.scss, and add the following content[code]
    @import “…/chameleon/chameleon”;
    @import “colors”;

.my-chameleon {
@include chameleon;
@include colors;


Option #2

  • Extract the the styles.css from the JAR which you download from the editor
  • Place it into your VAADIN/themes/my-chameleon folder
  • Modify the first line from
    @import “…/chameleon/styles.css”;
    @import “…/chameleon/legacy-styles.css”;

I tested both options, and they should work with 7.1 nightly at least. I think there might be some issues with theme names that include a dash “-”, but that’s fixed in 7.1 at least. So be sure to try out with a theme name without a dash as a last option.

Hello Jouni,

many, many thanks for your help!

I tried your solution #1 and it seems to work.
I removed the @optional-generated-shadow clause because it caused a message.

I´m not sure what the change from .v-app to &.v-app means but it works.

Finally i have three files:
colors.scss (modified as described)
mychameleon.scss (the new theme autogenerated refering to chameleon)
styles.scss (modified as described)

Sorry, I´m a Vaadin beginner and only know general things about css. So many questions came up after many, many trials and I didn´t wanted to give it up at this point.

Yesterday I tried following:

style.scss file:

@import "mytheme.scss";

.mytheme {
  @include mytheme;

mytheme.scss file:

@import "../chameleon/chameleon.scss";
@mixin mytheme {

  @include chameleon;
  - here all the stuff from the style.css content (downloaded from jar  from my-chameleon) from [u]
.v-app {
[/u]  to  [u]
[/u]at eof -

I omitted the hyphen in the file name as a precaution and removed the @optional-generated-shadow clause.

This example seems to work in my little test application. Therefore it is only a test application I don´t know if there are any pitfalls.

The installation is Vaadin 7.0.5 on an eclipse juno (windows 7).

Unfortunately the integrated browser is not reliable - it shows different results as a real browser although it startet new after every compiling process - so the tests took longer than necessary…

I will try your suggestion #2 also.

Best Regards

I m using vaadin 7.1.10…When i m trying 1st option i m getting below error’s…I have done same as u mentioned…

java.lang.Exception: Mixin Definition: colors not found

com.vaadin.sass.internal.parser.SCSSParseException: Error when parsing file C:\Users\saipraneeth\Desktop\Vaadin.metadata.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\Mobile_mail1\VAADIN\themes\mytheme\colors.scss
Encountered “” at line 340, column 9.
Was expecting one of:

“}” …
“+” …
“>” …
“~” …
“[” …
“*” …
“&” …
“.” …
“:” …

@include” …
@debug” …
@warn” …
@each” …
@if” …
@extend” …
@content” …

@media” …
@page” …
@font-face” …

I m new to vaadin …plz help me…



Seems like there’s an error in the Sass compiler when it tries to read the colors.scss file.

Try adding a line break to the end of the color.scss file, see if that helps.


I was having the same mixin exception as above when using the Chameleon “blue” theme although everything worked fine for the “black” one. Eventually I tracked it down to these lines :

.v-table-scrollposition {

around line 89 of the generated styles.scss, when I replaced them with the equivalent code from the “dark” theme:

.v-table-scrollposition {
    text-shadow: 0 1px 0 rgb(29,29,29)

Everything worked.
Hope this helps!

13466.docx (265 KB)
13467.xml (5.57 KB)
13468.java (1.68 KB)
13469.java (7.47 KB)


I am newbie in Vaadin and I am doing my first app, I wanted to change theme and I followed some tips here.

The point when I was using the theme by default it was like capt1 (see attached) but now I just downloaded my-chameleon theme and tried to set it up and it takes colours and so on but it is a bit messed up “even after trying both Options”, you can see it in capt2 (attached).

Is there a way to fix that?

Thank you in advance for your time and responses.