Получить палитру контрастного оттенка на основе текущей темы - PullRequest
Новая
       6

Получить палитру контрастного оттенка на основе текущей темы

0 голосов
/ 10 мая 2018

У меня есть следующие палитры с различными значениями оттенков, которые применяются к нескольким темам в моем файле material-theme.scss: 

$green: mat-palette($mat-green, A400);
$blue: mat-palette($mat-light-blue, A400);
$red: mat-palette($mat-red);
$red-warn: mat-palette($mat-red, A100);

В моем файле material-styles.scss есть миксин, который используется для определения стилей на основе текущей темы: 

@mixin style-theme($theme) {
  $p: map-get($theme, primary);
  $a: map-get($theme, accent);
  $w: map-get($theme, warn);
  $primary: mat-color($p);
  $accent: mat-color($a);
  $warn: mat-color($w);
  $primary-contrast: mat-contrast($p, 500);
  $accent-contrast: mat-contrast($a, 500);
  $warn-contrast: mat-contrast($w, 500);

  // Apply styling based on values above
}

Темы создаются следующим образом: 

.light-green {
    $default-theme: mat-light-theme($green, $blue);
    @include style-theme($default-theme);
    @include angular-material-theme($default-theme);
}

Могу ли я получить контраст применяемой в настоящее время палитры? Как и сейчас, я могу только жестко кодировать значение $hue для функции mat-contrast.

Демонстрация StackBlitz

Ответы [ 2 ]

0 голосов
/ 10 мая 2018

Мне удалось выяснить это путем проверки темы на предмет MatToolbar .

Вы можете получить значение контрастного цвета для палитры, используя следующее: 

$contrast: mat-color($palette, default-contrast);

См. Исправленный Демонстрация StackBlitz

0 голосов
/ 10 мая 2018

Существует шесть «специальных» клавиш, которые автоматически добавляются в палитру при использовании mat-palette(): 

default
lighter
darker
default-contrast
lighter-contrast
darker-contrast

Каждая базовая палитра содержит все цвета, сопоставленные с клавишами 50, 100, ... 900, A100, A200, A400, A700. Он также содержит подпалитру, сопоставленную с клавишей «контраст» с набором контрастных цветов, сопоставленных с теми же клавишами. Цвета, назначенные специальным клавишам, соответствуют значениям оттенка, переданным в mat-palette(), которые по умолчанию равны 500, 100 и 700 соответственно для по умолчанию, светлее и темнее. Отображаемые цвета '* -contrast' извлекаются из подпалитры контрастности с использованием тех же клавиш значения оттенка.

Когда вы звоните mat-color() без клавиши оттенка, в качестве клавиши используется default. Но вы можете использовать любую из специальных клавиш, чтобы вам не нужно было знать, какие значения оттенков действительно отображаются на специальные клавиши.

Так, например, вы можете вызвать mat-color($green, default-contrast), чтобы получить правильный контрастный цвет для цвета по умолчанию в вашей зеленой палитре.

...