如何使用Angular Material Design創建黑白主題？

我期待爲角度材料設計創建簡單的黑白主題。這方面的文件很少。如何使用Angular Material Design創建黑白主題？

我的目標是要做到這一點：

重音背景色爲白色
重音的文字顏色爲黑色
口音，錯誤，警告顏色稍後決定

我希望在配置塊中做這樣的事情：

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

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

有沒有簡單的方法來做到這一點？

來源

2015-12-03 Andrew Eisenberg

我相信你需要做的是創建黑色和白色的調色板。例如：

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

來源

2015-12-05 15:58:25

謝謝。這大致工作。有些事情我仍然不確定。主題鍵是什麼意思？我認識到它們對應於'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個小時。 –

此代碼可以幫助在MD-顏色採用黑白兩種顏色

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

來源

2017-11-15 11:26:57

如何使用Angular Material Design創建黑白主題？

回答

相關問題