daniel-nagy · vwillyams · Jul 25, 2017 · Jul 25, 2017 · Jul 25, 2017 · Jul 25, 2017
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,18 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# Set default charset
+[*.{js}]
+charset = utf-8
+
+# Indentation override
+[**.{js,html}]
+indent_style = space
+indent_size = 2
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,7 @@
 # generated files
 app/app.css
 .temp
+.idea/
 
 # folders
 bower_components

diff --git a/Gruntfile.js b/Gruntfile.js
@@ -60,7 +60,7 @@ module.exports = function (grunt) {
       },
       build: {
         files: {
-          'dist/md-data-table.js': ['.temp/templates.js', 'src/**/*.js']
+          'dist/md-data-table.js': ['.temp/templates.js', '.temp/md-theme.min.css.js', 'src/**/*.js']
         }
       }
     },
@@ -82,10 +82,17 @@ module.exports = function (grunt) {
     cssmin: {
       build: {
         files: {
-          'dist/md-data-table.min.css': 'dist/md-data-table.css'
+          'dist/md-data-table.min.css': 'dist/md-data-table.css',
+          '.temp/md-theme.min.css' : '.temp/md-theme.css'
         }
       }
     },
+
+    str2js: {
+      mdDataTableThemeOverrides: {
+        '.temp/md-theme.min.css.js': ['.temp/md-theme.min.css']
+      }
+    },
 
     // convert templates to javascript and load them into
     // the template cache
@@ -126,7 +133,8 @@ module.exports = function (grunt) {
       },
       build: {
         files: {
-          'dist/md-data-table.css': 'src/styles/md-table.less'
+          'dist/md-data-table.css': 'src/styles/md-table.less',
+          '.temp/md-theme.css': 'src/styles/md-table.theme.less'
         }
       }
     },
@@ -191,6 +199,7 @@ module.exports = function (grunt) {
     'less:build',
     'autoprefixer:build',
     'cssmin:build',
+    'str2js:mdDataTableThemeOverrides',
     'html2js:build',
     'concat:build',
     'uglify:build'

diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ This software is provided free of charge and without restriction under the [MIT
 
 A live [demo](http://danielnagy.me/md-data-table).
 
-A fork-able [Codepen](http://codepen.io/anon/pen/BjvLVJ?editors=1010). Please use this to reproduce any issues you may be experiencing.
+A fork-able [Codepen](https://codepen.io/vwillyams/pen/KvdYjZ). Please use this to reproduce any issues you may be experiencing.
 
 ## Installation
 

diff --git a/app/app.js b/app/app.js
@@ -1,9 +1,14 @@
-angular.module('nutritionApp', ['md.data.table', 'ngMaterial'])
+angular.module('nutritionApp', ['md.data.table', 'ngMaterial']
+).config(['$mdThemingProvider', function ($mdThemingProvider) {
+  'use strict';
 
-  .config(['$mdThemingProvider', function ($mdThemingProvider) {
-    'use strict';
-
-    $mdThemingProvider.theme('default')
+  $mdThemingProvider.theme('default')
       .primaryPalette('blue')
       .accentPalette('pink');
-  }]);
+
+  $mdThemingProvider.theme('alternate')
+      .primaryPalette('green')
+      .accentPalette('blue-grey')
+      .backgroundPalette('orange')
+      .dark();
+}]);
diff --git a/app/index.html b/app/index.html
@@ -16,15 +16,16 @@
 
   </head>
 
-  <body layout="column">
+  <body layout="column" ng-controller="nutritionController" md-theme="{{currentTheme}}" md-theme-watch>
 
     <md-toolbar>
-      <div class="md-toolbar-tools">
+      <div class="md-toolbar-tools" layout="row" layout-align="space-between center">
         <div class="md-title">Material Design Data Table</div>
+        <md-button ng-click="switchTheme()">Switch theme!</md-button>
       </div>
     </md-toolbar>
 
-    <md-content laout="column" flex ng-controller="nutritionController">
+    <md-content flex>
 
       <md-card>
         <div layout="row" layout-wrap class="checkboxes">
@@ -43,14 +44,14 @@
 
     </md-content>
 
-    <script type="text/javascript" src="angular/angular.min.js"></script>
-    <script type="text/javascript" src="angular-animate/angular-animate.min.js"></script>
-    <script type="text/javascript" src="angular-aria/angular-aria.min.js"></script>
-    <script type="text/javascript" src="angular-material/angular-material.min.js"></script>
+    <script type="text/javascript" src="angular/angular.js"></script>
+    <script type="text/javascript" src="angular-animate/angular-animate.js"></script>
+    <script type="text/javascript" src="angular-aria/angular-aria.js"></script>
+    <script type="text/javascript" src="angular-material/angular-material.js"></script>
     <script type="text/javascript" src="md-data-table.js"></script>
 
     <script type="text/javascript" src="app.js"></script>
     <script type="text/javascript" src="scripts/nutritionController.js"></script>
 
   </body>
-</html>
+</html>
diff --git a/app/scripts/nutritionController.js b/app/scripts/nutritionController.js
@@ -1,6 +1,11 @@
-angular.module('nutritionApp').controller('nutritionController', ['$http', '$mdEditDialog', '$q', '$timeout', '$scope', function ($http, $mdEditDialog, $q, $timeout, $scope) {
+angular.module('nutritionApp').controller('nutritionController', ['$http', '$mdEditDialog', '$q', '$timeout', '$scope', '$element', function ($http, $mdEditDialog, $q, $timeout, $scope) {
   'use strict';
 
+  $scope.currentTheme = 'default';
+  $scope.switchTheme = function() {
+    $scope.currentTheme = $scope.currentTheme === 'default' ? 'alternate' : 'default';
+  };
+
   $scope.options = {
     rowSelection: true,
     multiSelect: true,
@@ -125,7 +130,8 @@ angular.module('nutritionApp').controller('nutritionController', ['$http', '$mdE
       title: 'Add a comment',
       validators: {
         'md-maxlength': 30
-      }
+      },
+      mdTheme: $scope.currentTheme
     };
 
     var promise = $scope.options.largeEditDialog ? $mdEditDialog.large(dialog) : $mdEditDialog.small(dialog);
@@ -180,4 +186,4 @@ angular.module('nutritionApp').controller('nutritionController', ['$http', '$mdE
     }, 2000);
   };
 
-}]);
+}]);
diff --git a/app/styles/app.less b/app/styles/app.less
@@ -39,10 +39,7 @@ md-card:first-child {
 }
 
 md-toolbar.md-table-toolbar.alternate {
-  color: #1e88e5;
-  background-color: #e3f2fd;
-
   .md-toolbar-tools {
     font-size: 16px;
   }
-}
+}
diff --git a/app/templates/nutrition-table.html b/app/templates/nutrition-table.html
@@ -24,7 +24,7 @@
   </div>
 </md-toolbar>
 
-<md-table-container>
+<md-table-container md-theme="{{current}}" md-theme-watch>
   <table data-md-table data-md-row-select="options.rowSelection" multiple="{{options.multiSelect}}" data-ng-model="selected" md-progress="promise">
     <!-- <thead md-head md-order="query.order">
       <tr md-row>
@@ -74,4 +74,4 @@
   </table>
 </md-table-container>
 
-<data-md-table-pagination md-limit="query.limit" md-limit-options="limitOptions" md-page="query.page" md-total="{{desserts.count}}" md-on-paginate="onPaginate" md-page-select="options.pageSelect" md-boundary-links="options.boundaryLinks"></data-md-table-pagination>
+<data-md-table-pagination md-limit="query.limit" md-limit-options="limitOptions" md-page="query.page" md-total="{{desserts.count}}" md-on-paginate="onPaginate" md-page-select="options.pageSelect" md-boundary-links="options.boundaryLinks"></data-md-table-pagination>
diff --git a/bower.json b/bower.json
@@ -30,6 +30,9 @@
   ],
   "dependencies": {
     "angular": "^1.4.0",
-    "angular-material": "^1.0.0"
+    "angular-material": "^1.1.0"
+  },
+  "resolutions": {
+    "angular": "1.4.0"
   }
 }