现在，新的Valo theme是Vaadin 7.3应用程序中的默认值。该主题使用比以前的默认Reindeer主题大得多(更大和更高)的小部件(按钮，字段等)以可视方式呈现。
这种外观现在在Android和iOS 7/8的移动应用程序以及某些网站中很流行。但是这些上下文只是在短短几分钟内的简短使用。相比之下，人们使用面向业务的桌面样式应用程序进行更长的工作时间，可能需要一整天的时间。面向业务的应用程序以更密集的格式显示更多信息。对于此类使用，Valo主题的默认渲染是不合适的。具体来说，字体太细和微弱，并且大小太大对于字体和小部件而言。
Valo声名claim起是因为它的构建是可调整的，并且仅需修改几行Java和/或CSS代码即可轻松实现。有没有人尝试过将Valo更改为类似于驯鹿主题的大小？有任何源代码或指令要共享吗？
明确地说，我的目标只是减少视觉高度和宽度以及它们的字体大小。我并不是在问改变设计，我很感激只是为了获得一些像素空间。我只是在寻找最简单，最安全的方法来使Valo小部件的尺寸与Reindeer主题中相应部件的视觉尺寸相匹配。
在短期内，我将继续覆盖默认值以使用Reindeer，如此StackOverflow.com问题Change from “Valo” theme to “Reindeer” in new Vaadin 7.3 app所述。但从长远来看，Vaadin团队将赌注押在Valo上。最终，驯鹿会失宠，所以我想学习如何过渡。
我确实打开Ticket # 14,909来建议提供一个开关，以使Valo自动缩小为驯鹿方案。
有人误读了这篇文章:我们不是在谈论磁盘上的存储大小。我们在这里谈论像素，而不是位。视觉大小，而不是文件大小。图形布局，而不是widgetset优化。
莫名其妙地以“过于宽泛”结束了这个问题。然而，它仍在继续接受投票。我请赞成投票的人重新投票。
最佳答案
要使用 valo主题替代驯鹿主题，您可以配置用于valo的主题变量，如下所示:
$v-font-size: 12px;
$v-unit-size: 26px;
$v-unit-size--small: 20px;
$v-unit-size--tiny: 18px;
$v-layout-margin-top: 18px;
$v-layout-margin-right: 18px;
$v-layout-margin-bottom: 18px;
$v-layout-margin-left: 18px;
$v-layout-spacing-vertical: 7px;
$v-layout-spacing-horizontal: 6px;
(来源:Valo Demo Project - Reindeer Theme)
Book of Vaadin - Valo Theme部分深入说明了将这些变量放在何处以及如何自定义主题。