Как динамически изменять значения css (например, цвет в целом приложении) и т.д.

У меня есть один вопрос...

Если вы хотите условный стиль: вы должны использовать конструкцию ng-class или ng-style.

Но...

Например: я администратор, и я хочу изменить цвет своего приложения с пользовательским цветом из colorpicker. Как изменить код в css?

Например, у меня есть эта строка в style.css:

body{
  background: #ffffff;
}

(также все теги, такие как a, h1 и т.д., реализуют некоторый цвет)

и в контроллере я изменяю этот #ffffff на #000000.

Каков наилучший способ изменить этот цвет в css, не используя ng-class или ng-style для каждого тега в каждом контроллере?

Ответ 1

Лучший способ - создать файл типа color.css со всеми правилами css с color, background-color, border-color и т.д., переопределенными. Но угловатых будет недостаточно.

цвет-default.css

body {
    background: #fff;
}

color.css

body {
    background: #f00;
}

Полный способ JS
Добавьте класс на каждый элемент, который вы хотите переопределить. Создайте класс для всех таких свойств:

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

Применить класс на свой html, где вы хотите:

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

Вы можете сохранить цветовую переменную в localStorage, например.
Démo: http://codepen.io/anon/pen/jPrabY

Ответ 2

Вы можете написать правило CSS в JavaScript и динамически добавить его в таблицу стилей. Несколько хороших статей о том, как это сделать, здесь и здесь.

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

Конечно, в чистом виде Angular вы должны создать директиву, которая обертывает взаимодействие DOM/stylesheet.

Ответ 3

Самый простой способ, о котором я могу думать, это, например, щелчок на myBox меняет свой фоновый цвет.

HTML:

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

JS:

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

CSS

.myBox{background-color: #fff;}

Надеюсь, что я был полезен.

Ответ 4

Другой альтернативой является SASS или LESS и обрабатывает цвета с использованием переменной...