I'm using Angular to let the user change the color of a bootstrap navbar. The actual background color change itself is simple enough, but I also want to change some related elements like the border-color and some of the shadows.
What I have:
<nav class="navbar navbar-default" ng-style="{ 'background-color': user.topBarBackgroundColor }">
How would I go about using user.topBarBackgroundColor
to define some shade (e.g. a darker shade) for the navbar's border, highlighted li
s, etc?
Note that the text color can be changed independently, so any methods should apply to that in parallel as well.
EDIT
I only need this to work in modern browsers, so any adopted CSS3, HTML5, etc is fair game
I solved this by creating a
.navbar-rgba-colors
class and adding it to the.navbar
element. The CSS (LESS) below overrides the relevant bootstrap defaults:The
opacity
change makes the text appear brighter on hover, while thebackground
makes the focused/activea
element appear lighter as well.Then I implemented in the HTML like so:
and for any
a
elements within the navbar:Now changing the hex values for
topBarBackgroundColor
andtopBarColor
changes the background color and text color of the navbar, respectively. I'm using angular-bootstrap-colorpicker for that and it seems to be working well.