发表新帖
发表新帖

Angular Material2 theming - how to set app background?

后端 未结
关注
10 1583
别那么骄傲
别那么骄傲 2020-12-04 14:24

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

相关标签:
10条回答
  • 独厮守ぢ
    2020-12-04 14:48

    for extra solution if previous didn't work i angular material 2 working with encapsulation style so whatever you gonna do you can't customize angular material component from outside so an ideal solution for that i always use try this

    1- you can use this hack that gonna give you possibilities to customize angular material component if you want to by set ViewEncapsulation.None

    //test.component.ts
import { ViewEncapsulation } from '@angular/core';
@Component({
  selector: 'app-test',
  templateUrl: '.....',
  styleUrls: ['....'],
  encapsulation: ViewEncapsulation.None
})

    or

    2- if you want just to change background you can simple try this

    //style.css (main style file)
html, body {
  background-color: #fafafa;
}

    this gonna change the whole background color of all your app

    0 讨论(0)
  • 别跟我提以往
    2020-12-04 14:55

    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);
    0 讨论(0)
  • 谎友^
    2020-12-04 14:59

    There is also a mixing for colors like this:

    .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>

    That will make your toolbar the color of your primary color.

    also make sure to look at _theming.scss file in angular material.

    so you can use those mixins to just pull a color from your palette.

    0 讨论(0)
  • 广开言路
    2020-12-04 15:02

    Not exactly answer to your question, but I guess many people will end up here searching for "how to set app background color".

    In your project/index.html set your body class to mat-app-background

    <body class="mat-app-background">
  <app-root></app-root>
</body>

    And make sure in your project/angular.json you have:

            "styles": [
          "./node_modules/@angular/material/prebuilt-themes/YOUR_STYLE.css",
          ...
        ],
    0 讨论(0)
  • 暗喜
    2020-12-04 15:02

    Lately, from Material 10.x onwards, the theming methods are getting revamped. With the new approach mat-light-theme or mat-dark-theme only accepts a config object for colors. This is what I've found in the comments :

    Previously in Angular Material, theme objects contained the color configuration directly. With the recent refactoring of the theming system to allow for density and typography configurations, this is no longer the case.

    At the moment these methods support legacy approach as well, but I hope soon that will be declared as a breaking change. Since we can't merge the new background to theme object as before, the accepted answer might not work anymore.

    What I did instead of that, I've updated the $mat-light-theme-background pallete with my custom background, before creating the new theme and that did the job.

    $app-primary: mat-palette($md-light);
$app-accent: mat-palette($mat-pink, A200, A100, A400);
$app-warn: mat-palette($mat-red);
$custom-background-color: map_get($md-light, 50);

$mat-light-theme-background: map_merge($mat-light-theme-background, (background: $custom-background-color));

$light-theme: mat-light-theme((
    color: (
        primary: $app-primary,
        accent: $app-accent,
        warn:  $app-warn
    )
));

    Note: $md-light is the custom pallet that I have defined for my application, you could use any other values. Also I have tried passing 'background' along with the other color properties which didn't work some reason.

    The way themes are included is also slightly changed. Now there is new method called angular-material-color for including the themes.

    @include angular-material-color($light-theme);
    0 讨论(0)
  • 抹茶落季
    2020-12-04 15:03

    I would suggest that you declare a background colour in a variables file (assuming you're using sass) then simply import it where needed. For example:-

    @import '../config/variables';

body {
    height: 100%;
    margin: 0;
    background-color: $brand-primary;
}
    0 讨论(0)
 看不清?
提交回复
热议问题