Theme Types

CabloyJS provides two types of Themes: Built-in Theme, Third-party Theme

1. Built-in Theme

Through the theme mechanism provided by Framework7, you can customize four aspects of the built-in theme:

Name Description
Layout Themes light/dark
Navigation Bars Style empty/fill
Color Themes Choose a primary color from predefined values
Custom Color Theme custom primary color

1

2

2. Third-party Theme

We can also choose a third-party theme, which is can be customized more carefully and comprehensively through CSS

CabloyJS has a built-in third-party theme module a-themehyacinth

3

Theme Config

Users can choose themes freely, and at the same time, we can directly configure the system’s default theme in the frontend config file

src/front/config/config.default.js

export default{
  theme: {
    type: 'builtIn',
    builtIn: {
      layout: 'light',
      bars: 'empty',
      color: 'teal',
      customColor: null,
    },
    thirdParty: null,
  },
};
Name Description Optional Values
type Theme Type builtIn/thirdParty
builtIn.layout Layout Themes light/dark
builtIn.bars Navigation Bars Style empty/fill
builtIn.color Color Themes red green blue pink yellow orange purple deeppurple lightblue teal lime deeporange gray black
builtIn.customColor Custom Color Theme e.g. #2196f3
thirdParty Third-party theme module’s name e.g. a-themehyacinth

Develop a third-party theme

The third-party theme is essentially an EggBornJS module. Here we create a new theme module, which is named as test-themehello

1. Create a new module

Go to the project directory and create a new module by executing the scaffold:

$ cd /path/to/project
$ npm init cabloy src/module/test-themehello --type=module

2. Modify package.json

src/module/test-themehello/package.json

{
  "name": "egg-born-module-test-themehello",
  "version": "1.0.0",
  "title": "Hello",
  "eggBornModule": {
    "fileVersion": 0,
    "theme": true,
    "dependencies": {
      "a-instance": "3.0.0",
      "a-base": "3.0.0"
    }
  },
  ...
}
Name Description
title Module’s title
eggBornModule.theme Indicate this module is a theme

3. I18N

Add I18n locale resources, such as module's title

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

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

4. Modify theme style

Modify the theme style according to the design style

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

:root.eb-theme-test-themehello {

  --f7-font-family: monospace;

  --f7-theme-color: #2cb2d4;
  --f7-theme-color-rgb: 44, 178, 212;
  --f7-theme-color-shade: #2496b3;
  --f7-theme-color-tint: #4ebedb;

  --f7-searchbar-link-color: var(--f7-theme-color);
}

When the theme is enabled, the system will add ClassName eb-theme-${moduleName} to the html element. Therefore, the custom CSS style must be included in :root.eb-theme-test-themehello

CSS style supports CSS variables

5. Build Module

As an EggBornJS module, if it is used inside a project, it does not need to be built and can be used directly. If you want to share it to the community for other users to install and use, you must build it

$ cd src/module/test-themehello
$ npm run build:front  
$ npm run build:backend

6. Publish Module

You can publish the module to the community after building

$ npm publish