研究一下vaadin的valo这个theme

vaadin的valo theme是一个具有现代web风格的外观定制theme，具有很强的定制能力。

 

现在，我们来修改一下整个页面的背景颜色，改成白色的。

 

1、首先需要一个vaadin的project

2、new一个theme，继承valo theme，例如称为vaadincomponentstheme

3、打开vaadincomponentstheme.scss，加入：

$v-app-loading-text: "Light Valo";

 

$v-background-color: hsl(0, 0, 99.5%);

$v-app-background-color:#fff;

$v-focus-color: hsl(218, 80%, 60%);

$v-border: 1px solid (v-shade 0.6);

$v-border-radius: 3px;

$v-bevel: inset 0 1px 0 v-tint;

$v-textfield-bevel:false;

$v-gradient: v-linear 3%;

$v-shadow: false;

$valo-menu-background-color:hsl(218, 20%, 98%);

$v-friendly-color: hsl(163, 61%, 41%);

$v-error-indicator-color:hsl(349, 66%, 56%);

4、编译theme，生成css

5、把生成的theme目录复制到liferay的VAADIN的theme目录

6、打开portal-ext.properties，加入：

vaadin.theme=vaadincomponentstheme

7、重启liferay，测试

 

效果：应用portlet的背景是白色，原来默认浅灰色。