angular 4カスタムテーマ

私はアンゲラ4とアンガル材質が新です。現在、アンギュラ4を使用しており、カスタムテーマを作成しようとしています。カスタムtheme.scssファイルを作成するとき、私たちは主、アクセントに色を割り当てると、次のように警告するために変数を使用している、angular 4カスタムテーマ

$my-app-primary: mat-palette($mat-light-orange); 
$my-app-accent: mat-palette($mat-white); 
$my-app-warn: mat-palette($mat-red);

私は方法を理解することはできませんので、私は、このmat-palette($mat-light-orange);について少し混乱していますプライマリ、アクセント、警告色に変数を割り当てます。 mat-paletteの意味は何ですか？カスタムカラーを割り当てるにはどうすればいいですか？

これはcustom-theme.scssで使用したコードですが、動作しません。

@import '[email protected]/material/theming'; 
@include mat-core(); 
$mat-light-orange:#fbab4a; 
$mat-white:#ffffff; 
$mat-red:#e95337; 
$my-app-primary: mat-palette($mat-light-orange); 
$my-app-accent: mat-palette($mat-white); 
$my-app-warn: mat-palette($mat-red); 
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn); 
@include angular-material-theme($my-app-theme);

出典

2017-08-22 M_TAM

Angular CLIを使用していますか？もしそうなら、 'custom-theme.scss'を' angular-cli.json'の 'styles'配列プロパティに含めましたか？そうでない場合は、このscssファイルをcssにコンパイルして、 'index.html'などに含めてください。 –

はいAngular CLIを使用していますが、angle-cli.jsonファイルには、「スタイル」のように既に含まれています：[ "styles.scss"、 "custom-theme.scss" ] –

これは、 '$ mat-light-orange'のような値が' mat-pallete（） 'に渡されていることを意味しています。 Angular Materialソースファイルには、あらかじめ定義されたパレット変数があります。詳細については私の答えを見てください。 –

あなたがAngular CLIを使用している場合は、ビルドプロセスは、あなたのアプリケーションでこのカスタムテーマを含んでいることを確認するために、ファイル.angular-cli.jsonのstyles配列プロパティでこのファイルをインクルードする必要があると思います。

... 
"tsconfig": "tsconfig.app.json", 
"testTsconfig": "tsconfig.spec.json", 
"prefix": "app", 
"styles": [ 
    "styles.css", 
    "custom-theme.scss" 
], 
"scripts": [], 
"environmentSource": "environments/environment.ts", 
"environments": { 
    "dev": "environments/environment.ts", 
    "prod": "environments/environment.prod.ts" 
} 
...

あなたが角度CLIを使用していない場合は、ビルドプロセスのやCSSにSCSSをコンパイルするなどnode-sassなど最低限のツールでいくつかの並べ替えを使用する必要があるだろう。コンパイルされたら、index.htmlのようなもので、ファイルにリンクする必要があります。ただ、SCSSファイルを作成

が

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Foobar</title> 
    <base href="/"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 

    <link href="path/to/compiled/assets/custom-theme.css"> 

    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
</head> 
<body> 
    <app-root></app-root> 
</body> 
</html>

可能性は十分ではありません。これは、SCSSスタイルファイルなどのアセットを検出および処理するために使用しているビルドプロセスによって異なります。例えば$mat-indigoとして色用SCSS変数に関しては

は、これらはsource内_palette.scssに見出され、Material Design Colorsの色に結びつけること。これらの変数は、必要に応じてカスタムテーマSCSSファイル内でデザインに使用できます。だからあなたが参照しようとしている色は$mat-light-orangeで、有効な/既存のパレットではありません/あなたが期待どおりに出てこないかもしれません。代わりに、$mat-orangeなどの既存のパレットをターゲットにし、A200などの特定の色をターゲットにするためにオプションのパラメータを使用して、カラーコード#FF9100に出力します。 mat-pallete()とmat-light-theme()は、カラーパレットなどの入力を受け取り、テーマCSSを生成/コンパイルする角度素材sourceのカスタムSass関数です。

$my-app-accent: mat-palette($mat-orange, A200);

うまくいけば、それが役立ちます！

出典

2017-08-22 19:56:58

ありがとうございます、それは働いています。私は色を割り当てるときに問題があったと思う。 –

あなた.angular-cli.jsonファイルにテーマを挿入することができます。

@import 'custom-theme.scss';

のマットの意味は何ですか：別の方法として、あなたのグローバルstyles.scssファイルにインポートすることができ

"styles": [ "styles.scss", "custom-theme.scss" ]

パレット

mat-paletteは、アプリケーションのカラーパレットを生成するミックスインです。それは、マテリアルコンポーネントに必要なテキスト、背景などの色を生成します。あなたがしなければならないのは、ミックスインの引数としていくつかのを挿入することです：

$app-primary: mat-palette($mat-indigo, 800, 300, 900); 
$app-accent: mat-palette($mat-light-blue); 
$app-warn: mat-palette($mat-deep-orange, A200);

カラー変数の後ろに番号が（例えば$マット藍、800、300、900）のデフォルトを指定し、軽量化とあなたのカラーパレットのより暗いコントラスト。

私はこれがあなたの役に立てば幸い！

出典

2017-08-22 21:00:45

答えて

関連する問題