Question

我是Angular的新手，我受命采用现有的模板https://demos.creative-tim.com/material-dashboard-pro/examples/dashboard.html

并使用多个主题对其进行主题化。我有一个使用下拉选择器的浅色和深色主题，但是如何设置新的品牌颜色？

例如，主题1（浅色主题）使用标准的品牌颜色，而主题2（深色主题）使用不同的品牌颜色？

    @import "dashboard/cards-theme.scss-theme";

 @mixin my-custom-components($theme) {
  @include app-my-app-theme($theme);
  /* ... */
  }


 .my-theme{
  @include angular-material-theme($my-theme);
  @include my-custom-components($my-theme);

 }

 .my-second-theme{
  @include angular-material-theme($my-second-theme);
  @include my-custom-components($my-second-theme);

 }

在我拥有的深色主题scss文件中

    @import "../core/mixins";
@import "../core/variables_dark_theme";
@import "../core/buttons";


$brand-primary:              $red-500;
$brand-info:                 $blue-500;
$brand-success:              $pink-500;
$brand-warning:              $black-color;
$brand-danger:               $cyan-500;
$brand-rose:                 $orange-500;
$brand-inverse:              $black-color;

@import '~@angular/cdk/overlay-prebuilt.css';



@import "~bootstrap/scss/bootstrap";
@import "../core/reboot";


$my-second-theme-primary: mat-palette($mat-blue, 700, 300, 200);
$my-second-theme-accent: mat-palette($mat-blue, 200, 500, 700);
$my-second-theme-warn: mat-palette($mat-red, 700, 300, 200);

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

在浅色主题scss中，我有：

@import "../core/variables";
@import "../core/buttons";

$brand-primary:              $purple-500;
$brand-info:                 $cyan-500;
$brand-success:              $green-500;
$brand-warning:              $orange-500;
$brand-danger:               $red-500;
$brand-rose:                 $pink-500;
$brand-inverse:              $black-color;

@import '~@angular/cdk/overlay-prebuilt.css';


@import "../core/mixins";
@import "~bootstrap/scss/bootstrap";
@import "../core/reboot";


$my-theme-primary: mat-palette($mat-cyan, 700, 300, 200);
$my-theme-accent: mat-palette($mat-blue-grey, 700, 300, 200);
$my-theme-warn: mat-palette($mat-red, 500, 400, 200);

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

主题化现有的角度模板

0 个答案: