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

Question

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

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

Answer 1

挖掘 Valo 演示源代码，发现设置一些值可以更改 Valo 的方案或主题，您可以查看它们如何管理 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;

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