SuperAPI AI 工具集

theming

前端与建站

查看项目

更新于 10-16 03:03

技能介绍

用途:为 Vaadin 25 应用设置主题,覆盖官方支持的 Aura 与 Lumo 两套主题,帮助选择、加载并自定义界面外观。查询具体 API 时可使用 Vaadin MCP 工具(search_vaadin_docs、get_component_styling、get_component_java_api),vaadin_version 设为 "25",ui_language 设为 "java";读取 Java API 签名或源码可用 javadoc MCP。

主题选择:Aura 视觉现代,使用透明与渐变,只需少量核心属性即可全应用自适应,适合快速原型和强调整体一致性的场景;Lumo 为经典扁平风格,提供大量独立 token、粒度控制更细,并提供 LumoUtility.* 工具类与紧凑预设,适合数据密集型界面。应只选一套主题,混用两套 token 或工具类会产生不可预期结果。

加载方式:通过 AppShellConfigurator 类上的 @StyleSheet 加载,且主题样式表须先于其他样式表,例如 @StyleSheet(Aura.STYLESHEET) 或 @StyleSheet(Lumo.STYLESHEET),Lumo 工具类需额外加载 Lumo.UTILITY_STYLESHEET;Aura 没有工具类样式表。

主要能力:Aura 提供 7 色调色板与自动计算变体、动态强调色、单一基础字号与尺寸/圆角、表面层级系统;Lumo 提供语义色阶及透明度变体、独立字号/间距/圆角 token、显式阴影 token 与 Tailwind 式工具类。两者均支持 @ColorScheme 明暗模式配置(LIGHT、DARK、LIGHT_DARK、DARK_LIGHT),并可用 light-dark() 函数,还能用 setColorScheme 在运行时切换。组件变体通过 addThemeVariants() 设置,跨主题变体用无前缀枚举,Lumo 专属变体带 LUMO_ 前缀;Aura 的部分颜色变体由 CSS 类实现。

自定义与限制:可创建自定义主题 CSS 覆盖所选主题核心属性,再用 @StyleSheet 加载。Aura 仅能在其 surface.css 列出的选择器上修改表面层级与不透明度;若使用 Aura 则无法使用 LumoUtility,需改用 CSS 自定义属性或自定义类。建议优先使用主题属性而非硬编码值,并同时验证明暗两种配色方案。