-1

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

所以我写了下面的代码。这是主题.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
    }

这里的问题是，无论我是否更改主题，颜色都是固定的。

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

是否可以 ？如何 ？

感谢您的帮助

4

1 回答 1

0

解决方案

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

看看$backgroundfrom的参数~@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),
);

你可以检索$primary并$accent在里面@mixin cust_component(){}

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

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

于 2020-08-27T13:14:51.927 回答