Question

我尝试将Valo主题从默认更改为 Metro 。在演示页面（http://demo.vaadin.com/valo-theme/）中，您可以从Valo的不同主题中进行选择，请参见右上角。我希望Valo基于Metro风格，但无法找到任何功能或变量来改变它。

我需要更改我们在Eclipse上构建的一些Liferay portlet的主题。

Answer 1

挖掘Valo演示源代码，找到设置一些值，你可以更改Valo的Scheme或主题，你可以检查他们如何管理Metro的样式：https://github.com/vaadin/valo-demo/blob/master/src/main/webapp/VAADIN/themes/tests-valo-metro/_variables.scss，如果需要它也是有其他主题：https://github.com/vaadin/valo-demo/tree/master/src/main/webapp/VAADIN/themes

这是他们用来将计划更改为地铁＆＃39;

的变量

$v-app-loading-text: "Metro Valo"; 
$v-font-family: "Source Sans Pro", sans-serif; 
$v-app-background-color: #fff; 
$v-background-color: #eee; 
$v-focus-color: #0072C6;
$v-focus-style: 0 0 0 1px $v-focus-color;
$valo-menu-background-color: darken($v-focus-color, 10%);
$v-border: 0 solid v-shade;
$v-border-radius: 0px;
$v-bevel: false;
$v-gradient: false;
$v-shadow: false;
$v-textfield-bevel: false;
$v-textfield-shadow: false;
$v-textfield-border: 1px solid v-shade;
$v-link-text-decoration: none;
$v-overlay-shadow: 0 0 0 2px #000;
$v-overlay-border-width: 2px; // For IE8
$v-window-shadow: $v-overlay-shadow;
$v-selection-overlay-background-color: #fff;
$v-selection-overlay-padding-horizontal: 0;
$v-selection-overlay-padding-vertical: 6px;
$v-panel-border: 2px solid v-shade;

只需导入或将其包含在主题文件中即可。

Answer 2

可以从java代码中更改主题。

在Stackoverflow中查看此question或直接在Vaadin Wiki

中查看

如何将Vaadin Valo Theme转换为Metro？

2 个答案: