Menu
I am building an angular2 app using angular material2. I am trying to set the background of my application "the correct way", but I can't figure out how.
I found a class I can use on my <body> element: mat-app-background which I can add, that gives me a default color (depending on whether I'm using the light or dark themes).
I wish to define this background color to use my brands' color, but I cannot figure out how to do it.
In _theming.scss it is defined like so:
// 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's 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 adding the background color to my custom theme, somehow, but I couldn't understand how to do so.
On the Material2 theming documentation it only says:
"In Angular Material, a theme is created by composing multiple palettes. In particular, a theme consists of:
How can I add my background to the theme, or do it in any other way?
765
it's very easy to create a custom angular material theme. This will allow you to specify primary, accent and warning colors that will be used on Angular Material components. Your custom theme will be a Sass file and in our case, we'll call it theme. scss and place it in our app's /src folder.
To read color values from a theme, you can use the get-color-config Sass function. This function returns a Sass map containing the theme's primary, accent, and warn palettes, as well as a flag indicating whether dark mode is set. @use 'sass:map'; @use '@angular/material' as mat; $color-config: mat.
Defining a theme in Angular Material is extremely simple, all we need to do is to create a theme file, select three color palettes for the main theme colors — primary, accent and warn — and we are all set! Feel free to explore all the palettes that are available out of the box.
If you want to change the theme's background color for the entire app in a clean way, you can override your theme with the following.
// Set custom background color $custom-background-color: map_get($mat-blue-grey, 50); // -or- Can set colour by hex value too $custom-background-color: #628cc9; $background: map-get($theme, background); $background: map_merge($background, (background: $custom-background-color)); $theme: map_merge($theme, (background: $background)); This assumes you have already set up your $theme using mat-light-theme or mat-dark-theme. Of course you can substitute $mat-blue-grey for a color map of your choosing.
Here is a full example of how I am using this. I have the following in a file called theme.scss, which is included in my angular.json "styles" entry:
// Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // Be sure that you only ever include this mixin once! @include mat-core; // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker // hue. $primary: mat-palette($mat-red, 600, 400, 900); $accent: mat-palette($mat-blue-grey, 500, 200, 700); $background-color: map_get($mat-blue-grey, 50); // The warn palette is optional (defaults to red). $warn: mat-palette($mat-blue); // Create the theme object (a Sass map containing all of the palettes). $theme: mat-light-theme($primary, $accent, $warn); // Insert custom background color $background: map-get($theme, background); $background: map_merge($background, (background: $background-color)); $theme: map_merge($theme, (background: $background)); // Include theme styles for core and each component used in your app. // Alternatively, you can import and @include the theme mixins for each component // that you are using. @include angular-material-theme($theme); @include my-app-theme($theme); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
