Log in to AnswerLog in to Follow
2017-02-10 11-52-31
Vitor Mexia
1750Views
10Comments
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

1
0
10 Feb 2017
2016-04-21 20-09-55
J.
mvp_badge
MVP

a simple search and replace?

only left is the app-icon itself..


0
0
10 Feb 2017

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? 

0
0
10 Feb 2017

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.

4
0
09 Jun 2017

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

 

0
0
21 Oct 2019
2020-04-15 12-37-36
Daniël Kuhlmann
mvp_badge
MVP

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

0
0
21 Oct 2019

Daniël Kuhlmann wrote:

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

Hi,

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


0
0
21 Oct 2019

Murugan S S wrote:

Daniël Kuhlmann wrote:

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

Hi,

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


 

 

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));

0
0
14 Jul 2020
2020-04-15 12-37-36
Daniël Kuhlmann
mvp_badge
MVP

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

1
0
21 Oct 2019

Hi,

After I have the same requirement I found an easy solution:


0
0
17 Nov 2021

Hi all,


i am not sure this will help now. But what i did to update the theme is like this,

1. Under Interface, go to Theme.

2. Right click on the active theme and choose "Open Theme Editor".

3. This will open a modal to updated various parameters for theme (like font style, color, background color, etc) . Among them, you can see "Primary" under Theme Colors field set.
4. When hover over the color, you could get the color picker as last option.

5. Choose your prefered color by picking from pallete, or enter the hex/rgb code.

[V11.14.5]


Thank you.

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