37
Views
4
Comments
Solved
How do you change the base color palette in Outsystems?
Question

The base color palette in the Theme Settings only covers primary color, background and header. The blank module is already extremely styled, but we cant make any changes in the read-only Theme Settings CSS File. How do you change the following then?


Primary Color
Secondary Color
Link Color
Hover/Icon Color


to just name a few that are already styled?


Also if we want to add new fonts, we have to add them to the ressources folder (downloaded from google-fonts for example). Will these appear in the Theme-Settings?

2023-10-21 19-42-11
Tousif Khan
Champion
Solution

Hello

For your use case, you can write the CSS on your module theme level -
You can re-define the variables defined inside :root of your theme.

I Hope this will help, you can add Css variables from OutSystems UI root and copy here and change them here.

Thanks
Best Regards
Tousif Khan

UserImage.jpg
Nicolas Körner

Hello Tousif Khan,
The "Theme Editor" CSS file is on read-only, because it is generated through the Theme Editor. Do i have to copy all root settings and put them inside the module CSS file? In this case the Sidebar?

2023-10-21 19-42-11
Tousif Khan
Champion

Yes you can copy and update whatever changes required.

2023-01-26 16-03-24
Ana Agostinho

Hello Nicolas Korner, 

The following graphic illustrates how to structure the front-end architecture in OutSystems UI. For more details and additional information, please refer to the Guide Path:  Front-end Developer Specialization Exam, where these and other similar questions are explained and detailed. 
 

Specially on the Theme and on the Create a Custom Application Template epics/submenus, you have all the steps (and more), regarding the best practices to follow when you desire to change the root classes, like colors.


To change the font of your applications, I would recommend you to check the following threads from forum:

Best regards, 
Ana

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.