Get 2024 Templates Mega Bundle!19 Bootstrap HTML, 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,
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!
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.
