我的客户正在使用 Vaadin 开发 Web 应用程序，并希望我根据 Vaadin 7.3 中现有的 Valo 主题为项目制作一个新主题。 我知道 HTML 和 CSS (SCSS) 以及一点点 jQuery，但仅此而已，我是一名网页设计师，编程技能非常有限（如果有的话）。我试图了解 Vaadin 的工作原理以及如何创建新主题，但我对如何开始有点迷茫。我曾尝试阅读互联网上的“vaadin 书”和其他资源，但我遇到了困难，因为我不懂 Java，而且其中大部分是为程序员而不是设计师编写的。
谁能解释一下 Vaadin 的主题化原理？ 我可以更改什么以及 Java 控制什么？ 我的 CSS 会被 Java 覆盖吗？如何覆盖？我在哪里可以更改/禁用此类行为？ 我在哪里可以找到 vaadin 中可用的 CSS 规则/类列表？ 你知道任何面向设计师的 Vaadin 资源吗？
【问题讨论】：
使用 vaadin，您无需了解 java 即可创建/修改主题。 Vaadin 7 使用 SASS 来简化 CSS 管理。 需要你懂sass，网上有很多教程，比如this one。
起点肯定是 vaadin 书中的 this link 和 web page for the valo theme 本身。 在 demo page 上，您可以看到哪些组件在 valo 中可用/样式化。
如果您想了解 valo 对 CSS 样式的影响，请查看 vaadin-themes-7.3.5.jar 文件。 在 VAADIN\themes\valo\components 文件夹中，您将看到每个组件都有一个 scss 文件。在那里您还可以看到可用于 sass 编译的变量。
从您的 scss 定义生成 CSS 文件的步骤通常在 vaadin 的构建步骤中自动执行。
【讨论】：
valo 的美妙之处在于它是一个高度可定制的主题，只需使用主题变量即可。 这意味着您可以在
中通过一些简单的修改来改变它的外观WEBCONTENT\VAADIN\themes*appname**appname*.scss
当然，您可以在同一个文件中添加自己完全独立的样式。 默认情况下，组件被设置为使用它们的“valo 样式”。对于每个组件，您可以决定添加或删除一些组件。 ValoTheme 类中的组件已经有一些内置自定义，例如 ValoTheme.BUTTON_DANGER 将呈现正常的 Valo 按钮，但颜色设置在变量 中$v-error-indicator-color.
应使用同一文件夹中的 styles.scss 来导入您可能需要的最终子 scss。这用于为您的应用样式添加前缀 [appname-]，这样它们就不会与其他样式名称冲突。
styles.css 是应用程序将使用的实际 css 文件，您必须“编译主题”来更新它
别管 addons.scss，因为它是供内部框架使用的。
好的起点是
https://vaadin.com/book/-/page/themes.valo.html章
https://vaadin.com/wiki/-/wiki/Main/Valo+Examples（一些 Valo 准备的自定义设置，您会发现只需稍加调整，整个应用程序就会发生很大变化；您可以在 Valo 示例甚至 Vaadin 采样器中看到它们）
造型不错！问候
【讨论】：