Как создать разные темы на вершине Вало в Ваадине?

Question

Теперь vaadin 7.3 вышел, и у него очень красивый Valo Theme. Но я не знаю, как импортировать его в свой проект? Теперь я использую тему по умолчанию с моими специальными файлами scss. Я хотел бы попробовать Valo. Пожалуйста, помогите мне, как импортировать тему valo в мой проект.

Подробнее, как я могу выбрать стили темы? Valo Theme Demo имеет различные стили темы, такие как По умолчанию, Blueprint, Dark, Metro, Flat. Как выбрать эти категории, как я желаю?

Answer 1

прочитайте документацию: https://vaadin.com/book/vaadin7/-/page/themes.valo.html#themes.valo.use

есть целый раздел, посвященный Вало

разные темы на вершине Вало, как видно в valo-demo все сделано с установкой основных переменных SASS видели в книге.

например. https://github.com/vaadin/valo-demo/blob/master/src/main/webapp/VAADIN/themes/tests-valo-flatdark/_variables.scss

Answer 2

В дополнении к принятому ответу, вы можете указать тему с помощью @Theme аннотацию на классе UI и расширить тему, создав папку с названием вашей темы под VAADIN\themes.

Внутри этой папки вы создать styles.scss и .scss:

styles.scss

@import "licensing.scss"; 

.licensing { 
    @include licensing; 
} 

licensing.scss

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

@mixin licensing { 
    @include valo; 
} 

Тема аннотация: Example on github.

Тематические файлы: Example theme folder.