私は、Angular Material Design用のシンプルなモノクロテーマを作成しようとしています。ドキュメントはこの領域ではまばらです。アンギュラマテリアルデザインで白黒テーマを作成するにはどうすればよいですか？
私の目標は、これを行うことです。
I configブロックでこれを行うことを望んでいた：
$mdThemingProvider.theme('default')
.primaryPalette('black')
.backgroundPalette('white');
しかし、白と黒のパレットは存在しません。
これを行う簡単な方法はありますか？
私は黒と白の両方のためのパレットを作成する必要があると信じています。例：
angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
$mdThemingProvider.definePalette('black', {
'50': '000000',
'100': '000000',
'200': '000000',
'300': '000000',
'400': '000000',
'500': '000000',
'600': '000000',
'700': '000000',
'800': '000000',
'900': '000000',
'A100': '000000',
'A200': '000000',
'A400': '000000',
'A700': '000000',
'contrastDefaultColor': 'light'
});
$mdThemingProvider.definePalette('white', {
'50': 'ffffff',
'100': 'ffffff',
'200': 'ffffff',
'300': 'ffffff',
'400': 'ffffff',
'500': 'ffffff',
'600': 'ffffff',
'700': 'ffffff',
'800': 'ffffff',
'900': 'ffffff',
'A100': 'ffffff',
'A200': 'ffffff',
'A400': 'ffffff',
'A700': 'ffffff',
'contrastDefaultColor': 'dark'
});
$mdThemingProvider.theme('default')
.primaryPalette('black')
.backgroundPalette('white');
});
もちろん、各パレットの残りの部分を強調表示することができます。ここで注目すべき点は、それぞれの場合にテキストの色を正しく取得するために 'contrastDefaultColor'が重要であることです。また残念ながら、全体のカラーパレットを定義する必要があるようです。あなたは完全に新しいパレットを作成したくない場合は別のオプションは、既存のパレットを拡張することです：
var blackPalette = $mdThemingProvider.extendPalette('grey', { '500': '000000' });
$mdThemingProvider.definePalette('black', blackPalette);
https://material.angularjs.org/latest/Theming/03_configuring_a_theme
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak md-colors="::{'background': 'grey-400'}">
<!--Your HTML content here-->
<div flex layout="row">
<div flex layout="row" layout-padding md-colors="{'color':'white-50', 'background': 'black-500'}"
layout-align="center center">White text and Black background</div>
<div flex layout="row" layout-padding md-colors="{'color':'black-50', 'background': 'white-500'}"
layout-align="center center">Black text and White background</div>
</div>
<!--Your HTML content here-->
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script>
/**
* You must include the dependency on 'ngMaterial'
*/
var app = angular.module('BlankApp', ['ngMaterial']);
app.config(function($mdThemingProvider) {
$mdThemingProvider.definePalette('black', {
'50': '000000',
'100': '000000',
'200': '000000',
'300': '000000',
'400': '000000',
'500': '000000',
'600': '000000',
'700': '000000',
'800': '000000',
'900': '000000',
'A100': '000000',
'A200': '000000',
'A400': '000000',
'A700': '000000',
'contrastDefaultColor': 'light'
});
$mdThemingProvider.definePalette('white', {
'50': 'ffffff',
'100': 'ffffff',
'200': 'ffffff',
'300': 'ffffff',
'400': 'ffffff',
'500': 'ffffff',
'600': 'ffffff',
'700': 'ffffff',
'800': 'ffffff',
'900': 'ffffff',
'A100': 'ffffff',
'A200': 'ffffff',
'A400': 'ffffff',
'A700': 'ffffff',
'contrastDefaultColor': 'dark'
});
$mdThemingProvider.theme('default')
.primaryPalette('black')
.backgroundPalette('white');
});
</script>
</body>
</html>
ありがとうございます。これはおおまかに機能します。私がまだ確信していないことがいくつかあります。テーマキーはどういう意味ですか？私はそれらが 'md-hue-1'、' md-hue-2'に対応していることを認識していますが、なぜそれらのキーが使われているのか説明していません。 'md-hue-x'を' A700'などを使用するよりも明瞭に使用しないでしょうか？また、私はまだどの色相が使用されているかについては不明です。私のCSSが明示的に 'md-hue- *'クラスを使用していない場合は、どの色相が使用されていますか？ –
md-hue- *キーは、.md-hue- *クラスを追加することで使用できる色のバリエーション（A700など）を設定するためのもので、例えば '.md-primary .md-hue-1'はプライマリパレットのmd-hue-1に指定された色相。ドキュメントによると、デフォルトの色相設定は、500,300,800、A100 for primaryとwarn（デフォルトで500、次にmd-hue-1は300など）です。そのため、間接参照のレベルが追加され、パレット自体を調整することなく、複数のテーマで同じパレットを異なる方法で使用することができます。 –
これはすべて意味があります。このAPIは、基本ユーザーより複雑なユースケースを持つパワーユーザーをターゲットにしているようです。少なくとももっと明白な文書や例があれば助けになるでしょう。私は賞金を授与しますが、12時間待つ必要があります。 –