Setting Angular Material 2 theme to dark theme

16,829

Solution 1

Add following CSS in your style.css file:

@import '~@angular/material/core/theming/all-theme';

// NOTE: Theming is currently experimental and not yet publically released!

@include md-core();

$primary: md-palette($md-deep-purple);
$accent:  md-palette($md-amber, A200, A100, A400);

$theme: md-light-theme($primary, $accent);

@include angular-material-theme($theme);

$dark-primary: md-palette($md-pink, 700, 500, 900);
$dark-accent:  md-palette($md-blue-grey, A200, A100, A400);
$dark-warn:    md-palette($md-deep-orange);

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

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

P.S. https://github.com/jelbourn/material2-app/blob/master/src/material2-app-theme.scss

Solution 2

As of current release: 2.0.0-beta.3, add bellow to your global sass file.

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// 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.
$dark-primary: mat-palette($mat-blue-grey);
$dark-accent:  mat-palette($mat-amber, A200, A100, A400);

// The warn palette is optional (defaults to red).
$dark-warn:    mat-palette($mat-deep-orange);

// Create the theme object (a Sass map containing all of the palettes).
$cdark-theme: mat-light-theme($dark-primary, $dark-accent, $dark-warn);

// 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($cdark-theme);

More details

Share:
16,829

Related videos on Youtube

mojtab23
Author by

mojtab23

Java developer. Mostly backend. Love Rust and learning new things. Also interested in 3D, Games and CG.

Updated on September 15, 2022

Comments

  • mojtab23
    mojtab23 about 1 year

    I recently created an Angular Material 2 app by following this guide. Now I want to know how can I change the theme to dark or dark-theme?

  • mojtab23
    mojtab23 almost 7 years
    It's not working because language of above code is scss not css.
  • codef0rmer
    codef0rmer almost 7 years
    @mojtab23 there is no support for variables in CSS (atleast widely). SCSS is the only way to override CSS.
  • DevVersion
    DevVersion almost 7 years
    Yeah that's the correct answer. You need to use SCSS to build your custom theme, or you need to use a prebuilt dark theme.
  • PatrickS
    PatrickS over 6 years
    Change md-xxx to mat-xxx in material latest version! Example: md-palette is now mat-palette...