主题类别

CabloyJS提供了两类主题：内置主题、第三方主题

1. 内置主题

通过Framework7提供的主题机制，可以对主题的四个要素进行定制：

名称 说明
布局主题 浅色布局、暗色布局
导航条样式 是否实心风格
颜色主题 从预定义值中选择主色
自定义颜色主题 自定义主色

1

2

2. 第三方主题

我们也可以选择第三方主题。第三方主题通过CSS对主题进行了更细致更全面的定制

CabloyJS内置了一个第三方主题模块a-themehyacinth

3

主题配置

用户可以自由选择主题，同时也可以直接在前端Config文件中配置系统的缺省主题

src/front/config/config.default.js

  1. 1export default{
  2. 2  theme: {
  3. 3    type: 'builtIn',
  4. 4    builtIn: {
  5. 5      layout: 'light',
  6. 6      bars: 'empty',
  7. 7      color: 'teal',
  8. 8      customColor: null,
  9. 9    },
  10. 10    thirdParty: null,
  11. 11  },
  12. 12};
名称 说明 可选值
type 主题类别 builtIn/thirdParty
builtIn.layout 布局主题 light/dark
builtIn.bars 导航条样式 empty/fill
builtIn.color 颜色主题 red green blue pink yellow orange purple deeppurple lightblue teal lime deeporange gray black
builtIn.customColor 自定义颜色主题 如：#2196f3
thirdParty 第三方主题模块名称 如：a-themehyacinth

制作第三方主题

第三方主题本质上也是一个EggBornJS模块，在这里我们新建一个主题模块test-themehello

1. 新建主题模块

进入项目目录，执行CabloyJS提供的脚手架创建一个新模块

  1. 1$ cd /path/to/project
  2. 2$ npm run cli :create:module test-themehello -- --template=module

2. 修改package.json

src/module/test-themehello/package.json

  1. 1{
  2. 2  "name": "egg-born-module-test-themehello",
  3. 3  "version": "1.0.0",
  4. 4  "title": "Hello",
  5. 5  "eggBornModule": {
  6. 6    "fileVersion": 0,
  7. 7    "theme": true,
  8. 8    "dependencies": {
  9. 9      "a-instance": "3.0.0",
  10. 10      "a-base": "3.0.0"
  11. 11    }
  12. 12  },
  13. 13  ...
  14. 14}
名称 说明
title 模块标题
eggBornModule.theme 标识本模块是主题模块

3. 国际化

添加模块标题的国际化语言资源

src/module/test-themehello/backend/src/config/locale/zh-cn.js

  1. 1module.exports = {
  2. 2  Hello: '您好',
  3. 3};

4. 修改主题样式

根据设计风格，修改主题样式

src/module/test-themehello/front/src/assets/css/module.less

  1. 1:root.eb-theme-test-themehello {
  2. 2
  3. 3  --f7-font-family: monospace;
  4. 4
  5. 5  --f7-theme-color: #2cb2d4;
  6. 6  --f7-theme-color-rgb: 44, 178, 212;
  7. 7  --f7-theme-color-shade: #2496b3;
  8. 8  --f7-theme-color-tint: #4ebedb;
  9. 9
  10. 10  --f7-searchbar-link-color: var(--f7-theme-color);
  11. 11}

当主题被启用时，系统会给html元素添加ClassName: eb-theme-${moduleName}。因此，自定义的CSS样式必须包含在:root.eb-theme-test-themehello中

CSS样式支持CSS变量

5. 发布模块

可以将制作好的模块发布到Cabloy商店

  1. 1$ cd /path/to/project
  2. 2$ npm run cli :store:publish test-themehello

App应用主题

前面提到，我们可以在前端Config文件中配置系统的缺省主题。由于CabloyJS支持创建多个App应用，因此，我们可以为App应用分别配置独立的主题，这样就可以极大丰富CabloyJS的前端表现力