Documentation
Guides
Customization

## Component Theming

Normally, Angular Material requires a separate .scss file for theming and that file must be included into a mixin where the defined Angular Material themes can be applied. This approach not only forces you to create another .scss file for component theming, but it also forces you to import that file from another place just so you can use the Angular Material mixin to apply the theme.

This breaks the modularity because now you have a reference to your component's theming file from who knows where and you also have to remember to do all this again and again every time you want to use the theme colors from your components.

Fuse, on the other hand, provides a way easier method to add theming to your components: Tailwind utilities!

### Color palette utilities

As mentioned before, Angular Material uses 3 main palettes to generate themes; "Primary", "Accent" and "Warn". Being able to access these palettes and use their colors with your components is a must have feature, otherwise you wouldn't be able to create components, apps or pages that "belong" to your app.

All palette colors are available as Tailwind utility classes, and since these palettes are no more than Tailwind color palettes, they are processed as one by Tailwind, therefore, every single color related utility you have in Tailwind also have primary, accent and warn colors and you can use them just like any other color utility:

<!-- Default primary color as the text color --> <h1 class="text-primary">I'm a Title</h1> <!-- accent-300 as the text color --> <h1 class="text-accent-300">I'm a Title</h1> <!-- warn-800 as the text color --> <h1 class="text-warn-800">I'm a Title</h1> <!-- Default primary color as the bg color --> <div class="bg-primary"></div> <!-- accent-300 as the bg color --> <div class="bg-accent-300"></div> <!-- warn-800 as the bg color --> <div class="bg-warn-800"></div> <!-- primary-600 as the bg and the contrasting color as the text color --> <div class="bg-primary-600 text-on-primary-600"></div> <!-- accent-300 as the bg and the contrasting color as the text color --> <div class="bg-accent-300 text-on-accent-300"></div> <!-- warn-800 as the bg and the contrasting color as the text color --> <div class="bg-warn-800 text-on-warn-800"></div> <!-- Some more examples --> <div class="text-primary bg-primary-100 border-accent ring-warn-400 ..."></div> <!-- Some more examples --> <div class="text-primary text-opacity-50"></div> <!-- Some more examples --> <div class="bg-accent-900 bg-opacity-5"></div>

### Other color utilities

There are also other color utilities to quickly set the background or the text color of an element. These special utilities have different values on different schemes. For example, "bg-card" will have different colors depending on the selected scheme so you don't have to set the background color explicitly for "Dark" themes.

<!-- Default text color --> .text-default <!-- Secondary text color --> .text-secondary <!-- Hint text color --> .text-hint <!-- Disabled text color --> .text-disabled <!-- Default border color --> .divider <!-- Card background color --> .bg-card <!-- Faded background color for hovered states --> .bg-hover <!-- Default background color --> .bg-default <!-- Default dialog background color --> .bg-dialog' <!-- Default background color as the ring color --> .ring-bg-default <!-- Default card background color as the ring color --> .ring-bg-card