0

I have a question in regards to the angular2+ theming. I am trying to set values in Firestore to then be fetched by and angular2+ application as it is loading and dynamically set the primary and secondary colors.

In AngularJS there was a service labeled $mdThemingProvider (link: https://material.angularjs.org/1.1.4/api/service/$mdThemingProvider) which allowed setting of themes in script code.

I have not seen anything like this in Angular2 or AngularMaterial.io. Any and all help is very appreciated. I would really like to find a solution for the theming here. Thanks in advance!

Vala Khosravi
  • 2,352
  • 3
  • 22
  • 49
Nicholas Pesa
  • 2,156
  • 2
  • 24
  • 45

1 Answers1

0

From AngularMaterial.io:

Multiple themes

You can create multiple themes for your application by including the angular-material-theme mixin multiple times, where each inclusion is gated by an additional CSS class.

The example they provide shows how to define two themes ($candy-app-theme and $dark-theme) and uses a class to apply the dark theme to any component inside. In our case, I imagine we would fetch the theme value from Firebase and bind to a class.

stealththeninja
  • 3,576
  • 1
  • 26
  • 44
  • Thank you for the answer but in this case the options for colors could be a combination of any two material colors so I cannot create themes based around every possible combination. I have a specific case where I need to generate the theme after a service fetches colors from firebase. I appreciate the help here! Thanks! – Nicholas Pesa Nov 01 '17 at 17:02
  • Ah, are you trying to let the user pick a primary and accent color? Have a look at the Material.io color tool to see how they're implementing dynamic colors. I'll see if I can find a link and update my post later. – stealththeninja Nov 02 '17 at 00:29
  • Yes the desired functionality would let the user pick colors. Unfortunately the Material.io color tool is using angularjs not Angular2+. Thanks for the link, I appreciate the help here! – Nicholas Pesa Nov 02 '17 at 19:52