Getting Started

@delon/theme is the only must be imported to ng-alain scaffold. It contains a lot of style parameters and several generalities services, pipes.


ng-alain defaults to using less as the style language, we recommend that you learn about the features of less before using it or sometimes when you have some questions. If you want to get a basic knowledge of CSS or look for properties usage, you can refer to the MDN doc.


Scaffolding include two layouts: default layout, blank layout, scaffolding does not contain these style files, it's in the @delon/theme library.

Scaffold Style

You can use the toolset provided by ng-alain to adjust spacing, color, size, borders, etc. It's a set of like bootstrap style tools.

Or customize your styles with theme.less, which will work in global applications, in the style development process, there are two prominent problems:

  • Global Pollution - CSS selectors are globally valid. Selectors with the same name in different files will be built together, and the former will be overrided by the latter.

  • Complex Selector - in order to avoid the above problem, we have to be careful when writing styles. The increase in flags for range restriction will lead to a growing class name, besides that, naming style confusion in multi person development and an increasing number of selectors on an element is hard to avoid.

We should use component styles property to create component styles. For how use Angular styles, please refer to About Angular Style Packaging.

Style file category

In a project, style files can be divided into different categories depending on their function.


Global style file, where you can make some common settings.


Please refer to Tools

Page level

Specific page-related style, such as monitor.component.less, the content is only related to the content of this page. Under normal circumstances, if it is not particularly complex page, with the previous global style and tools style, there should be little to write.

How to override parameters

We are using Less as the development language for styling. A set of less variables are defined for each design aspect that can be customized to your needs.

The changes parameters put into the theme.less LESS file, all parameters include:

Please report an issue if the existing list of variables is not enough for