I am having a difficult time figuring out how to use M3. I've been trying to follow Agular's documentation here. I used ng generate @angular/material:theme-color to generate several palettes, but the documentation isn't very clear on what the next steps are to be able to use the generated colors/palettes. I have in my theme.scss: @use '@angular/material' as mat; @use 'theme-colors' as theme-colors; html { color-scheme: light; //or dark; @include mat.theme(( color: ( primary: theme-colors.$primary-palette, tertiary: theme-colors.$tertiary-palette, ), typography: Roboto, density: 0)); } I'm guessing on the above code base on what I can find. How do I actually apply the different colors to different material elements? In M2 I could add a color="primary" or color="accent" but I know that isn't the correct way to do it with M3 based on the documentation here, but that example doesn't make sense to me, and I can't find any other documentation on how to do this. Another thing that I am having a hard time finding documentation on is how do I access the generated colors in my theme.css? For example if I want to get the value for _palettes.secondary.50 Questions: Is my theme set up correctly? How to apply theme colors to mat elements? How to access theme colors to be used in custom css? (bonus) Why aren't the hex colors used to generate the theme actually in the generated theme? Continue reading...
