Question

我希望为Angular Material Design创建一个简单的黑白主题。该领域的文档很少。

我的目标是这样做：

非重音背景颜色为白色
非重音文字颜色为黑色
口音，错误，警告颜色将在稍后决定

我希望在配置块中执行类似的操作：

$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创建黑白主题？

3 个答案: