1395
Views
8
Comments
Changing the theme main color
Question

Hello,

I was wondering if there is an easy way to change the theme main colour (the one generated when we choose the app icon) since, after the app creation, that colour is used practically everywhere. 


Cumpz

mvp_badge
MVP
Rank: #13

a simple search and replace?

only left is the app-icon itself..


Rank: #16454

Well obviously there is that way, I just thought that since it's widely used why not store in some variable and use that variable when the colour is needed? 

Rank: #55375

I opened the theme CSS stylesheet and did a change-all on the primary color.

1. Go to Interface view

2. Expand Themes

3. Double-click the node under Themes named after your app (which should be the theme in use).

4. Select-all, then paste into something like Notepad++

5. Change-all the primary color

6. Paste back into the Theme Style Sheet dialog and click OK.

Worked for me.

Rank: #42356

Hi,


I want to change the primary color in run time. For example entire application theme change. 

In this case if I changed primary color value in run time it will work fine. So how can I change primary color in via Service Studio tool.

Help me to achieve this 

Thanks 

Murugan

 

mvp_badge
MVP
Rank: #18

Hi Murugan,

You are asking a question in a post of 2 years old. It is better to post your question as a new post next time.

If you are on version 11 and use OutSystems UI then you only have to change the CSS variable --primary-color in your application theme. 

If you use the beta version of service studio it is even easier as you can then use the theme editor.

Regards,

Daniel

mvp_badge
MVP
Rank: #18

Hi,

Sorry you asked the opposite first:

So how can I change primary color in via Service Studio tool

OutSystems does not have build in runtime theme switcher. You would have to build.somethjng yourself.

To change CSS variables using JavaScript you could check out the next article https://davidwalsh.name/css-variables-javascript

Regards,

Daniel