ng-alain-plugin-theme

NG-ALAIN theme plugin.

!Ci

Features

- themeCss Generate theme styles for theme switching
- colorLess Generate color.less, dynamically customize colors

Usage

Install ng-alain-plugin-theme to devDependencies.

``bash


via yarn

yarn add -D ng-alain-plugin-theme

via npm

npm i ng-alain-plugin-theme --save-dev
`

You can use npx to complete the generated project color.less and theme style, like this:

`bash


Generate theme styles for theme switching


npx ng-alain-plugin-theme -t=themeCss


Generate color.less, dynamically customize colors

npx ng-alain-plugin-theme -t=colorLess

DEBUG MODE

npx ng-alain-plugin-theme -t=themeCss -debug
`

Theme Styles

You muse add ng-alain.json file in root path, for example, you want to generate dark and dust style:

`json
{
"$schema": "./node_modules/ng-alain/schema.json",
"theme": {
"list": [
{
"theme": "dark"
},
{
"key": "dust",
"modifyVars": {
"@primary-color": "#F5222D"
}
}
]
}
}
`

> We provide a completed JSON Schema that you can write very conveniently.

Execute the following command:

`bash
npx ng-alain-plugin-theme -t=themeCss
`

You can refer to how ng-alain scaffold uses style.dark.css.

Dynamically Customize Colors

If you using NG-ALAIN scaffold, execute the following command with default parameters:

`bash
npx ng-alain-plugin-theme -t=colorLess
`

You can refer to how delon document site uses color.less.

Or use ng-alain.json to change the default parameters:

`json
{
"$schema": "./node_modules/ng-alain/schema.json",
"colorLess": {
"variables": ["@primary-color"],
"ngZorroAntd": "./node_modules/ng-zorro-antd/",
"styleFilePath": "./src/styles.less",
"themeFilePath": "./src/styles/theme.less",
"outputFilePath": "./src/assets/color.less"
}
}
``

License

MIT