Using Angular to style related CSS - css

Question

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 lis, 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

Answer 1

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:
.navbar-rgba-colors {
border-color: rgba(0,0,0,0.2);
.navbar-nav > li > a,
a.navbar-brand {
opacity: 0.7;
}
.navbar-nav > li:hover > a,
.navbar-nav > li > a:focus,
.navbar-nav > li.active > a,
.navbar-nav > li.active > a:hover,
.navbar-nav > li.active > a:focus,
.navbar-nav > li.open > a,
.navbar-nav > li.open > a:hover,
.navbar-nav > li.open > a:focus
a.navbar-brand:hover,
.navbar-header:hover > a,
a.navbar-brand:focus {
opacity: 1;
background: rgba(255, 255, 255, 0.1) !important;
}
}
The opacity change makes the text appear brighter on hover, while the background makes the focused/active a element appear lighter as well.
Then I implemented in the HTML like so:
<nav class="navbar navbar-default navbar-rgba-colors" ng-style="{ 'background-color': user.topBarBackgroundColor }">
and for any a elements within the navbar:
<a ... ng-style="{ color: user.topBarColor }">Home</a>
Now changing the hex values for topBarBackgroundColor and topBarColor 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.