Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Themes in Angular Material

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 760
    Comment on it

    Theming allows you to change color of complete application from one place. In Angular Material , themes can be configured using $mdThemingProvider in application configuration. 

     

    Important terms used in Theming

     

    1. Hues/ Shades
    It is a single color within a palette

     

    2. Palettes
    Palette is a collection of hues/shades. Valid palettes include:
    red , pink ,purple , deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, grey, blue-grey

     

    3. Color Intentions
    Color intention is a mapping of a palette .Valid color intention are:
    primary, accent, warn

     

    4. Themes
    A theme is a configuration of palettes used for specific color intentions.

     

    Classes used for theming:
    md-button
    md-checkbox
    md-progress-circular
    md-progress-linear
    md-radio-button
    md-slider
    md-switch
    md-tabs
    md-input-container
    md-toolbar

     

    Configuring theme:

    Theme is configured by using $mdThemingProvider. We can give color palette for each of the configuration method.
    We can set a color for theme.primaryPalette, theme.accentPalette, theme.warnPalette, theme.backgroundPalette
    as given below:

    angular.module('myApp', ['ngMaterial'])
    .config(function($mdThemingProvider) {
      $mdThemingProvider.theme('default')
          .primaryPalette('blue')
           .accentPalette('light-blue')
           .warnPalette('cyan')
           .backgroundPalette('purple');
    	
       $mdThemingProvider.alwaysWatchTheme(true);  
    });
    

     

    Disable theme:

    We can disable theme by calling method disableTheming() as given below:

    angular.module('myApp', ['ngMaterial'])
    .config(function($mdThemingProvider) {
      $mdThemingProvider.disableTheming();
    });

     

    Example of theme:

    
    <link href="~/Content/angular-material.min.css" rel="stylesheet" />
    <body ng-app="myApp">
        <div ng-controller="themeController as crtl" md-theme="{{theme}}" md-theme-watch="true">
            <md-input-container>
                <label>Change theme</label>
                <md-select ng-model="selectedTheme" ng-change="changeTheme()">
                    <md-option ng-value="theme" ng-repeat="theme in themes">{{ theme.name }}</md-option>
                </md-select>
            </md-input-container>
    
            <div>
                <md-button href="#" class="md-raised md-primary">
                    Primary
                </md-button>
                <md-button href="#" class="md-raised md-accent">
                    Accent
                </md-button>
                <md-button href="#" class="md-raised md-warn">
                    Warn
                </md-button>
                <md-button href="#" class="md-raised md-background">
                    Background
                </md-button>
            </div>
        </div>
    </body>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/angular-animate.min.js"></script>
    <script src="~/Scripts/angular-aria.js"></script>
    <script src="~/Scripts/angular-messages.min.js"></script>
    <script src="~/Scripts/angular-material/angular-material.min.js"></script>
    <script>
        (function () {
            var app = angular.module('myApp', ['ngMaterial'])
                .controller('themeController', themeController)
            .config(function ($mdThemingProvider) {
                $mdThemingProvider.theme('themeRed')
                  .primaryPalette('red')
                  .accentPalette('pink')
                .warnPalette('purple')
                .backgroundPalette('orange');
    
                $mdThemingProvider.theme('themeGreen')
                  .primaryPalette('green')
                  .accentPalette('light-green')
                  .warnPalette('lime')
                .backgroundPalette('teal');
    
                $mdThemingProvider.theme('themeBlue')
                .primaryPalette('blue')
                .accentPalette('light-blue')
                .warnPalette('cyan')
              .backgroundPalette('purple');
    
                //  to cascade down the changes through the DOM.
                $mdThemingProvider.alwaysWatchTheme(true);
    
            })
    
            function themeController($scope) {
                $scope.themes = [
               { name: 'Theme Red', value: 'themeRed' },
               { name: 'Theme Green', value: 'themeGreen' },
                { name: 'Theme Blue', value: 'themeBlue' },
                ];
    
                $scope.selectedTheme = { name: 'Theme Red', value: 'themeRed' };
    
                $scope.changeTheme = function () {
                    $scope.theme = $scope.selectedTheme.value;
                };
    
    
            }
    
        })();
    </script>

     

    OUTPUT:

     

    Hope this example will help you. Thanks

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: