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 |
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
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
- 1export default{
- 2 theme: {
- 3 type: 'builtIn',
- 4 builtIn: {
- 5 layout: 'light',
- 6 bars: 'empty',
- 7 color: 'teal',
- 8 customColor: null,
- 9 },
- 10 thirdParty: null,
- 11 },
- 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$ cd /path/to/project
- 2$ npm run cli :create:module test-themehello -- --template=module
2. Modify package.json
src/module/test-themehello/package.json
- 1{
- 2 "name": "egg-born-module-test-themehello",
- 3 "version": "1.0.0",
- 4 "title": "Hello",
- 5 "eggBornModule": {
- 6 "fileVersion": 0,
- 7 "theme": true,
- 8 "dependencies": {
- 9 "a-instance": "3.0.0",
- 10 "a-base": "3.0.0"
- 11 }
- 12 },
- 13 ...
- 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
- 1module.exports = {
- 2 Hello: '您好',
- 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:root.eb-theme-test-themehello {
- 2
- 3 --f7-font-family: monospace;
- 4
- 5 --f7-theme-color: #2cb2d4;
- 6 --f7-theme-color-rgb: 44, 178, 212;
- 7 --f7-theme-color-shade: #2496b3;
- 8 --f7-theme-color-tint: #4ebedb;
- 9
- 10 --f7-searchbar-link-color: var(--f7-theme-color);
- 11}
When the theme is enabled, the system will add ClassName
eb-theme-${moduleName}
to thehtml
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$ cd /path/to/project
- 2$ npm run cli :store:publish test-themehello
Comments: