如何将 Vaadin Valo 主题更改为 Metro？答案

【问题标题】：How to change Vaadin Valo Theme to Metro?如何将 Vaadin Valo 主题更改为 Metro？
【发布时间】：2015-03-26 23:21:55
【问题描述】：

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

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

【问题讨论】：

为什么不看看源码，他们是怎么做到的？对于实际改变的行为：github.com/vaadin/valo-demo/blob/master/src/main/java/com/… 和主题本身：github.com/vaadin/valo-demo/tree/master/src/main/webapp/VAADIN/…
是的，谢谢，他们使用一组变量来改变 Valo 主题的外观。我今天测试它并且工作正常。会发布一个答案以防万一。

标签： java liferay vaadin vaadin-valo-theme

【解决方案1】：

挖掘 Valo Demo 源代码，发现设置多个值可以更改 Valo 的 Scheme 或主题，您可以查看它们如何管理 Metro on 的样式：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;

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

【讨论】：

【解决方案2】：

可以通过 java 代码更改主题。

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

【讨论】：

谢谢，但我试图在 SCSS 上仅使用 Valo 主题来更改它，因为它有不同的方案。只需通过设置不同的变量值以赋予主题不同的风格来找到解决方案。