Angular 5 Material multiple themes how to

Question

I have this file as my root scss :

@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 default theme (same as the example above).
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);

// Include the default theme styles.
@include angular-material-theme($candy-app-theme);


// Define an alternate dark theme.
$dark-primary: mat-palette($mat-blue-grey);
$dark-accent:  mat-palette($mat-amber, A200, A100, A400);
$dark-warn:    mat-palette($mat-deep-orange);
$dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

// Include the alternative theme styles inside of a block with a CSS class. You can make this
// CSS class whatever you want. In this example, any component inside of an element with
// `.unicorn-dark-theme` will be affected by this alternate dark theme instead of the default theme.
.unicorn-dark-theme {
  @include angular-material-theme($dark-theme);
}

as per : https://material.angular.io/guide/theming#multiple-themes

I'm sorry but the guide is not much to go on. If you can see anything that I can please tell me. I read it five times top to bottom I can't find any clues.

where to from here?

if I try to do :

.main{
   background: $candy-app-primary;
}

the app fails with :

Failed to compile.

./src/app/app.component.scss
Module build failed: 
undefined
            ^
      (50: #e8eaf6, 100: #c5cae9, 200: #9fa8da, 300: #7986cb, 400: #5c6bc0, 500: #3f51b5, 600: #3949ab, 700: #303f9f, 800: #283593, 900: #1a237e, A100: #8c9eff, A200: #536dfe, A400: #3d5afe, A700: #304ffe, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: white, 400: white, 500: white, 600: white, 700: white, 800: white, 900: white, A100: rgba(0, 0, 0, 0.87), A200: white, A400: white, A700: white), default: #3f51b5, lighter: #c5cae9, darker: #303f9f, default-contrast: white, lighter-contrast: rgba(0, 0, 0, 0.87), darker-contrast: white, "50-contrast": rgba(0, 0, 0, 0.87), "100-contrast": rgba(0, 0, 0, 0.87), "200-contrast": rgba(0, 0, 0, 0.87), "300-contrast": white, "400-contrast": white, "500-contrast": white, "600-contrast": white, "700-contrast": white, "800-contrast": white, "900-contrast": white, "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": white, "A400-contrast": white, "A700-contrast": white, "contrast-contrast": null) isn't a valid CSS value.
      in C:\Users\j_bard\WebstormProjects\AirConnect\web\web.ui\node_modules\@angular\material\_theming.scss (line 1136, column 14)
 @ ./src/app/app.component.ts 20:21-52
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

I don't understand how I'm supposed to use Material multiple theme.

here's my package.json :

{
  "name": "web.ui",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng b -prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.3",
    "@angular/cdk": "^5.2.2",
    "@angular/common": "^5.2.3",
    "@angular/compiler": "^5.2.3",
    "@angular/core": "^5.2.3",
    "@angular/forms": "^5.2.3",
    "@angular/http": "^5.2.3",
    "@angular/material": "^5.2.2",
    "@angular/platform-browser": "^5.2.3",
    "@angular/platform-browser-dynamic": "^5.2.3",
    "@angular/router": "^5.2.3",
    "angular-2-local-storage": "^1.0.1",
    "angular-font-awesome": "^3.1.2",
    "core-js": "^2.5.3",
    "exitzero": "^1.0.1",
    "font-awesome": "^4.7.0",
    "ng2-ion-range-slider": "^1.0.3",
    "parcel-plugin-inlinesvg": "0.0.12",
    "rxjs": "^5.5.6",
    "typeface-comfortaa": "0.0.54",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@angular/cli": "1.7.0",
    "@angular/compiler-cli": "^5.2.3",
    "@angular/language-service": "^5.2.3",
    "@types/jasmine": "^2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~9.4.0",
    "codelyzer": "^4.1.0",
    "jasmine-core": "~3.0.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.4.1",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "parcel-bundler": "^1.5.1",
    "parcel-plugin-angular": "0.5.1-next.13",
    "parcel-plugin-typescript": "^0.6.0",
    "postcss-modules": "^1.1.0",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.0",
    "tslint": "~5.9.1",
    "typescript": "~2.7.0"
  }
}

could I have an example senario with a light and a dark theme?

yeah I read material.angular.io/guide/… and tried adding some of it's code in my scss file above. I don't get it. I'm not going to be using material's predefined colors anyhow. I already have my three themes ready. All I want is to get what plug goes into what socket. I get that that there's a bunch of cables that are supposed to weave a specific path but right now they're a jumble to me. — tatsu
– tatsu, Commented Feb 21, 2018 at 12:43
@Jota.Toledo hey. I still haven't managed to make it work. does the base style file need to be scss (already made that switch) and do I need to have the above style in that root file or is it enough for the root style file to import it? also what variable are we setting to our final selectors? — tatsu
– tatsu, Commented Feb 22, 2018 at 8:53

ProfitWarning · Accepted Answer · 2018-02-25 14:16:00Z

1

background: $candy-app-primary;

$candy-app-primary defines a pallete not a color.

To get the color you have to use mat-color()

$primary: mat-color($candy-app-primary);

Example from my theme.scss:

$ev-app-primary: mat-palette($mat-indigo, 800, 300, 900);
$ev-app-accent: mat-palette($mat-blue, A200, A100, A400);
$ev-app-warn: mat-palette($mat-deep-orange, A200);
$ev-theme: mat-light-theme($ev-app-primary, $ev-app-accent, $ev-app-warn);

$primary: mat-color($ev-app-primary);
$accent: mat-color($ev-app-accent);
$warn: mat-color($ev-app-warn);

$foreground: map-get($ev-theme, foreground);
$background: map-get($ev-theme, background);

then you can use the color like:

background-color: rgba(mat-color($background, card), .25);
color: $primary;

answered Feb 25, 2018 at 14:16

ProfitWarning

1,9321 gold badge11 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

tatsu Over a year ago

ok. first off thanks a ton. but what is going on? why card? ...I partially get mat-color, it's a type of variable that doesn't need the $ sign and that can truly "vary" outside of the style (css, scss) "universe". then I get that we call an actual scss variable we set earlier which thanks to mat-color will be parsed beforehand and at the end we convert a rgb to rgba simply by adding the opacity value to it. wth is card? also that's all nice and pretty but if I swim up the stream here I don't end up at an actual hex or rgb. where is it? how do I set my own colors and make them vary?

tatsu Over a year ago

I've implemented what you said now how do I get a button that switches between light and dark theme?

ProfitWarning Over a year ago

"card" is a map key for internal material. Documentation is a joke on this. there are others like: background-color: mat-color($background, focused-button); You can find more on material's github e.g. repo . For multiple themes this is a good start: guide to Angular Material Themes

ProfitWarning Over a year ago

background-color: mat-color($primary); works too. the key is optional

Collectives™ on Stack Overflow

Angular 5 Material multiple themes how to

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related