通过处理两个主题来设置我自己的组件的主题？ Angular Material

Question

我正在尝试通过处理两个主题来为我自己的组件设置主题。

所以我写了下面的代码。这里是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);
    }

我写了一个简单的组件。这里是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
    }

这里的问题是无论我换主题还是固定的颜色

我想使用某种色调的颜色，当我切换到深色主题模式时会变成另一种颜色。

可能吗？怎么样？

感谢您的帮助

Answer 1

解决方案

无法在组件样式中写入。必须在 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-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);
}

看看 $background 来自 ~@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),
);

您可以在 @mixin cust_component(){}

中检索 $primary 和 $accent

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

但是 mat-dark-theme($theme-primary, $theme-accent, $theme-warn) 没有改变它们的颜色。

通过处理两个主题来设置我自己的组件的主题？ Angular Material

Theming my own components by handling two themes ? Angular Material

angular

angular-material

angular-material-theming