Changing the theme main color

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

a simple search and replace?

only left is the app-icon itself..

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? 

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.

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

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

Daniël Kuhlmann wrote:

Hi,

I created Primary color value but I wanna change that color value at Run time.  

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

Murugan S S wrote:

you can override the primary color value from javascript

var css = ':root { --color-primary: '+ $parameters.PrimaryColor +'; }',

var head = document.head || document.getElementsByTagName('head')[0], 

var style = document.createElement('style'); 

head.appendChild(style); 

style.type = 'text/css'; 

style.appendChild(document.createTextNode(css));