主题类别

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的前端表现力