2

I'm working on a angularjs project and I need to use a user-define(dynamic) color in CSS, Is there any way to use this dynamic color in my CSS using Angularjs, core JS or SASS?

Something like...

Interal CSS in HTML Page:

<style>
 .button, .link {
    background:{{ ColorTheme }};
  }
</style>

AngularJS Controller:

app.controller('myController', function($scope) {
    $scope.ColorTheme = '#f00'};
});
om_jaipur
  • 2,176
  • 4
  • 30
  • 54
  • One method would be to create multiple css theme files using Sass, and changing the reference depending on user need. – Prajwal Jan 29 '18 at 10:52
  • 1
    Yes you can, you should keep the style tag inside of just same controller markup boundary. Or you can achieve it via ng-class as well. – Hanif Jan 29 '18 at 11:13
  • @Prajwal, can you explain more your point – om_jaipur Jan 29 '18 at 11:25

1 Answers1

3

you can use a tool from angularjs called ng-style.

here a example:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-style="myObj">Welcome</h1>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.myObj = {
        "color" : "white",
        "background-color" : "blue",
        "font-size" : "60px",
        "padding" : "50px"
    }
});
</script>
</body>

references: https://www.w3schools.com/angular/ng_ng-style.asp

Matheus Castro
  • 81
  • 5
  • Thanks @Matheus, but I need it for multi-pal selectors(.button, .link, .menu, a), and I can't track them(I mean I don't have HTML access) – om_jaipur Jan 29 '18 at 10:43
  • Take a look on the first answer of this topic on stackoverflow https://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply you can also use the var myEl = angular.element( document.querySelector( 'div' ) ); myEl.addClass('yourClassNameCreate'); – Matheus Castro Jan 29 '18 at 10:54
  • Good one but that also required HTML access to add id `(document.getElementById('someElementId')` – om_jaipur Jan 29 '18 at 11:22
  • I think you can solve your problem easily using Jquery, but you said only (Angularjs, core JS or SASS). Right ? – Matheus Castro Jan 29 '18 at 11:30
  • Yes, I know that way.. `$(multipal selectors).style()` but better if I can achieve it using Angularjs or SASS, thanks. – om_jaipur Jan 29 '18 at 11:35