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

Question

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

我的目标是：

未强调的背景颜色为白色
无重音文字颜色为黑色
重音、错误、警告颜色稍后决定

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

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

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

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

Answer 1

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

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

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

Answer 3

对于黑色：

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

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

How do I create a black and white theme with Angular Material Design?

angularjs

material-design

angular-material