ng-alain-plugin-theme
v18.0.0
Published
NG-ALAIN theme plugin
Downloads
2,905
Readme
ng-alain-plugin-theme
NG-ALAIN theme plugin.
Features
- themeCss Generate theme styles for theme switching
- colorLess Generate
color.less
, dynamically customize colors
Usage
Install ng-alain-plugin-theme
to devDependencies
.
# 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:
# 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:
{
"$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:
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:
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:
{
"$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