Override variables new directory structure

[SiebeDom]

Hello,

We would like to override a variable without changing the variables.scss file because this would make upgrading to later versions of the Ultima Theme harder.

In version 14.0.0 it was possible to override variables in file src/assets/sass/overrides/_theme_variables.scss

For example we could say:
$inputTextColor:red;
in file src/assets/sass/overrides/_theme_variables.scss

This way we would override src/assets/sass/variables/theme/_theme_light.scss -> $inputTextColor:$emphasis-high;

Result:

We are trying to do the same thing in the latest version (16.0.0) that is using the new structure (Next Gen architecture).

We tried to override the value in: src/assets/layout/styles/theme/theme-light/indigo/theme.scss:

//Does not work
$inputTextColor:red;

@import '../_variables';
@import '../../_compact';
//The way it was done in 14.0.0. This works.
@import '../overrides/_theme_variables';
@import '../../theme-base/_components';
@import '../../extensions/_vendor_extensions';

//Does not work. Bizare. I would asume this is the same as defining a file: "@import '../overrides/_theme_variables';" containing $inputTextColor: red;. But apperantly there is a difference. 
$inputTextColor: red;

We found a way to override variables again, but it took us some time to find it.
This comment might be usefull for others making the upgrade.

Why were the overrides removed in the Next Gen architecture (or were they not and is there another (better) way)?

Kind regards,

Siebe

[cetincakiroglu]

Hi,

We've removed the overrides.scss and many other files to simplify the folder structure. You can change the theme by creating your own override file and importing it to the necessary place there wouldn't be a difference.

[alpesh88ww]

Hello,

I hope someone can assist me with upgrading the Ultima theme to the latest version 17, along with my custom SCSS file.
I am currently using an overrides.scss file placed in src\assets\layout\styles\_overrides.scss to customize the theme. My concern is that this custom file might be removed or overwritten during the upgrade process.

Could you please provide guidance on best practices for upgrading the Ultima theme while ensuring that my custom overrides.scss file remains intact?

Additionally, I am looking to implement a light/dark mode using my own colors, utilizing src\assets\layout\styles\theme\theme-light\blue\theme.css and src\assets\layout\styles\theme\theme-dark\blue\theme.css. This would involve changes to background color, button color, etc. In your projects, how do you manage these color schemes? Have you created additional SCSS files for this purpose? If so, could you share how you structured and imported them?

Thank you!

[SiebeDom]

Hello,

This is how we manage:

We got the PrimeNG Ultima structure:
assets/layout/styles
assets/layout/styles/layout
assets/layout/styles/theme

And got our own structure as a sibling folder:
We respect the same folder structure as Ultima. But only put the files that we modify here.
assets/layout/styles
assets/layout/styles/layout
assets/layout/styles/layout/overrides
...
assets/layout/styles/theme
assets/layout/styles/theme/overrides/...
assets/layout/styles/.scss (this file links all the css files togehter).

In this file .scss we link everything togheter and make layers

@layer ultima {
@import
}

//Our own layer
@layer {
@import (layout and theme)
//We link to our own theme.scss file (in assets/layout/...) wich on his turn links to the Ultima theme (that we don't touch)
}

//We specify the order of the layers ( is last so it will "win" if there is a duplicate css "definition").

@layer primeng, ultima, ;

This way we can safely replace "assets/layout/styles" when an updates come and we won't loose our changes.

[alpesh88ww]

Hello,

This is how we manage:

We got the PrimeNG Ultima structure: assets/layout/styles assets/layout/styles/layout assets/layout/styles/theme

And got our own structure as a sibling folder: We respect the same folder structure as Ultima. But only put the files that we modify here. assets/layout/styles assets/layout/styles/layout assets/layout/styles/layout/overrides ... assets/layout/styles/theme assets/layout/styles/theme/overrides/... assets/layout/styles/.scss (this file links all the css files togehter).

In this file .scss we link everything togheter and make layers

@layer ultima { @import }

//Our own layer @layer { @import (layout and theme) //We link to our own theme.scss file (in assets/layout/...) wich on his turn links to the Ultima theme (that we don't touch) }

//We specify the order of the layers ( is last so it will "win" if there is a duplicate css "definition").

@layer primeng, ultima, ;

This way we can safely replace "assets/layout/styles" when an updates come and we won't loose our changes.

can you please do me one favor, please share folder structure with empty files and code to attached main.scss file and how will change our overrides light/dark mode theme scss files and switching code. please...

[SiebeDom]

We don't use dark mode.
I'm sorry but this is all information that I feel comfortable sharing (I want to be confidential with both our company and Ultima code).

[SiebeDom]

Hello,

This is how we manage:

We got the PrimeNG Ultima structure: assets/layout/styles assets/layout/styles/layout assets/layout/styles/theme

And got our own structure as a sibling folder: We respect the same folder structure as Ultima. But only put the files that we modify here. assets/layout/styles assets/layout/styles/layout assets/layout/styles/layout/overrides ... assets/layout/styles/theme assets/layout/styles/theme/overrides/... assets/layout/styles/.scss (this file links all the css files togehter).

In this file .scss we link everything togheter and make layers

@layer ultima { @import }

//Our own layer @layer { @import (layout and theme) //We link to our own theme.scss file (in assets/layout/...) wich on his turn links to the Ultima theme (that we don't touch) }

//We specify the order of the layers ( is last so it will "win" if there is a duplicate css "definition").

@layer primeng, ultima, ;

This way we can safely replace "assets/layout/styles" when an updates come and we won't loose our changes.

Note to future readers:
The layers caused layout issues.
We removed them, and all seems to be fine.