Updating a CSS style globally with variable in scope

Question

I'm currently building an app that has the option to change the theme. A theme in this instance, simply consists of changing the color of a few key elements in the app.

So currently, on all elements that require the theme color, I have given them the css class has-main-color.

In the controller, I get their desired color from the web service and set it to the scope as $scope.mainColor = color;.

All of this works fine, but the problem I'm getting is that I can't find a suitable method of applying this color to the has-main-color class.

Currently, I'm trying the following:

<style>
    .has-main-color {
        color: {{mainColor}}
    }
</style>

As you could probably guess, this doesn't work so well.

So what would be the best approach to solve this problem using AngularJS?

Answer 1

Look at the documentation page for ngStyle. It has almost exactly what you want.

<input type="button" value="set" ng-click="myStyle={color:'red'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle={{myStyle}}</pre>

Answer 2

I don't think you can use a class to do this, however try this

<div ng-app="test-app" ng-controller="MyController" theme-wrapper="{{mainColor}}">
    <div class="has-main-color">Top1</div>
    <div>Child 1</div>
    <div class="has-main-color">Top1</div>
    <div>Child 1</div>
    <div class="has-main-color">Top1</div>
    <div>Child 1</div>
    <br />
    <input type="button" value="Red" ng-click="color('red')" />
    <input type="button" value="Green" ng-click="color('green')" />
    <input type="button" value="Blue" ng-click="color('blue')" />
</div>

JS

var app = angular.module('test-app', []);

app.controller('MyController', function($scope, $rootScope, $timeout){
    $scope.mainColor = 'grey';
    $scope.color = function(color) {
        $scope.mainColor = color;
    }
});

app.directive('themeWrapper', function(){
    var counter = 0, regex = /^theme-wrapper-\d+$/;
    return {
        restrict: 'A',
        link: function(scope, elm, attrs){
            attrs.$observe('themeWrapper', function(value){
                var className = 'theme-wrapper-' + (counter++);
                $('<style>.' + className + ' .has-main-color{color: ' + value + ';}</style>').appendTo('head');

                var classes = elm.attr('class').split(' ');
                angular.forEach(classes, function(v, i){
                    if(regex.test(v)) {
                        elm.removeClass(v);
                    }
                });

                elm.addClass(className);
            });
        }
    }
});

Demo: Fiddle

Another easy fix

<div ng-app="test-app" ng-controller="MyController">
    <div style="color: {{mainColor}}">Top1</div>
    <div>Child 1</div>
    <div style="color: {{mainColor}}">Top1</div>
    <div>Child 1</div>
    <div style="color: {{mainColor}}">Top1</div>
    <div>Child 1</div>
    <br />
    <input type="button" value="Red" ng-click="color('red')" />
    <input type="button" value="Green" ng-click="color('green')" />
    <input type="button" value="Blue" ng-click="color('blue')" />
</div>

JS

var app = angular.module('test-app', []);

app.controller('MyController', function($scope, $rootScope, $timeout){
    $scope.mainColor = 'grey';
    $scope.color = function(color) {
        $scope.mainColor = color;
    }
})

Demo: Fiddle