Changing primary color not working

[merijng]

Reproduction steps:

• run abp new Acme.BookStore
• run migrations
• Change global-styles.css: add :root with new colors

:root {
    --lpx-brand: red;
    --lpx-primary: red;
}

• Take note that the icons are red, instead of pink/purple (original)
• Take note that the button is still the lepton default

versions

• ABP Version 7.4.0, commercial & non-commercial
• LeptonX version 2.4.* (and also 2.3.*)

Expectation

I would expect that if I change lpx-primary, that it will have effect on all primary elements. Here are some examples that remain unchanged, similar to the button mentioned in the reproduction steps.

[enisn]

Hi @merijng

Unfortunately bootstrap doesn't use css variables to define primary (or other) colors. So, bootstrap-related components can't be changed until re-building bootstrap SASS files.

So, that's why LeptonX theme has a separate bootstrap bundle named dim-bootstrap.css.

You can follow the bootstrap documentation to fully customize bootstrap:
https://getbootstrap.com/docs/5.2/customize/color/#all-colors

[enisn]

If you don't have knowledge on SASS,
you can create a copy of dim-bootstrap.css from LeptonX and replace all the static written primary colors with a simple editor and use it.

But it's not recommended, it sticks you in a specific bootstrap version.