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

  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};
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:

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

2. Modify 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}
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

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

4. Modify theme style

Modify the theme style according to the design style

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}

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. Publish Module

You can publish the module to Cabloy Store

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