Theming my own components by handling two themes ? Angular Material

Question

I'm trying to theming my own components by handling two themes.

So I wrote the following code. Here is theme.scss

    @import '~@angular/material/theming';
    
    @include mat-core();
    
    $theme-primary: mat-palette($mat-blue);
    $theme-accent:  mat-palette($mat-grey, A200, A100, A400);
    $theme-warn:    mat-palette($mat-red);
    
    $theme:         mat-light-theme($theme-primary, $theme-accent, $theme-warn);
    $theme-dark:    mat-dark-theme($theme-primary, $theme-accent, $theme-warn);
    
    .theme {
      @include angular-material-theme($theme);
    }
    
    .theme-dark {
      @include angular-material-theme($theme-dark);
    }

I wrote a simple component. Here is hello.component.scss

@import './../theme.scss';        
@mixin change-color($theme) {
        $config: mat-get-color-config($theme);
        $primary: map-get($config, primary);
        $accent: map-get($config, accent);
      
        :host {
            background-color: mat-color($accent, 100);
        }
    }
    
    :host {
        color: red
    }

The problem here is that the color is fixed no matter if I change the theme.

I would like to use a color of a certain hue that change to another color when I switch to dark theme mode.

Is it possible ? How ?

Thanks for helping

score 0 · Accepted Answer · answered Aug 27 '20 at 13:14

Solution

Can't write inside component style. Must be in theme.scss. So you have to write this.

@import '~@angular/material/theming';
    
@include mat-core();

$theme-primary: mat-palette($mat-blue);
$theme-accent:  mat-palette($mat-grey, A200, A100, A400);
$theme-warn:    mat-palette($mat-red);

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

@mixin cust-component($theme) {
   $background: map-get($theme, background);

   .class-from-hello-component { 
       background-color: mat-color($background, background);
   }
}

.theme {
  @include angular-material-theme($theme-light);
  @include cust-component($theme-light);
}

.theme-dark {
  @include angular-material-theme($theme-dark);
  @include cust-component($theme-dark);
}

Give a look at parameters of $background from ~@angular/material/theming

// Background palette for light themes.
$mat-light-theme-background: (
  status-bar: map_get($mat-grey, 300),
  app-bar:    map_get($mat-grey, 100),
  background: map_get($mat-grey, 50),
  hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
  card:       white,
  dialog:     white,
  disabled-button: rgba(black, 0.12),
  raised-button: white,
  focused-button: $dark-focused,
  selected-button: map_get($mat-grey, 300),
  selected-disabled-button: map_get($mat-grey, 400),
  disabled-button-toggle: map_get($mat-grey, 200),
  unselected-chip: map_get($mat-grey, 300),
  disabled-list-option: map_get($mat-grey, 200),
);

you could retrieve $primary and $accent inside @mixin cust_component(){}

$primary: map-get($theme, primary);
$accent: map-get($theme, accent);

but mat-dark-theme($theme-primary, $theme-accent, $theme-warn), isn't changing color of them.

Theming my own components by handling two themes ? Angular Material

1 Answers1