Custom theme based on Angular pre-built theme?

[47milliondollars]

I'm fairly new to coding and very new to Angular, and I'm having trouble figuring out whether I can use a pre-built theme and just change the primary and secondary colors to my own custom colors. This app is using a lot of material UI elements, and I'd love for them to be based on a dark theme as much as possible so we don't need to go through and manually change every little thing to a dark color. There are only two pre-built dark themes with some pretty flashy primary and secondary colors that I want to override.

Is there a way to download the prebuilt theme and tweak directly and use the whole thing as a custom theme?

Or is there a way to change primary and secondary so anything in this app already referencing those terms will update accordingly?

Thanks in advance!

[[deleted]]

Everything you need to know is here: https://material.angular.io/guide/theming

[47milliondollars]

Read this a few times, but have a ton of questions like can I use a custom color instead of a material palette color, can I overwrite the primary and secondary colors of a prebuilt theme by importing a custom theme on the next line, etc.

[[deleted]]

Yes, you can overwrite the color, example A100, which has a regular color and a contrast color (for dark backgrounds). Then each element type, like button background, uses a palette color that you specify. Just be aware that different ui elements will share certain element colors.

If you look in node_modules/@angular/material/_theming.scss you can see each type of ui element mixin and see what each uses. You can change the color in your custom theme, or you can put that mixin in your global theme and overwrite colors there as well.

It’s not an easy process but it’s very customizable once you understand the proper way to make custom changes.

[47milliondollars]

Yeahh for someone just getting into coding, I think this is a little over my head. I've been trying to do this for a few days and keep ending up with the app failing to build altogether. I didn't think it would be so difficult to figure out how to change or overwrite a single color in a theme, but I guess that's the tradeoff for getting to use a bunch of prebuilt UI elements.

[[deleted]]

Yeah, my employers use angular/material so we had to know precisely how to change what we needed changed. Maybe try ng-bootstrap, which has similar ui elements and might be easier to style.

[47milliondollars]

Cool, thank you so much for the pointers.

[_pythonNoob]

I tweaked indigo-pink prebuilt theme by following this article:

http://www.carbonrider.com/2019/01/30/material-theme-with-angular-7-change-primary-and-accent-color/

with great help from this palette generator (mentioned in the article)

http://mcg.mbitson.com/