如何更改标准的蓝色悬停和帧效果

Question

我使用的是Vaadin版本14.6.3。

悬停和选择效果

在上面的图片中，你可以看到我的应用程序有一个绿色的配色方案，但我实现的上下文菜单总是有蓝色悬停效果，活动项目也有一些蓝色边框。

我试着使用stlyes.css和shared-styles.js，但我找不到添加/覆盖标准蓝色"的正确位置；lumo"；行为

如何将此行为自定义为我选择的颜色？

@Route(Pages.CUSTOMER_ROUTE)
@StyleSheet("styles.css")
@PageTitle(Pages.CUSTOMER_PAGE_TITLE)
@JsModule("./shared-styles.js")
public class CustomerUI extends VerticalLayout implements RouterLayout, PageConfigurator, RoleSecured, AfterNavigationObserver {...}

谢谢你的帮助。

Answer 1

您很可能只设置了原色，而没有设置50%和10%的阴影颜色。看见https://vaadin.com/docs/latest/styling/lumo/design-tokens/color/#primary

例如：尝试：

html, :host {
--lumo-primary-color: hsl(122, 96%, 47%);
--lumo-primary-color-50pct: hsl(122, 96%, 47%, 0.5);
--lumo-primary-color-10pct: hsl(122, 96%, 47%, 0.1);
}