java - 将 Valo 主题的间距和小部件大小缩小到 Reindeer 主题

Question

新Valo theme现在是 Vaadin 7.3 应用程序中的默认值。此主题以比以前的默认值大得多(更宽和更高)的小部件(按钮、字段等)视觉呈现 Reindeer主题。

这种外观现在在 Android 和 iOS 7/8 的移动应用程序以及一些网站中很流行。但这些上下文仅供几分钟内的简短使用。相比之下，面向业务的桌面式应用程序被人们用于更长的工作时间，可能全天断断续续地使用数小时。面向业务的应用程序以更密集的格式呈现更多信息。对于此类用途，Valo 主题的默认呈现是不合适的。具体而言，字体太细且暗淡，字体和小部件尺寸太大。

Valo 之所以出名，是因为它的构建是可调整的，并且只需几行 Java 和/或 CSS 代码即可轻松变形。有没有人尝试过将 Valo 的大小更改为与驯鹿主题相似？有任何源代码或说明可以分享吗？

明确地说，我的目标只是减少视觉高度和宽度及其字体大小。我不是在问改变设计，我会很感激只是为了找回一些像素空间。我只是在寻找最简单和最安全的方法来使 Valo 小部件的大小与 Reindeer 主题中对应对象的视觉大小平行。

在短期内，我将继续覆盖默认设置以使用 Reindeer，如 StackOverflow.com 问题 Change from “Valo” theme to “Reindeer” in new Vaadin 7.3 app 中所述。 .但从长远来看，Vaadin 团队对 Valo 寄予厚望。 Reindeer 最终会失宠，所以我想学习如何过渡。

我确实打开了Ticket # 14,909建议提供一个开关，使 Valo 自动缩小到 Reindeer 方案。

有些人误读了这篇文章:我们不是在谈论磁盘上的存储大小。我们在这里谈论的是像素，而不是比特。视觉大小，而不是文件大小。图形布局，不是 widgetset 优化。

这个问题莫名其妙地被关闭为“太宽泛”。然而，它继续获得赞成票。我请支持投票者投票重新开放。

Answer 1

要使用 valo 主题 来替代 reindeer 主题，您可以像这样配置用于 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深入解释了将这些变量放在哪里以及如何自定义主题。