Ng-alain-plugin-theme NPM

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"
  }
}