Angular Material2 theming - how to set the background image of the application?
I am creating angular2 app using angular material2. I am trying to set the background of my application to the "correct path" but I cannot figure out how to do it.
I found a class that I can use on the <body>
: element mat-app-background
that I can add that gives me a default color (depending on whether I am using light or dark themes).
I want to define this background color to use the color of my brands, but I cannot figure out how.
In _theming.scss
it is defined as follows:
// Mixin that renders all of the core styles that depend on the theme.
@mixin mat-core-theme($theme) {
@include mat-ripple-theme($theme);
@include mat-option-theme($theme);
@include mat-pseudo-checkbox-theme($theme);
// Wrapper element that provides the theme background when the
// user content isn't inside of a `md-sidenav-container`.
.mat-app-background {
$background: map-get($theme, background);
background-color: mat-color($background, background);
}
...
}
So, I thought it would make sense to try and add a background color to my custom theme somehow, but I couldn't figure out how.
In the Material2 theming documentation, it only says:
"In angular stuff, a theme is created by creating multiple palettes. In particular, a theme consists of:
- Basic Gamut: The colors most commonly used on all screens and components.
- Accent Palette: Colors used for floating action buttons and interactive elements.
- Alert Palette: Colors used to convey error conditions.
- Foreground palette: Colors for text and icons.
- Background palette: The colors used for the background of the element. "
How can I add my background to the theme, or do it in some other way?
source to share
If you want to set the background colors, you probably want to customize your entire background and foreground palette, emulating mat-light-theme or mat-dark-theme with your own replacement. Your replacement will include your own palettes instead of mat-light-theme-foreground and background palettes.
example: https://stackblitz.com/edit/angular-material-custom-background?file=theme.scss
I don't know if this method is recommended or officially supported.
source to share
There is also color mixing:
.your-class-here {
background: mat-color($mat-grey, 700, 0.9);
}
When looking at angular material components, you can assign a color like this.
<md-toolbar color="primary">
</md-toolbar>
This will make your toolbar the color of your base color.
also make sure to look at the _theming.scss file in the angular stuff.
so you can use these mixes to simply pull color out of your palette.
source to share
There is no way to do it "right" - just workarounds and hacks. Your theme can define primary, secondary, and alert palettes, but not foreground and background palettes. The likely reason there is no direct / easy way to do this in Angular is because according to Material Design you shouldn't be doing this. Color is intended to be used in a specific way to highlight and style various elements to suit your theme, but the background and foreground colors for plain content should be either dark or light gray rather than colored. If you really need to do this, other suggestions for overriding the background theme or using your own class should suffice.
source to share
If you want to completely change the background color of a theme for the entire application, you can override your theme as follows.
// Set custom background color
$custom-background-color: map_get($mat-blue-grey, 50);
$background: map-get($theme, background);
$background: map_merge($background, (background: $custom-background-color));
$theme: map_merge($theme, (background: $background));
This assumes you have already configured $theme
with mat-light-theme
or mat-dark-theme
. Of course, you can replace $mat-blue-grey
with a color card of your choice.
source to share
see: scss palette theme on Angular github (2) Material (2)
Extracting the code:
// Background palette for light themes.
$mat-light-theme-background: (
status-bar: map_get($mat-grey, 300),
app-bar: map_get($mat-grey, 100),
background: map_get($mat-grey, 50),
hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX
card: white,
dialog: white,
disabled-button: $black-12-opacity,
raised-button: white,
focused-button: $black-6-opacity,
selected-button: map_get($mat-grey, 300),
selected-disabled-button: map_get($mat-grey, 400),
disabled-button-toggle: map_get($mat-grey, 200),
);
// Background palette for dark themes.
$mat-dark-theme-background: (
status-bar: black,
app-bar: map_get($mat-grey, 900),
background: #303030,
hover: rgba(white, 0.04), // TODO(kara): check style with Material Design UX
card: map_get($mat-grey, 800),
dialog: map_get($mat-grey, 800),
disabled-button: $white-12-opacity,
raised-button: map-get($mat-grey, 800),
focused-button: $white-6-opacity,
selected-button: map_get($mat-grey, 900),
selected-disabled-button: map_get($mat-grey, 800),
disabled-button-toggle: map_get($mat-grey, 1000),
);
// Foreground palette for light themes.
$mat-light-theme-foreground: (
base: black,
divider: $black-12-opacity,
dividers: $black-12-opacity,
disabled: rgba(black, 0.38),
disabled-button: rgba(black, 0.38),
disabled-text: rgba(black, 0.38),
hint-text: rgba(black, 0.38),
secondary-text: rgba(black, 0.54),
icon: rgba(black, 0.54),
icons: rgba(black, 0.54),
text: rgba(black, 0.87),
slider-off: rgba(black, 0.26),
slider-off-active: rgba(black, 0.38),
);
// Foreground palette for dark themes.
$mat-dark-theme-foreground: (
base: white,
divider: $white-12-opacity,
dividers: $white-12-opacity,
disabled: rgba(white, 0.3),
disabled-button: rgba(white, 0.3),
disabled-text: rgba(white, 0.3),
hint-text: rgba(white, 0.3),
secondary-text: rgba(white, 0.7),
icon: white,
icons: white,
text: white,
slider-off: rgba(white, 0.3),
slider-off-active: rgba(white, 0.3),
);
source to share