title: Angular 5: How to define color pallet in a central file
body: <p>I want to declare my color pallet in a central file in my project. </p>
  
  <p>Currently I am using an Injectable which contains a map, to reference all my used colors. Example: </p>
  
  <pre><code>@Injectable()
  
  export class COLOR_DICTIONARY {
  private static COLOR_MAP: Map&lt;string, string&gt; = new Map&lt;string, string&gt;();
  
   constructor() {
      COLOR_DICTIONARY.COLOR_MAP.set('primary', '#339988');
   }
  
   get(key: string) {
      return COLOR_DICTIONARY.COLOR_MAP.get(key);
   }
  }
  </code></pre>
  
  <p>However this forces me to reference all the colors in the markup instead of directly in the css, with ngStyle</p>
  
  <pre><code>[ngStyle]="{'color': color_dictionary.get('primary')}"
  </code></pre>
  
  <p>I am currently doing a larger redesign of the whole site, and it is becoming a hassle to change styling in both styling files &amp; markup files. (And even typescript files for adding/changing/deleting colors). </p>
  
  <p>How can I reference the color pallet in a central file - preferably a more static file like a XML file or something, which can be referenced directly in the css files. </p>
  
  <p>I am willing to convert the styling to scss files if that would make it easier, or if it's beneficial to the purpose. </p>
  
  <p>The project is bundled with webpack, so any tips on how to bundle the solution for this is also appreciated.  </p>