如何使用 Angular Material Design 创建黑白主题？答案

【问题标题】：How do I create a black and white theme with Angular Material Design?如何使用 Angular Material Design 创建黑白主题？
【发布时间】：2016-03-08 02:55:15
【问题描述】：

我希望为 Angular Material Design 创建一个简单的黑白主题。这方面的文档很少。

我的目标是这样做：

非重音背景颜色为白色
非重音文本颜色为黑色
口音、错误、警告颜色稍后决定

我希望在配置块中做这样的事情：

$mdThemingProvider.theme('default')
  .primaryPalette('black')
  .backgroundPalette('white');

但是，白色和黑色调色板不存在。

有没有简单的方法来做到这一点？

【问题讨论】：

标签： angularjs material-design angular-material

【解决方案1】：

黑色：

$custom-primary: mat-palette($mat-grey, 900, 900, 900);

【讨论】：

【解决方案2】：

此代码可能有助于在 md-colors 中使用白色和黑色

<!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>

【讨论】：

【解决方案3】：

我相信您需要做的是为黑色和白色创建调色板。例如：

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');
});

当然，您可以充实每个调色板的其余部分。这里需要注意的是，“对比度默认颜色”对于在每种情况下都正确设置文本颜色很重要。此外，不幸的是，您似乎确实需要定义整个调色板。如果您不想创建全新的调色板，另一种选择是扩展现有的调色板：

var blackPalette = $mdThemingProvider.extendPalette('grey', { '500': '000000' });
$mdThemingProvider.definePalette('black', blackPalette);

https://material.angularjs.org/latest/Theming/03_configuring_a_theme

【讨论】：

谢谢。这大致有效。有些事情我仍然不确定。主题键是什么意思？我知道它们对应于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 用于主要和警告（默认为 500，然后 md-hue-1 为 300，等等）。所以它增加了一个间接级别，这样同一个调色板就可以在多个主题中以不同的方式使用，而无需调整调色板本身。
这一切都说得通。在我看来，这个 API 针对具有复杂用例的高级用户而不是基本用户。至少，包含更多示例的更明确的文档会有所帮助。我会给你赏金，但需要等待 12 小时。