All geek questions in one place

How to create a black and white theme using Angular Material Design?

I want to create a simple black and white theme for Angular Material Design. The documentation in this area is sparse.

My goal is to do this:

  • The colorless background color is white.
  • Text black colorless
  • Accents, errors, colors of warnings will be determined later.

I was hoping to do something like this in the configuration block:

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

But white and black palettes do not exist.

Is there an easy way to do this?

+5
source share
2 answers

I believe that you will need to make palettes both for black and white. For instance:

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

Naturally, you can display the rest of each palette. It should be noted that "contrastDefaultColor" is essential for the correct color of the text in each case. In addition, unfortunately, it seems that you need to define the entire color palette. Another option, if you do not want to create completely new palettes, is to expand the existing palette:

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

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

+14
source

This code can help to use white and black colors in 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>
0
source

Source: https://habr.com/ru/post/1237333/

More articles:


All Articles