Тематический существующий угловой шаблон - PullRequest
Новая
       21

Тематический существующий угловой шаблон

0 голосов
/ 02 ноября 2018

Я новичок в 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
);
...