Search code examples
cssangularjstwitter-bootstrapng-style

Using Angular to style related CSS

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

Solution

  • 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.