Overriding Theme Variables

[mb99]

Hello,

I was looking at the mirage-ng-9.0.1 angular demo. I tried overriding the

Code: Select all

$primaryColor

and

Code: Select all

$primaryTextColor

variables within the

Code: Select all

/overrides/_theme_variables.scss

file, but that doesn't work.
It looks like importing goes like this:
1) import theme file (for example blue>theme-light.scss)
2) import vars/_theme_light
3) import variables/_theme
4) import overrides/_theme_variables

but the variables in 2) will override 4) since they are declared afterwards?

Thanks for your help!

[yigitfindikli]

Hello,

I was looking at the mirage-ng-9.0.1 angular demo. I tried overriding the

Code: Select all

$primaryColor

and

Code: Select all

$primaryTextColor

variables within the

Code: Select all

/overrides/_theme_variables.scss

file, but that doesn't work.
It looks like importing goes like this:
1) import theme file (for example blue>theme-light.scss)
2) import vars/_theme_light
3) import variables/_theme
4) import overrides/_theme_variables

but the variables in 2) will override 4) since they are declared afterwards?

Thanks for your help!

Hi,
$primaryColor and $primaryTextColor coming from layout variables. You need to use _layout_variables.scss.

[mb99]

Oh gotcha, I was under the impression we could avoid importing Layout files altogether (we only needed the themed components). But that makes sense.
Thanks!

[mb99]

Hi again,

I'm running into an issue for overriding this variable:

Code: Select all

$datatableCellBorderColor

I tried overriding within overrides/_theme_variables.scss as well as overrides/_layout_variables.scss so that my Pagination border color can change. None of them seem to work?

Thanks

[merve7]

Hi,

You're right, so sorry. We fixed for the next release but you can follow the below steps to use until the next release;

1. remove last import line (@import '../overrides/theme_variables';) from the _theme.scss (src/assets/sass/variables/_theme.scss)
2. add new import line (@import '../overrides/_theme_variables';) end of the _theme_light.scss and _theme_dark.scss file (src/assets/sass/variables/_theme_light.scss and src/assets/sass/variables/_theme_dark.scss)

You can use now the overrides/_theme_variables file.

[mb99]

Hi,

You're right, so sorry. We fixed for the next release but you can follow the below steps to use until the next release;

1. remove last import line (@import '../overrides/theme_variables';) from the _theme.scss (src/assets/sass/variables/_theme.scss)
2. add new import line (@import '../overrides/_theme_variables';) end of the _theme_light.scss and _theme_dark.scss file (src/assets/sass/variables/_theme_light.scss and src/assets/sass/variables/_theme_dark.scss)

You can use now the overrides/_theme_variables file.

Sounds good, will do that, thank you!

[mert.sincan]

Thanks a lot, @merve and @yigitfindikli