Fuse fully takes advantage of Angular Material's theming.

All Material theming related codes can be found in the src/app/app.theme.scss file. This file is responsible for creating Material color themes as well as applying those themes to the individual components.

To simply explain, every component that comes with Fuse has a separate *.theme.scss file which has everything theming related. These files are separate from the component's scss files simply because they have theming mixins and they need to be imported in app.theme.scss. Having those mixins in the component's scss file would have caused duplicate content when imported.

Below, you can see an example theme (calendar.theme.scss) file. When you create a component, or move one from the Demo app, you need to import this scss file in the app.theme.scss file and add it to the component-theme mixin array.

@mixin calendar-theme($theme) { $background: map-get($theme, background); $foreground: map-get($theme, foreground); $primary: map-get($theme, primary); $accent: map-get($theme, accent); $warn: map-get($theme, warn); $is-dark: map-get($theme, is-dark); // ... // The content of the mixin // ... }

calendar.theme.scss

// Import the .theme.scss file from its correct location @import "src/app/main/~/calendar.theme"; // Define a mixin for easier access @mixin components-theme($theme) { // Include the imported calendar-theme mixin into the components-theme mixin @include calendar-theme($theme); }

app.theme.scss

The components-theme mixin will be called when you define a new theme so that the components can be styles according to that theme.

Too see more examples about multiple color themes you can see the src/app/app.theme.scss file from the Demo project.

To learn more about the contents of the $theme map, check out the Demo project. There are plenty of examples in there and you can also print out the contents of the map using the @debug function of the sass.