One of the first questions that I receive often when someone starts to play with ADF is how to customize the colors after generated an app.
In order to help all the developer to easily accomplish this task in the version 1.8.0 of ADF we have introduced a theming capability.
Before to completely dive on how to create your custom colors in ADF I would like to add a bit of context. ADF is a framework based on Angular and Material design.
Material design brings inside a lot of guidelines on how to style your applications and one of this guidelines is about the colors.
In Material Design there are mainly two colors to consider:
primary color refers to a color that appears most frequently in your app.
accent color refers to a color used to accent key parts of your UI. The accent should be used for the floating action button and interactive elements, such as : text fields and cursors, text selection, progress bars, selection controls, buttons, and sliders.
Starting from that two colors we fill in the spectrum to create a complete palette:
All these different shades of primary/accent color are used to create a contrast between elements, you can use lighter or darker tones of your primary/accent color.
Now that we have a common understanding of how material design colors works let's give a look on how to customize it in ADF.
You can find this example in the folder belonging to the 1.9.0 projects in the ADF examples repo.
1. Generation of an ADF project using the Yeoman ADF app generator
Nothing to describe here. In case of our planned modifications, you should have a similar project, you can find the generator at this address
2. Choose the colors
If you search on google material design palette generator you will see a lot of results fell free to use the one that you like. I used this one Material Design Theme & Palette Color Generator . Once you have chosen the color that you like you will have something like that:
In order to use this colors we need to export it as Material2 palette:
Another possibility instead to create your custom colors uses the pre-built theme. ADF comes prepackaged with several pre-built theme CSS files. These theme files also include all of the styles for core (styles common to all components), so you only have to include a single CSS file for Angular Material in your app.
You can include a theme file directly into your application fromng2-alfresco-core/prebuilt-themes
Available pre-built themes:
If you're using Angular CLI you can include one of the prebuilt themes in your styles.cssfile: