Skip to content

Latest commit

 

History

History
42 lines (33 loc) · 1.16 KB

theme.md

File metadata and controls

42 lines (33 loc) · 1.16 KB
Raw

Theming

Angular Material Components

https://material.angular.io/guide/theming

Custom Components

https://material.angular.io/guide/theming-your-components

Theme

The themes, colors, and font are defined in web/src/theme.scss.

Additionally in this file, class definitions for the themes are available:

// theme.scss
...
.dashboard-light-theme {
    @include angular-material-theme($dashboard-light-theme);
    @include tables-theme($dashboard-light-theme);
    @include pages-theme($dashboard-light-theme);
    @include cards-theme($dashboard-light-theme);
    @include pages-component-theme($dashboard-light-theme);
}
...

tables-theme, pages-theme, etc. are custom components. For any custom component that needs to be styled according to a theme, a <component>-theme.scss file should be defined. This example styles <a> components as the primary theme color:

// tables-theme.scss
@use '~@angular/material' as mat;

@mixin tables-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);

    a {
        color: mat.get-color-from-palette($primary, 'text');
        text-decoration: none;
    }
}