JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div class="col-md-12" ng-class="colorScheme">
      <div class="panel panel-default"ng-class="colorScheme">
<div class="panel-heading orange ct-orange AFO" ng-class="colorScheme">Details</div>
<div class="panel-body" ng-bind-html="eventData.description">
  <div class="col-md-12" ng-class="colorScheme">
  <h4>Located at: {{eventData.location}}</h4>
</div>
    
<div class="row">
  <button type="button" class="btn btn-info" ng-click="colorScheme = 'AFO'" ng-model="eventData.theme">Theme AFO</button>
</div>    

</div>

  </div>
</div>

CSS

.AFO { background-color: #fff;}
.AFO h1 { color: #00159d; }
.AFO h2 { color: #00159d; }
.AFO h3 { color: #00159d; }
.AFO h4 { color: #00159d; }
.AFO h5 { color: #00159d; }
.AFO h6 { color: #00159d; }
.AFO p { color: #00159d; }
.AFO th { background-color: #c3cced; color: #00159d;}
.AFO orange { background-image:-webkit-linear-gradient(top, #c3cced, #00159d ) !important; color: #00159d !important;}
.orange {
  background-color: #ff9500;
  background-image: -moz-linear-gradient(top, #ff9500, #BF7000);
  background-image: -ms-linear-gradient(top, #ff9500, #BF7000);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ff9500), to(#BF7000));
  background-image: -webkit-linear-gradient(top, #ff9500, #BF7000);
  background-image: -o-linear-gradient(top, #ff9500, #BF7000);
  background-image: linear-gradient(top, #ff9500, #BF7000);
  background-repeat: repeat-x;
}

.AFO.panel-heading { background-image:-webkit-linear-gradient(top, #c3cced, #00159d ) !important; color: #00159d !important;}

JavaScript

$(function() {
  $(".colorSelect").change(function() {
    $("body").attr('class', '');
    $(".colorSelect").each(function() {
      $("body").addClass($(this).val());
    });
  });
});