Load up css conditionally from angular controller

Question

I'm working on making my website more accessible. One of the issues I'm encountering is text/background contrast. According to the spec, it's fine to place a high-contrast switch which enables a high-contrast mode. In order to satisfy this requirement, I'd like to place a button or switch on my site which, when activated, trips a function that scans the document for instances of background:low-contrast and replaces that attribute with background:high-contrast.

I've done the job with ng-class="{'high-contrast':highContrast}" and

<button 
    ng-controller="HighContrastController" 
    ng-click="$root.highContrast=!$root.highContrast" 
    class="high-contrast-switch">
  <i class="fa text-white fa-adjust">
    <span class="sr-only">High Contrast Mode</span>
  </i>
</button>

with

function HighContrastController($rootScope) {
  $rootScope.highContrast = false;
}

But I think I'd prefer to do this all in controller, which would enable me to apply high contrast globally, to all views, without cluttering my partials up with logic.

One way I could do it would be to forget the high-contrast class, and apply light and dark classes. highcontrast.css would apply high-contrast colours to those classes when loaded through the controller. Is there an angular way to do this or should I rely on regular javascript to load up highcontrast.css?

fikkatra · Accepted Answer · 2016-03-29 12:54:40Z

5

Set a 'highContrast' class with ng-class on some root element, e.g. body. Then, in your css, apply seperate css rules depending on this class.

It's still quite cumbersome to change the color in the css, but at least you're not cluttering your controllers, rootscope and html. You can keep your css relatively clean by using less or sass, this will definitely help keep things simple, e.g. by using variables.

var module = angular.module('myApp', []);
module.controller('accessibilityController', function() {});
module.controller('someController', function() {});
module.controller('someOtherController', function() {});

.mainContent {
  color: blue;
}
.highContrast .mainContent {
  color: red;
}
.highContrast .custom {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-class="{'highContrast': highContrast}" ng-controller="accessibilityController">
  <button ng-click="highContrast = !highContrast">Switch colour</button>
  <div class="mainContent">
    <div ng-controller="someController">This simulates a partial view</div>
    <div ng-controller="someOtherController">This also simulates a partial view</div>
    <div class="custom">Customize accessibility by overriding css rules</div>
  </div>
</div>

answered Mar 29, 2016 at 12:54

fikkatra

5,9024 gold badges45 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Benny Powers Over a year ago

I'm getting nested controller weirdness when my switch is located inside a navbar controller by NavBarController:

fikkatra Over a year ago

not sure what you mean exactly, but it may be necessary to use $parent.highContrast to access the accessibilityController from within your navbar that is controlled by NavBarController. Otherwise, please explain what 'weirdness' you experience :-)

Collectives™ on Stack Overflow

Load up css conditionally from angular controller

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related