Come cambiare dinamicamente i valori css (come il colore in tutta l'app) ecc

Question

ho una domanda ...

Se si desidera uno stile condizionale: è necessario utilizzare ng-class o ng-style costruzione.

Ma ...

Per esempio: io sono un amministratore, e voglio cambiare il colore della mia applicazione con il colore personalizzato da colorpicker. Come posso cambiare qualche codice in css?

Per esempio io ho questa linea in style.css:

body{ 
    background: #ffffff; 
} 

(anche tutti i tag come una, h1 ecc implementare un pò di colore)

e controller cambio questo #ffffff-#000000.

Qual è il modo migliore per cambiare questo colore in css, senza utilizzare ng-class o ng-style su ciascun tag in ogni controller?

Answer 1

È possibile scrivere la regola CSS in JavaScript e aggiungerla dinamicamente a un foglio di stile. Un paio di buoni articoli su come farlo sono here e here.

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

Naturalmente, in modo angolare puro, si creerebbe una direttiva che avvolge l'interazione DOM/foglio di stile.

Answer 2

Il modo migliore è generare un file come color.css con tutte le regole CSS con color, background-color, border-color ecc. Sovrascritte. Ma angularjs non sarà abbastanza.

colore-default.css

body { 
    background: #fff; 
} 

color.css modo

body { 
    background: #f00; 
} 

---

completa JS
Aggiungi classe su ogni elemento che si desidera sovrascrivere. Creare classe per ogni immobili come così:

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

Applicare classe sul tuo html in cui si desidera:

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

È possibile salvare la variabile di colore in localStorage per esempio.
Demo: http://codepen.io/anon/pen/jPrabY

Answer 3

Il modo più semplice che posso pensare è, ad esempio, cliccando sulla miamacchina cambia il suo 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;} 

Speranza Sono stato disponibile.

Answer 4

Un'altra alternativa è SASS o meno e trattare con i colori usando variabile ...