Sharing Top Content from the Angular-sphere.

Do you want to customize the theme of your @Alfresco #ADF app? #Angular

Do you want to customize the theme of your @Alfresco #ADF app?  #Angular

  • 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: – – 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…
  • If you want more information about Material design colors please refer to the official guidelines color documentation.
  • 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.
  • I used this one Material Design Theme & Palette Color Generator .

ADF Theming

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:

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.

If you want more information about Material design colors please refer to the official guidelines color documentation.

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.

ADF Theming

Comments are closed, but trackbacks and pingbacks are open.