home chevron_right Documentation chevron_right Working with Fuse
Material Theming

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.

Theming components

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.