title: Angular Material Dynamically define theme
body: <p>I am rewriting an AngularJS application where the theme of the application is provided by the server. Also the theme can be edited by the user within the application (via color pickers). </p>
  
  <p>This was possible via the <code>ng.material.IThemingProvider</code> and the <code>$mdTheming</code> from Angularjs material. But In Angular those services do not exist. So that leaves me with the question, <em>how can I dynamically create an Angular Material theme and use it?</em> </p>
  
  <hr>
  
  <p><strong>The server response</strong></p>
  
  <p>I am getting the following data from the server: </p>
  
  <pre><code>"css": {
      "--nav-font-color-accent": "#fff",
      "--nav-font-color-active": "#fff",
      "--primary": "#4f2d7f",
      "--nav-background": "#fefffe",
      "--nav-font-color": "#47a742",
      "--warn": "#ff5722",
      "--accent": "#00a8b5",
      "--brand-color": "#47a742"
  }
  </code></pre>
  
  <p>This data is then converted to an Angularjs-material theme via the <code>ng.material.IThemingProvider</code>:</p>
  
  <pre><code> this.themeProvider.definePalette('primaryPalette', this.generatePalette(config['--primary']));
   this.themeProvider.theme('default')
            .primaryPalette('primaryPalette')
  </code></pre>
  
  <hr>
  
  <p>Is there a way I can reproduce this functionality in Angular Material <code>7.1.0</code>?</p>