Repository navigation
Changing primary color not working #22
Description
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.
Metadata
Metadata
Assignees
Labels
No labels
Activity
[-]Changing Primary and Secondary color not working[/-][+]Changing Primary color not working[/+][-]Changing Primary color not working[/-][+]Changing primary color not working[/+]enisn commentedon Nov 7, 2023
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 commentedon Nov 7, 2023
If you don't have knowledge on SASS,
you can create a copy of
dim-bootstrap.cssfrom 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.