java - 如何将Vaadin Valo Theme更改为Metro？

我正在尝试将Valo主题从默认更改为 Metro 。在演示页面(http://demo.vaadin.com/valo-theme/)中，您可以从Valo的不同主题中进行选择，请参阅右上角。我很想让Valo基于Metro风格，但是找不到任何函数或变量来更改它。

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

最佳答案

挖掘Valo演示源代码，发现设置了多个值可以更改Valo的Scheme或主题，可以检查它们如何在Metro上管理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

这是他们用来将方案更改为“Metro”的变量:

$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;

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

关于java - 如何将Vaadin Valo Theme更改为Metro？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29290659/