Changing colors in AYRO UI themes

Changing colors in AYRO UI themes

 None  24 Aug 2022 : 15:24  Comments (0)  Jimako

AYRO UI themes is general term for any e107 theme based on AYRO UI components. For now there are Aeolus and Anthena.

Aeolus theme is based on APP template and it is finished - now it is tested, adding some stuff while working on Athena.

Athena theme is based on Startup template and it is developed now. 

Both of those themes are available on github. Changing colors is the same for all themes. This is just first step. 

Changing colors is very easy. No need for sass, complilation, anything. Just pure css and some editor. Visual Code Studio displays css rule with color picker, so I used it for this. 

Athena looks like this (blue theme)

Athena Changing Colors01 Min

Find color name f.e. of button

Athena Changing Colors02 Min

Open file css/starter.css and change primary color:

Athena Changing Colors07 Min


Athena Changing Colors03 Min

The same for hover state - primary-dark is used

Athena Changing Colors06

Of course, e107 parts that are not managed by Ayro UI css, will stay the same. Extend this will be next goal.