Use the background color from $mdTheme

[lyschoening]

The md-data-table and md-data-table-toolbar components currently ignore the background color of the theme.

[brianfeister]

+1

[zack24q]

+1

[lengers]

+1

[trahloff]

+1

[trahloff]

Look at md-data-table/app/app.js. You will see these lines:

  .config(['$mdThemingProvider', function ($mdThemingProvider) {
    'use strict';

    $mdThemingProvider.theme('default')
      .primaryPalette('blue')
      .accentPalette('pink');
  }]);

You can adjust the used palette to your delight or erase those lines and your web app will use the theme that you provided at other parts of your code.

[Ziack]

+1

[Soren234]

+1

Adding dark() to $mdThemingProvider is ignored. *Edit Sorry added the right codepen. http://codepen.io/soren234/pen/GqwzJW?editors=1010

[wmichaelfeltman]

Um, no it's not and not in that codepen.

[1mike12]

The reason there's a lot of conflict is that including the stylsheet from md-data-table has hardcoded css color values, but not including it means we don't get any of the layout from it. Here's a scss override for dark backgrounds, it's not perfect but it's better than it was before.

$mdTableBorderColor: rgba(175, 175, 175, .22);
$activeBackground : #323232;
//for floating edit
md-edit-dialog>.md-content md-input-container input {
  color: #000;
}
table.md-table td.md-cell.md-placeholder {
  color: #777;
}
table.md-table td.md-cell md-select > .md-select-value > span.md-select-icon {
  color: #FFF;
}

table.md-table th.md-column {
  color: #FFF;
}

table.md-table th.md-column.md-active, table.md-table th.md-column.md-active md-icon {
  color: #FFF;
}

table.md-table td.md-cell {
  color: #FFF;
}

table.md-table.md-row-select tbody.md-body > tr.md-row:not([disabled]) td.md-cell {
  color: #FFF;
}

table.md-table.md-row-select tbody.md-body>tr.md-row:not([disabled]):hover {
  background-color: $activeBackground !important;
}

.md-table-pagination {
  color: #FFF;
}

table.md-table.md-row-select tbody.md-body>tr.md-row.md-selected {
  background-color: $activeBackground;
}

.md-table-pagination {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-flex-wrap: wrap-reverse;
  -ms-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
  box-sizing: border-box;
  padding: 0 24px;
  font-size: 12px;
  border-top: 1px $mdTableBorderColor solid;
}

table.md-table td.md-cell {
  font-size: 13px;
  border-top: 1px $mdTableBorderColor solid;
}

[vwillyams]

Created a PR which should resolve this (now that angular-material has added the $mdThemingProvider.registerStyles method): https://github.com/daniel-nagy/md-data-table/pull/607