Skip to content

Commit

Permalink
feat(theming): provide a content wrapper attribute
Browse files Browse the repository at this point in the history
Adds the `md-app-background` class which users can apply to their wrapper element, in order to provide the theme background. This is necessary, because the only element that does this at the moment is `md-sidenav-container` and it's not something that necessarily everybody uses.

Fixes angular#1938.
Fixes angular#2106.
  • Loading branch information
crisbeto committed Dec 30, 2016
1 parent dccbe41 commit ec255d5
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 1 deletion.
6 changes: 5 additions & 1 deletion guides/theming.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ The actual path will depend on your server setup.

You can also concatenate the file with the rest of your application's css.

Finally, if your app's content **is not** placed inside of a `md-sidenav-container` element, you
need to add the `md-app-background` class to your wrapper element (for example the `body`). This
ensures that the proper theme background is applied to your page.

### Defining a custom theme
When you want more customization than a pre-built theme offers, you can create your own theme file.

Expand Down Expand Up @@ -98,7 +102,7 @@ secondary dark theme:

$dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);

@include angular-material-theme($dark-theme);
@include angular-material-theme($dark-theme);
}
```

Expand Down
7 changes: 7 additions & 0 deletions src/lib/core/_core.scss
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,11 @@
// Mixin that renders all of the core styles that depend on the theme.
@mixin md-core-theme($theme) {
@include md-ripple-theme($theme);

// Wrapper element that provides the theme background when the
// user's content isn't inside of a `md-sidenav-container`.
.md-app-background {
$background: map-get($theme, background);
background-color: md-color($background, background);
}
}

0 comments on commit ec255d5

Please sign in to comment.