allow themes to override single properties and use theme variables for status highlighting

app/components/architecture-visualisation-cytoscape/style.js

@@ -115,10 +115,10 @@ edge {
 }
 
 .WARNING {
-    background-color: yellow;
+    background-color: ${theme.statusWARNcolor};
 }
 .FAIL {
-    background-color: red;
+    background-color: ${theme.statusFAILcolor};
 }
 
 :selected {

app/services/visualisation-settings.js

 import Ember from 'ember';
 import Themes from '../utils/visualisation-themes';
 
-const { Service, computed } = Ember;
+const { Service, computed, copy, merge } = Ember;
 
 /**
  * Stores the settings for visualisations for a user.
@@ -45,12 +45,15 @@ export default Service.extend({ // TODO: load and save to localstorage
 
     /**
      * Computed property that returns the CSS style object of the current theme.
+     * Themes can override each property of the `iObserve` Theme
+     *
      * @property themeStyle
      * @type {Object | CytoscapeCSS}
      * @readOnly
      */
     themeStyle: computed('theme', function() {
-        return Themes[this.get('theme')];
+        const defaultCopy = copy(Themes.iObserve);
+        return merge(defaultCopy, Themes[this.get('theme')]);
     }),
     /**
      * List of available themes.

app/utils/visualisation-themes.js

 export default {
+    // this is the default theme, others can override properties, partial overrides are supported
     'iObserve': {
         nodeGroupTextColor : '#333399',
         nodeGroupColor : 'white',
@@ -11,7 +12,9 @@ export default {
         serviceBorderColor : '#AAA',
         arrowLineColor : '#AAA',
         arrowColor : '#AAA',
-        arrowLabelColor: '#333399'
+        arrowLabelColor: '#333399',
+        statusWARNcolor: 'yellow',
+        statusFAILcolor: 'red'
     },
     'arctic': {
         nodeGroupTextColor: '#3399CC',