it-swarm.com.ru

Как я могу использовать цвета Material Theme для пользовательских вещей?

Я пытаюсь использовать определенный (ФОН) цвет из моей темы, чтобы сделать другие элементы этого цвета

Как разработан этот способ? Есть ли разработанный способ сделать это?

Например, Есть ли способ сказать, что этот пользовательский элемент должен использовать цвет текущей темы -> background -> disabled color? так далее

Я хотел бы, например, сказать, что этот конкретный элемент должен быть любого цвета текущей темы -> фоновая палитра -> disabled-list-option. 

Спасибо!!

 enter image description here

2
JBoothUA

Ответ на ЭТОТ: вопрос на самом деле то, что я искал: Это было намного проще, чем я думал:

.mat-option {
  color : mat-color($foreground, text);
}

Угловой материал - изменить цвет выбранной опции списка матов

2
JBoothUA

Я искал повторно использую тот же цвет scss и наткнулся на этот пост , который я настоятельно рекомендую, чтобы вы могли понять повторное использование значений в ваших файлах SCSS, чтобы сделать их более удобными для сопровождения.

Подводя итог, вы можете определить переменные SCSS, определив что-то вроде этого:

$important-color: rgb(1, 2, 3);

А затем использовать его так:

class-1 {
    background-color: $important-color;
}

...

class-2 > span {
    color: $important-color;
}

Поэтому, вероятно, вам следует определить одну из этих констант в файле SCSS выше по иерархии (например, например, app.scss, если это переменная всего приложения) и использовать эту переменную в ваших компонентах. Пожалуйста, не забудьте прочитать ответ Aloke, а также для более глубокого анализа.

Всегда используйте поиск и обязательно включайте свой код при задании вопросов, связанных с кодом (используйте веб-сайты, такие как JSFiddle , чтобы упростить задачу).

3
ogabrielp

Я думаю, что вам нужен файл .scss, в который вы помещаете все свои собственные цветовые переменные и используете их для общего CSSclass, который будет применяться во всех ваших приложениях.

Тогда вам нужно сделать это.

  1. Использует файл theme.scss, который содержит текущую тему материала/динамические темы scss

@import '[email protected]/material/theming';
@import './mytheme-sidemenu.scss';

// Primary theme
@include mat-core();
$mytheme-app-primary: mat-palette($mat-deep-purple, 700, 600);
$mytheme-app-accent: mat-palette($mat-red, A200, 900, A100);
$mytheme-app-warn: mat-palette($mat-deep-orange);
$mytheme-app-theme: mat-light-theme($mytheme-app-primary, $mytheme-app-accent, $mytheme-app-warn);
@include angular-material-theme($mytheme-app-theme);
// Secondary Theme
.mytheme-alt-theme {
    $mytheme-alt-primary: mat-palette($mat-teal, 500);
    $mytheme-alt-accent: mat-palette($mat-orange, 500);
    $mytheme-alt-warn: mat-palette($mat-red);
    $mytheme-alt-theme: mat-light-theme($mytheme-alt-primary, $mytheme-alt-accent, $mytheme-alt-warn);
    @include angular-material-theme($mytheme-alt-theme);
}

.mytheme-another-alt-theme{
   $mytheme-another-alt-primary: mat-palette($mat-blue, 500);
    $mytheme-another-alt-accent: mat-palette($mat-yellow, 500);
    $mytheme-another-alt-warn: mat-palette($mat-green);
    $mytheme-another-alt-theme: mat-light-theme($mytheme-another-alt-primary, $mytheme-another-alt-accent, $mytheme-another-alt-warn);
    @include angular-material-theme($mytheme-another-alt-theme);
}
// Using the $theme variable from the pre-built theme you can call the theming function
@include mytheme-sidemenu($mytheme-app-theme);
  1. Использует отдельный файл scss для хранения вашего собственного класса CSS

// Import all the tools needed to customize the theme and extract parts of it
@import "[email protected]/material/theming";
// Define a mixin that accepts a theme and outputs the color styles for the component.
@mixin mytheme-sidemenu($theme) {
  // Extract whichever individual palettes you need from the theme.
  $primary: map-get($theme, primary);
  $accent: map-get(
    $theme,
    accent
  ); // Use mat-color to extract individual colors from a palette as necessary.

  .col-primary {
    color: mat-color($primary, 500) !important;
  }
  .col-accent {
    color: mat-color($accent, 300) !important;
  }
}
  1. Теперь вы можете использовать свои собственные классы CSS над приложением и не забудьте поместить ссылку на файл scss в ваш angular.json/angular-cli.json

You can also use this classes too:
.col-primary {
    & .hue {
      &-50 {
        color: mat-color($primary, 50) !important;
      }
      &-100 {
        color: mat-color($primary, 100) !important;
      }
      .
      .
      .
     &-800 {
        color: mat-color($primary, 800) !important;
      }
    }
 }

Также вы можете увидеть запущенный пример этого кода здесь

2
AlokeT

Почему бы не использовать Angular Material Theming встроенные функции?

Таким образом, вам нужно только создать собственную цветовую палитру и привязать ее к основной/accent/warn color (или использовать предопределенную тему) с небольшим количеством scss (для настройки основных цветов)

Затем все остальное выполняется автоматически путем выбора хорошего цвета при использовании угловых компонентов материала:

<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="warn">Warn</button>

В ваших компонентах вы также можете легко использовать эти палитры при необходимости:

button {
    background-color: mat-color($accent);
}
1
Cétia

Если ваши темы имеют согласованные имена переменных цвета, вы можете использовать эти переменные.

Но используя javascript, вы можете получить цвет элемента, сохранить его в переменной и использовать в другом месте.

document.getElementById("element").style.backgroundColor
0
Saeed