Custom theme

[zime-rch]

Hello,

Thank you for providing the custom-theme folder. I have have created a custom theme for us and it works so far. The custom theme changes the primary color to gunmetal as in the example. I did not change much in the example theme.

However, this is not the use case that we as customers are looking for. The use case would actually be that we could simply change the colors for the three standard themes (light design, dark design, and high-contrast design).

So for us it would be nicer to provide all color variables in the shared folder as it was once with the files styles.scss and variables.scss.

I understand that I should now create three customer-specific themes (light design, dark design, and high-contrast design). After that, I would have to be able to switch off the standard designs/themes somewhere, probably I would then also have to do this in the code where the user selects the theme.

But also I search for a nice solution to switch the default theme globally to my own light custom theme, also for the landing page and all other apps.

Also I don't understand why exist the files in the Shared folder: styles.scss and variables.scss, because there are still various definitions such as $VI_Common_Color_Blue_1 and $VI_Common_Color_Blue_3 hard coded.

These variables can be found hard coded in in this places:

IdentityManager.Imx\imxweb\projects\qbm\src\lib\searchbar\searchbar.component.scss 6,1: $VI_Common_Color_Blue_1: #69CCE9; 34,21: background-color: $VI_Common_Color_Blue_1;

D:\TFS\GIT\IdentityManager.Imx\imxweb\projects\att\src\lib\new-user\open-sidesheet.component.scss 4,21: background-color: $VI_Common_Color_Blue_3;

Why were these files styles.scss and variables.scss in the Shared folder not removed at v9.2? What is their purpose?

For us als Customer it would be helpful to provide a simple solution to change the coloro palette from blue to anything else, without fixing it in the code.

Regards,

René

[zime-rch]

We have successfully found a solution for adjusting the colors in the standard themes by developing a PowerShell script that automatically adjusts the various color palettes in the two tgz files (elemental-ui_cadence-icon.tgz and elemental-ui_core.tgz) according to our requirements.

The script unpacks the two elemental-ui files into a temporary directory, makes the necessary adjustments, and overwrites the files in the imx-modules directory.

Unfortunately, there was no other way, as the node_modules generated with the “npm install” command (including @elemental-ui) always regenerate all important color palettes and variables of the three standard themes.

In our opinion, it would be an improvement if the “standard” themes were provided in such a way that it would be easy to adjust the three standard themes (light, dark, and contrast) with adjustments in …\imxweb\shared\assets\styles.scss and …\imxweb\shared\assets\variables.scss.

If interested, I can make the PowerShell scripts available in my repository.

For us, this problem is solved for now.

[NielsDeGroot]

Hello @zime-rch

Good to read that you have solved this problem with a custom-made solution. I've yet to start custom theming the portal so i'm definitely interested.

Also it would be nice if one of the guys from the angular-development team could take a few minutes to comment on this. To give us some background info and if this is going to be fixed/changed in the near future.

Regards, Niels

[hannoquest]

Hi,

One thing I can say for certain is that the $VI_...$ variables are indeed leftovers and they will be removed for 9.3.

Thanks for the discussion, I'll bring this up internally.

[zime-rch]

@NielsDeGroot

I have now published the utilities to change the default theme without creating new ones in my repo: https://github.com/zime-rch/imxweb-elemental-ui

[juancarloscamargo]

Appreciate that, @zime-rch ! thanks!

[NielsDeGroot]

@zime-rch

Thank you for this!