オーバーライドテーマのテキストの色

Question

私の問題

私は私のカスタムテーマを設定し、それが正常に動作します。

しかし、私はオレンジ色のアクセントのボタンで黒い文字色を取得しますが、私は白い色をしたいです。 @material/theme/_variables.scssで

私のソリューション

私たちは、このようなコードがあります：上記のコードから

$mdc-theme-primary: #3f51b5 !default; /* Indigo 500 */ 
$mdc-theme-accent: #ff4081 !default; /* Pink A200 */ 
$mdc-theme-background: #fff !default; /* White */ 

/* Which set of text colors to use for each main theme color (light or dark) */ 
$mdc-theme-primary-tone: mdc-theme-light-or-dark($mdc-theme-primary); 
$mdc-theme-accent-tone: mdc-theme-light-or-dark($mdc-theme-accent); 
$mdc-theme-background-tone: mdc-theme-light-or-dark($mdc-theme-background); 

を、我々は、彼らがある場合は、最初の3つのparamsは、デフォルトとしてこれを使用することを意味している!defaultを持って見ることができますすでに宣言されていません。

そのため、カスタムカラーを指定することができます。

しかし、$mdc-theme-accent-toneのようなプロパティでは、計算された値を使用する必要があります。私は私のスタイル

$mdc-theme-accent-tone : "light" 

に

$mdc-theme-accent-tone: mdc-theme-light-or-dark($mdc-theme-accent) !default; 

とに上記のコード（MDCのソースコード）を変更した場合 それは正常に動作します。しかし、明らかにソースコードを変更することはできません。これを達成する方法。

Answer 1

これは材料設計仕様によるものです。だから、無効化の規定が間違っていると期待している。 しかし、すべての実用的な理由のために、彼らはこれを行うオーバーライドする：

@import "@material/theme/mdc-theme"; 

:root { 
    --mdc-theme-text-primary-on-accent: white; 
} 

がオーバーライドスタイルはMDC-テーマ

をインポートした後に記述する必要があります覚えておいてください