5

$mdThemingProviderカスタム パレットを使用して、サイトのすべてのボタンを普遍的に構成したいと考えています。ボタンの背景色は、構成A200とA700パレットで操作できます。デフォルトのテキストの色も変更したいと思います。contrastDefaultColor、contrastLightColors、および でジグザグしましcontrastDarkColorsたが、私ができる最善のことは、黒または白のテキストを取得することです。

次のスニピットは、暗いテキストの白いボタンを生成します。

var lightGrey = $mdThemingProvider.extendPalette('grey', {
  'A200': '#fefefe', // Element background color (default)
  'A700': '#fefefe', // Element hover background color (default)
  'contrastDefaultColor': 'dark',
  'contrastLightColors': '600 700 800 900'
});
$mdThemingProvider.definePalette('light-grey', lightGrey);

$mdThemingProvider.theme('default')
  // Accent palette controls buttons, links, etc
  .accentPalette('light-grey');

"light" に変更contrastDefaultColorすると、テキストが白くなります。

生成されたスタイルシートのルールをオーバーライドすることで、必要な効果を手動で実現できます。

.md-button.md-default-theme.md-fab {
  color: #bdc3c7;
}

...しかし、ライブラリで提供されているツールを使用しようとしています。

4

1 に答える 1

1

なぜこの問題に直面しているのかわかりませんが、A200 と A700 に与えたい色を与えることで問題が解決します。このような：

var lightGrey = $mdThemingProvider.extendPalette('grey', {
  'A200': '#bdc3c7', // Element background color (default)
  'A700': '#bdc3c7', // Element hover background color (default)
  'contrastDefaultColor': 'dark',
  'contrastLightColors': ['600', '700', '800', '900']
});

注: コントラスト パレットを配列形式で与えるようにしてください。

また、別の問題に直面している場合は、更新してください。または、このリンクを参照してください。

于 2015-05-25T14:00:05.513 に答える