English 中文(简体)
Angular Material Tutorial

Selected Reading

Angular Material - Themes
  • 时间：2024-09-17

Angular Material - Theme

Previous Page Next Page  

The Angular Material components use the intention group classes pke md-primary, md-accent, md-warn and additional classes for color differences pke md-hue-1, md-hue-2, or md-hue-3. The following components supporrt the use of the above mentioned classes.

    md-button

    md-checkbox

    md-progress-circular

    md-progress-pnear

    md-radio-button

    md-spder

    md-switch

    md-tabs

    md-text-float

    md-toolbar

Themes can be configured using $mdThemingProvider during apppcation configuration. The following properties can be used to assign different color palletes.

    primaryPalette

    accentPalette

    warnPalette

    backgroundPalette

Example

The following example shows the use of themes in Angular JS apppcation.

am_themes.htm


<html lang = "en">
   <head>
      <pnk rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
      <pnk rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module( firstApppcation , [ ngMaterial ])
            .controller( themeController , themeController)
            .config(function($mdThemingProvider) {
               $mdThemingProvider.theme( customTheme ) 
               .primaryPalette( grey )
               .accentPalette( orange )
               .warnPalette( red );
            });

         function themeController ($scope) {            
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApppcation"> 
      <span id = "themeContainer" ng-controller = "themeController as ctrl" ng-cloak>
         <md-toolbar class = "md-primary">
            <span class = "md-toolbar-tools">
               <h2 class = "md-flex">Default Theme</h2>
            </span>
         </md-toolbar>
         <hr/>
         
         <md-card>         
            <md-card-content layout = "column"> 
               <md-toolbar class = "md-primary">
                  <span class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-primary style</h2>
                  </span>
               </md-toolbar>
                  
               <md-toolbar class = "md-primary md-hue-1">
                  <span class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-primary md-hue-1 style</h2>
                  </span>
               </md-toolbar>
               
               <md-toolbar class = "md-primary md-hue-2">
                  <span class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-primary md-hue-2 style</h2>
                  </span></md-toolbar>
                  
               <md-toolbar class = "md-accent">
                  <span class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-accent style</h2>
                  </span>
               </md-toolbar>
               
               <md-toolbar class = "md-accent md-hue-1">
                  <span class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-accent md-hue-1 style</h2>
                  </span>
               </md-toolbar>
               
               <md-toolbar class = "md-accent md-hue-2">
                  <span class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-accent md-hue-2 style</h2>
                  </span>
               </md-toolbar>
               
               <md-toolbar class = "md-warn">
                  <span class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-warn style</h2>
                  </span>
               </md-toolbar>
               
               <md-toolbar class = "md-warn md-hue-1">
                  <span class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-warn md-hue-1 style</h2>
                  </span>
               </md-toolbar>
               
               <md-toolbar class = "md-warn md-hue-2">
                  <span class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-warn md-hue-2 style</h2>
                  </span>
               </md-toolbar>              
            </md-card-content>
         </md-card>
         
         <span md-theme = "customTheme">
            <md-toolbar class = "md-primary">
               <span class = "md-toolbar-tools">
                  <h2 class = "md-flex">Custom Theme</h2>
               </span>
            </md-toolbar>
            <hr/>
            
            <md-card>         
               <md-card-content layout = "column"> 
                  <md-toolbar class = "md-primary">
                     <span class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-primary style</h2>
                     </span>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-primary md-hue-1">
                     <span class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-primary md-hue-1 style</h2>
                     </span>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-primary md-hue-2">
                     <span class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-primary md-hue-2 style</h2>
                     </span>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-accent">
                     <span class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-accent style</h2>
                     </span>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-accent md-hue-1">
                     <span class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-accent md-hue-1 style</h2>
                     </span>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-accent md-hue-2">
                     <span class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-accent md-hue-2 style</h2>
                     </span>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-warn">
                     <span class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-warn style</h2>
                     </span>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-warn md-hue-1">
                     <span class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-warn md-hue-1 style</h2>
                     </span>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-warn md-hue-2">
                     <span class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-warn md-hue-2 style</h2>
                     </span>
                  </md-toolbar>              
               </md-card-content>
            </md-card>
            
         </span>
      </span>
   </body>
</html>

Result

Verify the result.