如何在Vaadin的Valo之上创建不同的主题？

Question

现在vaadin 7.3已经问世,它拥有非常漂亮的Valo主题.但我不知道如何将它导入我的项目？现在我使用我的自定义scss文件的默认主题.我想品尝Valo.请有人帮我如何将valo主题导入我的项目.

更重要的是,我如何选择主题样式？Valo Theme Demo有不同的主题风格,如Default,Blueprint,Dark,Metro,Flat.如何按我的意愿选择这个类别？

Answer 1

除了接受的答案之外,您还可以使用@ThemeUI类上的注释指定主题,并通过创建一个主题名称为的文件夹来扩展主题VAADIN\themes.

在该文件夹中,您将创建styles.scss和.scss:

styles.scss

@import "licensing.scss";

.licensing {
  @include licensing;
}

licensing.scss

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

@mixin licensing {
  @include valo;
}

主题注释:github上的示例.

主题文件:示例主题文件夹.

Answer 2

阅读精细手册:https://vaadin.com/book/vaadin7/-/page/themes.valo.html#themes.valo.use

有一整节致力于Valo

在valo-demo中看到的Valo顶部的不同主题都是通过设置书中看到的主要SASS变量来完成的.

例如https://github.com/vaadin/valo-demo/blob/master/src/main/webapp/VAADIN/themes/tests-valo-flatdark/_variables.scss