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的投注很大。最终驯鹿将失宠，所以我想学习如何过渡。

我确实打开Ticket # 14,909建议提供一个开关，让Valo自动缩小到驯鹿计划。

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

这个问题被莫名其妙地关闭为“过于宽泛”。然而它继续获得投票。我请求选民投票重新开放。

Answer 1

要使用 valo主题替代驯鹿主题，您可以配置用于valo的主题变量，如下所示：< / p>

$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部分深入介绍了放置这些变量的位置以及如何自定义主题。

Answer 2

当我从Reindeer切换到Valo主题时，我也有同样的问题。在加载主题之前使用小字体和家庭解决了我的问题。

$v-font-size: 12px;
$v-font-family: sans-serif;

@import "../valo/valo.scss";

将Valo主题的间距和小部件大小缩小为Reindeer主题的大小

2 个答案: