web-dev-qa-db-ja.com

他の要素のマテリアル2テーマカラースキーム/パレットを取得する

私はアプリケーションを構築していますが、設定で変更できる一貫した配色を維持したいので、角度（2+）で材料（2）を使用しますが、直接しない要素で配色を取得する方法がわかりませんそれらをcolor="primary"で着色する機能を提供するので、Material 2テーマが使用するカラー/カラースキームを取得する方法を理解しようとすることになりました。そして、テーマが変更されたときに変更したい、たとえば、navbarはテーマの変更に適応します

<mat-toolbar color="primary" class="fixed-navbar mat-elevation-z10">

しかし、Material 2のグリッド要素は同じ引数をとらないため、ここに示すようにImは十分に近い色でスタイルを設定しようとするか、まったく一致しないようにします（テーマの変更に適応しません）。

enter image description here

ここにあるテーママットと色を一致させたい（そしてnavbar設定で選択されたオプションで変更される）

@import '~@angular/material/theming';

@include mat-core();



$candy-app-primary: mat-palette($mat-red);
$candy-app-accent:  mat-palette($mat-deep-orange, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);
$candy-app-theme: mat-dark-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
.default {
  @include angular-material-theme($candy-app-theme);
}
.light {
  $light-primary: mat-palette($mat-blue, 200,300, 900);
  $light-accent:  mat-palette($mat-light-blue, 600, 100, 800);
  $light-warn:    mat-palette($mat-red, 600);
  $light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn);
  @include angular-material-theme($light-theme);
}
@include angular-material-theme($candy-app-theme);
cssangularthemesangular-material
11
Cacoon

素晴らしい回避策を見つけました!!!!長い間これを実装する方法が私を悩ませていたので、私はこれを示すことにとても興奮しています。だからここに行きます。最初に、すべてのcssファイルをscssに変更します。

既存のプロジェクトの場合

  • コンソールで実行ng set defaults.styleExt=scss

  • 既存のすべての.cssファイルの名前を.scssに変更します

  • .angular-cli.jsonのstylesのファイル拡張子を.cssから.scssに手動で変更します
  • WebStorm Refactorなどのツールを使用して名前を変更しなかった場合、すべてのstyleUrlsを.cssから.scssに手動で変更します。

将来のプロジェクト用

  • 新しいプロジェクトの場合は、単にng new your-project-name --style=scssを使用します

  • すべての新しいプロジェクトでscssを使用するには、ng set defaults.styleExt=scss --globalを使用します

次のように、アプリのルートにtheme.scssファイルが必要になります。 where themes are

ここで、style.scssファイルに次を追加します（背景色を参照しているように見えますが、これをサイトのテーマに合わせて任意の要素に変更できます）。

[〜＃〜] edit [〜＃〜]：このカスタム@mixin要素をstyles.scssに配置する必要はありません。の*name*.component.scssをインポートし、指定した例と同じ方法でインポートしてインクルードしてください！

@import '~@angular/material/theming';

// Define a custom mixin that takes in the current theme
@mixin theme-color-grabber($theme) {
  // Parse the theme and create variables for each color in the pallete
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  // Create theme specfic styles
  .primaryColorBG {
    background-color: mat-color($primary);
  }
  .accentColorBG {
    background-color: mat-color($accent);
  }
  .warnColorBG {
    background-color: mat-color($warn);
  }
}

テーマのヘルプが必要な場合は、Material 2アイテムのテーマに使用するtheme.scssファイルに移動してください： Material 2 Github-テーマガイド

Theme.scssは/src/app/theme.scssフォルダーのルート内にあるため、theme.scssを開いてstyle.scssをインポートします。まず、/src/styles.scssグローバルスタイリングファイルを参照するためにこのフォルダーから移動する必要があります。

@import '../styles';

次に、作成した新しいカスタム@mixinを実際に含める必要があります[〜＃〜] all [〜＃〜]テーマ（あなたが私のような複数のそのため、現在選択されているテーマに応じて色が変わります）。

次のように、実際の角材テーマインクルードの上にそれを含めます：

@include theme-color-grabber($theme);
@include angular-material-theme($theme);

私のようなテーマがある場合は、次のように同じ位置に追加します。

.light {
  $light-primary: mat-palette($mat-blue, 200,300, 900);
  $light-accent:  mat-palette($mat-light-blue, 600, 100, 800);
  $light-warn:    mat-palette($mat-red, 600);
  $light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn);
  @include theme-color-grabber($light-theme);
  @include angular-material-theme($light-theme);

}

theme-color-grabberをインクルードの上に追加したことがわかります。テーマの色を取得することが主な目的であるため、実際のテーマの上または下のどちらでもかまいません。

私のthemes.scss全体は次のようになります。

@import '~@angular/material/theming';
//We import our custom scss component here
@import '../styles';

@include mat-core();

$theme-primary: mat-palette($mat-red);
$theme-accent:  mat-palette($mat-deep-orange, A200, A100, A400);
$theme-warn:    mat-palette($mat-red);
$theme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn);
//
@include theme-color-grabber($theme);
@include angular-material-theme($theme);
.light {
  $light-primary: mat-palette($mat-blue, 200,300, 900);
  $light-accent:  mat-palette($mat-light-blue, 600, 100, 800);
  $light-warn:    mat-palette($mat-red, 600);
  $light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn);
  @include theme-color-grabber($light-theme);
  @include angular-material-theme($light-theme);

}

そして最後に、どこでも背景のテーマの色を呼び出すことができます！たとえば、mat-grid-tileに 'primary'色を指定します（mat-toolbarなどの他の要素のように、color = ''引数を取りません）クラスを次のように適切なクラス名に設定するだけです：

EDIT：各コンポーネントのscssファイルでは、テーマをそのコンポーネントに適用するためにimport '<path-to>/theme.scss'が必要になります。 theme.scssにstyles.scssをインポートしないでください。インポートループが作成されるためです。

<mat-grid-list cols="4" rows="4" rowHeight="100px">
  <mat-grid-tile
    colspan="4"
    rowspan="5"
  class="primaryColorBG">
    <div fxLayout="column" fxLayoutAlign="center center">
      <h1 class="title-font">Callum</h1>
      <h1 class="title-font">Tech</h1>
    </div>
    <p>
      Ambitious and ready to take on the world of Information Technology,<br>
      my love for programming and all things I.T. has not wavered since I first got access<br>
      to my fathers computer at age 9.
    </p>
  </mat-grid-tile>

</mat-grid-list>

最終的に、結果は次のようになります！：

赤いテーマがアクティブRed theme

青いテーマがアクティブenter image description here

23
Cacoon

個人的にcss4変数に入れて、インポートなしで使用できるようにします

background: var(--color-primary)

そして、これはcss4変数を設定する方法です

@import '~@angular/material/theming';
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$app-primary: mat-palette($mat-blue);
$app-accent:  mat-palette($mat-orange);
$app-warn:    mat-palette($mat-red);
$app-success: mat-palette($mat-light-green);

// Create the theme object (a Sass map containing all of the palettes).
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($app-theme);

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

:root {
  --color-primary: #{mat-color($app-primary)};
  --color-accent: #{mat-color($app-accent)};
  --color-warn: #{mat-color($app-warn)};
  --color-success: #{mat-color($app-success)};
}
0
Ced

  1. アプリケーションスタイルルールをSASSに設定します。
    ランタイムでカスタムコンポーネントテーマを更新するには@mixinを使用する必要があるため、アプリケーションスタイルルールは[〜＃〜] sass [〜＃〜]（CSSではありません）。 SASSでAngular-Cliを設定する方法については、こちらをご覧ください： https://scotch.io/tutorials/using-sass-with-the-angular-cli

  2. カスタムコンポーネントの@mixinを定義します。
    テーマの色を使用する各コンポーネントで、.scssファイルに@mixinを作成します。このコンポーネントでは、すべての色定義を抽出します。次のように、それらを@mixinに移動します。

// --- file: my-component_1.scss ---
@import '~@angular/material/theming'; // we need to add this so we could use Material functions
@mixin set-theme-component-1($theme)
{
  // Extract whichever individual palettes you need from the theme.
  $primary-palette: map-get($theme, primary);
  $accent-palette:  map-get($theme, accent);
  $warn-palette:    map-get($theme, warn);

  .component-container
  {
    background-color: mat-color($primary-palette); // use the mat-color function to extract the color from the palette
    border-color: mat-color($warn-palette);
  }
}

// Style rules that aren't theme/color related (size, font, etc)
.component-container
{
  width: 100%;
  ...
}
  1. テーマファイルを定義します。
    テーマファイルを定義して（まだ定義していない場合）、このファイルで定義した@mixinsを次のように呼び出す必要があります。
// --- file: app.theme.scss ---
@import '~@angular/material/theming';
@include mat-core(); // include this only once in your code!!!

// each custom component that uses theme colors will be imported here - we need there @mixin
@import './some-path/some-folder/my-component_1'; // no need to specify .scss suffix

@mixin set-theme($theme) // define a new @mixin that will be invoked each time the theme is changed
{
  @include set-theme-component-1($theme); // invoke the mixin we defined for component_1
  // repeat this for each component that uses theme colors
}

// define your themes:
.theme-light
{
  $light-primary: mat-palette($mat-Indigo);
  $light-accent:  mat-palette($mat-pink, A200, A100, A400);
  $light-warn:    mat-palette($mat-red);
  $light-theme:   mat-light-theme($light-primary, $light-accent, $light-warn);

  @include angular-material-theme($light-theme);
  @include set-theme($light-theme); // once the theme was set, invoke the mixin
}

.theme-dark
{
  $dark-primary:  mat-palette($mat-teal, A400);
  $dark-accent:   mat-palette($mat-grey, 800);
  $dark-warn:     mat-palette($mat-red, 700);
  $dark-theme:    mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

  @include angular-material-theme($dark-theme);
  @include set-theme($dark-theme); // once the theme was set, invoke the mixin
}

それは:-)

これらは、ライブテーマを機能させるために実装する必要があるいくつかの追加手順です（これらはカスタムコンポーネントとは関係がないため、すぐにスローします）。
-現在のテーマを保存するThemeServiceを作成します。このサービスは、OverlayContainerを更新する必要があります（Angularマテリアルは、ポップアップやドロップダウンリストなどのモーダルの背景にこのコンテナを使用します）。
-DOMのルート要素の1つにテーマクラス（theme-darkまたはその他）を追加します。
-クラスmat-app-backgroundをDOMのルート要素の1つに追加します。これにより、テーマに応じて背景色とフォント色が変更されます。
-より良いソフトウェア設計のために-テーマがたくさんある場合、テーマファイルを分割することはメンテナンスネズミイルカにとって良いアイデアかもしれません。

ここから読み続けることができます： https://material.angular.io/guide/theming

またはGithubプロジェクトを参照してください： https://github.com/angular/material2/blob/master/src/lib/core/theming/_theming.scss

0
Gil Epshtain

私は絶対に初心者であり、これはグッドプラクティスから外れており、この場合は役に立たないか、リソースを消費するソリューションかもしれませんが、myangularthemefile.scssでこれらのクラスを作成しました：

@import '~@angular/material/theming';
@include mat-core();

...

.matcolorprimary{
    color: mat-color($mitjans-primary)
}

.matcoloraccent {
    color: mat-color($mitjans-accent);
}

.matcolorwarn {
    color: mat-color($mitjans-warn);
}

そして、コンポーネントのテンプレートで必要なHTML要素にそれらを追加します。

背景色に同じ構造を作成するのは簡単だと思います...

これは、小さなプロジェクトのすべてのシャドウdomコンポーネントのスタイルシートにsassアーティファクトを含める代わりになりますか？

0
Josep Alacid