Cool. Our app is already starting to look better. But, what if we need to change the theme or want to customize a material theme. Let’s look at how easily we can do that.

We added “deeppurple-amber.css” to the style.scss file above choosing one of the built-in angular themes. If you’d like to select a different built-in theme, you can select from 3 others - indigo-pink, pink-bluegrey, purple-green.

@import '~@angular/material/core/theming/prebuilt/purple-green.css';

But what if I don’t like any of the built-in themes. We could start with the built-in light or dark themes and customize them to our liking.

Comment out the theme import above. We’ll create a new filed src/rwa-trivia.theme.scss and add this to the angular-cli.json.

Note that our custom theme replaces the background too and not just the palettes as seen in this linked example - https://github.com/angular/material2/blob/master/guides/theming.md.

@import '~@angular/material/core/theming/all-theme'; // Include the base styles for Angular Material core.

@include md-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.

$trivia-app-primary: md-palette($md-indigo);

$trivia-app-accent: md-palette($md-pink, A200, A100, A400); // The warn palette is optional (defaults to red).

$trivia-app-warn: md-palette($md-red); //customize the background theme

$trivia-app-theme-background: (

status-bar: map_get($md-teal, 300),

app-bar: map_get($md-teal, 100),

background: map_get($md-teal, 50),

hover: rgba(black, 0.04),

card: white,

dialog: white,

disabled-button: rgba(black, 0.12)

); //app theme funtion returns the theme from the palletes

@function md-app-theme($primary, $accent, $warn, $background) {

@return (

primary: $primary,

accent: $accent,

warn: $warn,

is-dark: false,

foreground: $md-light-theme-foreground,

background: $background,

);

} // Create the theme object (a Sass map containing all of the palettes).

$trivia-app-theme: md-app-theme($trivia-app-primary, $trivia-app-accent, $trivia-app-warn, $trivia-app-theme-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($trivia-app-theme);

Let’s try it out.

Boy, that’s ugly. Well I’m not a UI designer (need to hire one), but the above snippet demonstrate how easy it is to customize the theme to your liking.