Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
bs-link-hover-color not changing because of multiple instances
I am attempting to change some of the theme colors by adding the following code to the _variables.custom.scss:
$theme-colors: (
"primary": #047cc4,
"secondary": #084365,
"link-hover-color": #014e7f,
);After running gulp, the primary and secondary colors were successfully updated but there appears to be 2 instances of "--bs-link-hover-color" in the style.bundle.css:
line 54: --bs-link-hover-color: #014e7f;
...
line 114: --bs-link-hover-color: #056EE9;As you can see, the first instance is successfully updated to represent my desired color but the second instance is not. So, when my site loads, the link-hover-color is #056EE9 (as defined by line 114) rather than #014e7f (the desired color).
How can I override this second instance so it can't effect the site? I already tried adding "!important" to the custom js, but that didn't work
Replies (3)
Hi,
Apologies for the delay. You can try directly adding !important to your custom variable definition in _variables.custom.scss. Here's how you can modify your code:
$theme-colors: (
"primary": #047cc4,
"secondary": #084365,
"link-hover-color": #014e7f !important,
);After making this change, remember to rebuild the assets using the appropriate command (e.g., gulp or webpack specified by your project). This should give higher specificity to your custom link-hover-color definition and hopefully override any conflicting styles.
Thank you
I stated in my original question that I already tried that and it didn't work.
Hi,
We checked that the default $theme-colors is defined in _keenthemes/src/sass/components/_variables.scss as follows:
$theme-colors: (
"light": $light,
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"dark": $dark
) !default;To override the colors, you can create a new variable below the default $theme-colors:
$new-theme-colors: (
"light": $yourNewLightValue,
"primary": $yourNewPrimaryValue,
"secondary": $yourNewSecondaryValue,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"dark": $dark
);Replace $yourNewLightValue, $yourNewPrimaryValue, etc., with the values you want to set for each color. This ensures that you are not affecting other instances using the default $theme-colors. If you have any further questions or need assistance, feel free to ask!
