3.5.9.3.2. 创建 Facebook 主题

以下是创建基于 Halo 的 Facebook 主题的示例，该主题风格类似流行的社交网络界面。

  1. 在 CUBA Studio 中，点击 CUBA > Advanced > Manage themes > Create custom theme。设置主题名称 - facebook，选择 halo 作为基础主题，然后单击 Create。在项目中将创建新的主题目录：

    1. themes/
    2.     facebook/
    3.         branding/
    4.             app-icon-login.png
    5.             app-icon-menu.png
    6.         com.haulmont.cuba/
    7.             app-component.scss                  // cuba app-component include
    8.         facebook.scss                           // main theme file
    9.         facebook-defaults.scss                  // main theme variables
    10.         favicon.ico
    11.         styles.scss                             // entry point of SCSS build procedure

    styles.scss 文件包含主题列表：

    1. @import "facebook-defaults";
    2. @import "facebook";
    4. .facebook {
    5.   @include facebook;
    6. }

    facebook.scss 文件:

    1. @import "../halo/halo";
    3. @mixin facebook {
    4.   @include halo;
    5. }

    com.haulmont.cuba 中的 app-component.scss 文件：

    1. @import "../facebook";
    3. @mixin com_haulmont_cuba {
    4.   @include facebook;
    5. }

  2. 修改 facebook-defaults.scss 中的主题变量。可以通过在 Studio 中单击 Manage themes > Edit Facebook theme variables 或在 IDE 中执行此操作：

    1. @import "../halo/halo-defaults";
    3. $v-background-color: #fafafa;
    4. $v-app-background-color: #e7ebf2;
    5. $v-panel-background-color: #fff;
    6. $v-focus-color: #3b5998;
    8. $v-border-radius: 0;
    9. $v-textfield-border-radius: 0;
    11. $v-font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
    12. $v-font-size: 14px;
    13. $v-font-color: #37404E;
    14. $v-font-weight: 400;
    16. $v-link-text-decoration: none;
    17. $v-shadow: 0 1px 0 (v-shade 0.2);
    18. $v-bevel: inset 0 1px 0 v-tint;
    19. $v-unit-size: 30px;
    20. $v-gradient: v-linear 12%;
    21. $v-overlay-shadow: 0 3px 8px v-shade, 0 0 0 1px (v-shade 0.7);
    22. $v-shadow-opacity: 20%;
    23. $v-selection-overlay-padding-horizontal: 0;
    24. $v-selection-overlay-padding-vertical: 6px;
    25. $v-selection-item-border-radius: 0;
    27. $v-line-height: 1.35;
    28. $v-font-size: 14px;
    29. $v-font-weight: 400;
    30. $v-unit-size: 25px;
    32. $v-font-size--h1: 22px;
    33. $v-font-size--h2: 18px;
    34. $v-font-size--h3: 16px;
    36. $v-layout-margin-top: 8px;
    37. $v-layout-margin-left: 8px;
    38. $v-layout-margin-right: 8px;
    39. $v-layout-margin-bottom: 8px;
    41. $v-layout-spacing-vertical: 8px;
    42. $v-layout-spacing-horizontal: 8px;
    44. $v-table-row-height: 25px;
    45. $v-table-header-font-size: 13px;
    46. $v-table-cell-padding-horizontal: 5px;
    48. $v-focus-style: inset 0px 0px 1px 1px rgba($v-focus-color, 0.5);
    49. $v-error-focus-style: inset 0px 0px 1px 1px rgba($v-error-indicator-color, 0.5);

  3. web 模块的 src 目录中的 facebook-theme.properties 文件可用于覆盖服务端使用的平台的 halo-theme.properties 文件中的主题变量。

  4. 新主题已被自动添加到 web-app.properties 文件中：

    1. cuba.web.theme = facebook
    2. cuba.themeConfig = com/haulmont/cuba/halo-theme.properties /com/company/application/web/facebook-theme.properties

    cuba.themeConfig 属性定义了应用程序的 Settings 菜单中可供用户使用的主题。

重新构建应用程序并启动服务。现在，用户将在首次登录时看到使用 Facebook 主题的应用程序，并且可以在 Help > Settings 菜单中选择 Facebook、Halo 和 Havana 主题。

facebook theme