Hi,
I have a custom Theme & Template which is used in all new application.
However when a new new module is created in these apps, Outsystem automatically creates its own Theme on top with some color definitions like --primary-color (this comes from the color you pick during app creation)
The only way to get rid of this is to "Reset All Styles".
Is there a way to avoid this standard behaviour as it requires to train all developers to hit the "Reset all Styles" button for every new module?
Thanks Marcio,
I have a template and it is used when creating a new module.
But Outsystems adds another theme with the color picked during app creation (see below).
My question is how can I avoid that Outsystems creates this "Chris_UITest3(Theme Editor)" theme which overwrites the colors from our default Theme
Sorry about my previous answer.
If you have any references to the OutSystemsUI you will have the ThemeEditor enabled, unfortunately. But I would wait to see if anyone has another solution that you and I don't know :)
Kind Regards,
Márcio
Hi Christoph,
Although agreeing with you it may be confusing, the sheet Chris_UITest3(Theme Editor) is not an extra file loaded in the page.
Actually, what you define on the Theme Editor will indeed produce some CSS variables definition, like you see in the Chris_UITest3(Theme Editor), but that CSS will be appended in the beginning of your module theme.
If you define the variables (let's say, --primary-color: red;) on the theme, then changing those variables in Theme Editor will not take any effect (e.g. --primary-color: blue;), because they are going to be overridden by the variables you had written down and CSS file is reading from top to bottom (your CSS file would be --primary-color: blue; --primary-color: red;).
Kind Regards,João
Hi Joao,
that would be great but it's not happening :/
Here are some snippets. It's taken the color #4d5c66 (which comes from the Theme Editor, which took it from the color selected when creating the app).
Hi Chris,
I just tested on my side and it works as expected.
The styles generated by the theme editor below, with the message suggesting the same I advised before:
And the main theme, only with the color-primary:
Now on the page, I can see that there is no file for the Theme Editor and analysing the CSS file from the module, we can see on blue the theme editor styles, followed by the style I had set on the Theme, which overrides the one from ThemeEditor, and thus the button assumes the orange color:
I send the OML in attachment, in case you want to check something else.
this is because you set the primary color within the application theme (which is a higher level than the theme editor).
My primary color is set in a company theme. When you create a new module you select the module type as "Company Template" this template will load the referenced theme with the primary color below the Theme Editor.
You can also see it in the screenshots that you set the color manually within the application. My color is set in the company theme (this is outside of the application, just referenced).
Ah! Ok, I hadn't understand you weren't using a theme which was not the module theme, in that case, you're right. The module theme takes precedence, not the modules on which the module theme is based because in this case the ThemeEditor overrides it.
Indeed, I do not see any other option at the moment than having the "reset theme editor" guideline to keep governance on your factory, which is nevertheless a workaround.
We're now having a similar issue, we have a company theme that we are trying to set as a standard, but applications are being created with Theme Editor and then it's being customized with incorrect styling. Most of the developers are less experienced and don't think about removing it because its usually invisible to them.