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'm an admin, and I want to change color of my application with custom color from colorpicker. How can I change some code in css?

For example I have this line in style.css:

body{
  background: #ffffff;
}

(also all tags like a, h1 etc implement some color)

and in controller I change this #ffffff to #000000.

What is the best way to change this color in css, without using ng-class or ng-style on each tag in each controller?

Bluety · Accepted Answer · 2015-05-18 12:08:31Z

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

Tibos · Accepted Answer · 2015-05-18 09:50:00Z

4

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.

answered May 18, 2015 at 9:50

Tibos

27.9k4 gold badges56 silver badges66 bronze badges

2 Comments

byCoder Over a year ago

hm, how it is better to get stylesheet in angular? maybe you have some code?

Tibos Over a year ago

@brabertaser1992 There is some code for that at each of the two links. The simplest method would be to add an ID to your stylesheet and retrieve it using document.getElementById.

AndreaM16 · Accepted Answer · 2015-05-18 10:04:15Z

3

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.

answered May 18, 2015 at 10:04

AndreaM16

4,0055 gold badges37 silver badges77 bronze badges

Comments

Caio Kawasaki · Accepted Answer · 2015-06-05 14:43:31Z

-7

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

answered Jun 5, 2015 at 14:43

Caio Kawasaki

3,0087 gold badges39 silver badges73 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Linked

Related