Using Angular to style related 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

In short, you would need to calculate the darker version of that color. I have done similar things, and use javascript to convert between color spaces and calculate darker/lighter colors. — Ted, Dec 15 '14 at 20:02
@Ted are you relatively certain there isn't any CSS3 trickery that can be done? E.g. is the JS approach one possible route that will work or is it the **only** route that will work? — Tyler, Dec 15 '14 at 20:04
It depends on what you hope to achieve--you could possibly use outlines/borders/box shadows etc that are transparent black/white values...but it's hard to say whether that will work or not without a live sample — Ted, Dec 15 '14 at 20:07
Here's a [fiddle](http://jsfiddle.net/dbcsuums/) with border, outline and box shadows to demonstrate what I meant. — Ted, Dec 15 '14 at 20:16
In which way do you want to see the css-change with ng-style, with some event or something else? — arman1991, Dec 15 '14 at 21:14

score 0 · Accepted Answer · answered Dec 16 '14 at 05:30

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.

Using Angular to style related CSS

1 Answers1