如何轻松更改 CUBA 应用程序的整体主题?
How to easily change the overall theme in CUBA application?
我想知道将 CUBA 工作室主题复制到我的应用程序中有多容易?例如,默认情况下它使用 halo 主题,但想知道是否还有其他主题。
这篇manual详细讲解了如何自定义CUBA应用的默认主题。如果更改颜色就足够了(请参阅手册的 修改通用参数 部分),则不会耗费时间。
让 CUBA 看起来像 CUBA Studio:
- 使用项目属性部分
中的操作"Create theme extension"为光环创建主题扩展
- 转到IDE
- 在 modules/web/themes/halo
中查找文件
- 打开 halo-ext-defaults.scss
- 为 valo 变量添加覆盖:
$v-background-color: #333333;
$v-panel-background-color: #333333;
$v-textfield-background-color: #252526;
$v-textfield-background-color--readonly: #333333;
$v-font-size: 13px;
$v-font-weight: 400;
$v-border: 1px solid #1E1E1E;
$v-layout-margin-top: 6px;
$v-layout-margin-right: 6px;
$v-layout-margin-bottom: 6px;
$v-layout-margin-left: 6px;
$v-focus-color: #679ED2;
$v-link-text-decoration: none;
$v-panel-border: 0 solid transparent;
$v-notification-title-color: #252526;
$cuba-scrollbars-style-enabled: true;
- 重新启动您的应用程序
某些组件无法使用此变量设置样式以使其看起来像 Studio 组件,因为 Studio 主题包含 Buttons/Combobox/etc 的自定义 CSS。
我想知道将 CUBA 工作室主题复制到我的应用程序中有多容易?例如,默认情况下它使用 halo 主题,但想知道是否还有其他主题。
这篇manual详细讲解了如何自定义CUBA应用的默认主题。如果更改颜色就足够了(请参阅手册的 修改通用参数 部分),则不会耗费时间。
让 CUBA 看起来像 CUBA Studio:
- 使用项目属性部分 中的操作"Create theme extension"为光环创建主题扩展
- 转到IDE
- 在 modules/web/themes/halo 中查找文件
- 打开 halo-ext-defaults.scss
- 为 valo 变量添加覆盖:
$v-background-color: #333333;
$v-panel-background-color: #333333;
$v-textfield-background-color: #252526;
$v-textfield-background-color--readonly: #333333;
$v-font-size: 13px;
$v-font-weight: 400;
$v-border: 1px solid #1E1E1E;
$v-layout-margin-top: 6px;
$v-layout-margin-right: 6px;
$v-layout-margin-bottom: 6px;
$v-layout-margin-left: 6px;
$v-focus-color: #679ED2;
$v-link-text-decoration: none;
$v-panel-border: 0 solid transparent;
$v-notification-title-color: #252526;
$cuba-scrollbars-style-enabled: true;
- 重新启动您的应用程序
某些组件无法使用此变量设置样式以使其看起来像 Studio 组件,因为 Studio 主题包含 Buttons/Combobox/etc 的自定义 CSS。