How to dynamically change css values (like color in whole app) etc

Question

I have one question...

If you want conditional styling: you must use ng-class or ng-style construction.

But...

For example: I\'

Answer 1

Another alternative is SASS or LESS and deal with colors using variable...

Answer 2

The easiest way I can think about is, for example, clicking on myBox changes its background-color.

html:

<div class="myBox" ng-click="changeBackgroundColor()"></div>

js:

$scope.changeBackgroundColor = function(){
  angular.element('.myBox').css('background-color', '#000');
}

css:

.myBox{background-color: #fff;}

Hope I've been helpfull.

Answer 3

You could write the CSS rule in JavaScript and add it to a stylesheet dynamically. A couple of good articles on how to do that are here and here.

var myColor = '#FF00FF';
var stylesheet = /* get stylesheet element */;
stylesheet.insertRule('.dynamic-color { background-color:"' + myColor +'";}',0);

Of course, in a pure Angular way, you would create a directive that wraps the DOM/stylesheet interaction.

Answer 4

The best way is generate a file like color.css with all css rules with color, background-color, border-color etc. overridden. But angularjs will not be enough.

color-default.css

body {
    background: #fff;
}

color.css

body {
    background: #f00;
}

---

Full JS way
Add class on every element you want to override. Create class for every properties like so:

.skin-color { color: {{color}}; }
.skin-background-color { background-color: {{color}}; }
.skin-border-color { border-color: {{color}}; }
etc..

Apply class on your html where you want:

<h1 class="skin-color">My title</h1>
<p>Hello I'm online!</p>
<p class="skin-background-color">No difference!</p>
<p><a href="#">I'm link</a></p>

You can save the color variable in localStorage for example.
Démo: http://codepen.io/anon/pen/jPrabY