docs: better support for dark mode in docs and demos (#11381)

<!-- 
Filling out this template is required! Do not delete it when submitting a Pull Request! Without this information, your Pull Request may be auto-closed.
-->
## PR Checklist
Please check that your PR fulfills the following requirements:
- [x] The commit message follows [our guidelines](https://github.com/angular/material/blob/master/.github/CONTRIBUTING.md#-commit-message-format)
- [x] Tests for the changes have been added or this is not a bug fix / enhancement
- [x] Docs have been added, updated, or were not required

## PR Type
What kind of change does this PR introduce?
<!-- Please check the one that applies to this PR using "x". -->
```
[ ] Bugfix
[ ] Enhancement
[x] Documentation content changes
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Infrastructure changes
[ ] Other... Please describe:
```

## What is the current behavior?
Button, chips, whiteframe, and tabs demos are significantly broken in dark mode.
This makes testing theme or component changes in dark mode more difficult.
<!-- Please describe the current behavior that you are modifying and link to one or more relevant issues. -->
Issue Number: 
Relates to #11376

## What is the new behavior?
- better support for dark mode in docs and demos
- style anchors to be more readable in dark mode
- fix site-toolbar in dark mode and remove unused styles
- fix supported browsers table in dark mode
- fix button, chips, tabs, whiteframe demos in dark mode

## Does this PR introduce a breaking change?
```
[ ] Yes
[x] No
```
<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. -->
<!-- Note that breaking changes are highly unlikely to get merged to master unless the validation is clear and the use case is critical. -->

## Other information

Author: Splaktar

docs/app/css/style.css

@@ -75,6 +75,10 @@ a {
   text-decoration: none;
   font-weight: 400;
   transition: border-bottom 0.35s;
+  color: #1e88e5;
+}
+a:visited {
+  color: #7e57c2;
 }
 h1, h2, h3, h4, h5, h6 {
   margin-bottom: 1rem;
@@ -432,10 +436,6 @@ a.docs-logo {
   font-size: 24px !important;
   font-weight: 400 !important;
 }
-.md-breadcrumb md-icon {
-  color: #666 !important;
-  fill: #666 !important;
-}
 .md-breadcrumb-page {
   display: inline-block;
   word-wrap: break-word;
@@ -799,13 +799,6 @@ docs-demo .doc-demo-content {
   margin: 16px;
 }
 .site-content-toolbar {
-  background: #f6f6f6 !important;
-  color: #666 !important;
-  z-index: 3;
-}
-.site-content-toolbar {
-  background: #f6f6f6 !important;
-  color: #202020 !important;
   z-index: 3;
 }
 .service-desc {
@@ -889,6 +882,7 @@ table.custom-table {
   box-shadow: 0 1px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);
   border-radius: 2px;
   background: #fafafa;
+  color: rgba(0,0,0,0.87);
   border-spacing: 0;
 }
 table.custom-table thead > {

docs/app/js/app.js

@@ -62,6 +62,11 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES,
     .primaryPalette('yellow')
     .dark();
 
+  $mdThemingProvider.theme('site-toolbar')
+    .primaryPalette('grey', {
+      'default': '100'
+    });
+
   $mdIconProvider.icon('md-toggle-arrow', 'img/icons/toggle-arrow.svg', 48);
   $mdIconProvider
     .iconSet('communication', 'img/icons/sets/communication-icons.svg', 24)

docs/config/template/index.template.html

@@ -54,7 +54,7 @@ <h2 class="menu-heading md-subhead" ng-if="section.type === 'heading'" id="headi
   </md-sidenav>
 
   <div layout="column" tabIndex="-1" role="main" flex>
-    <md-toolbar class="md-whiteframe-glow-z1 site-content-toolbar">
+    <md-toolbar class="md-whiteframe-glow-z1 site-content-toolbar" md-theme="site-toolbar">
 
       <div class="md-toolbar-tools docs-toolbar-tools" tabIndex="-1">
         <md-button class="md-icon-button" ng-click="openMenu()" hide-gt-sm aria-label="Toggle Menu">

src/components/button/demoBasicUsage/index.html

@@ -1,4 +1,3 @@
-
 <div ng-controller="AppCtrl" ng-cloak>
   <md-content>
 
@@ -9,6 +8,7 @@
       <md-button class="md-warn">{{title4}}</md-button>
       <div class="label">Flat</div>
     </section>
+    <md-divider></md-divider>
 
     <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
       <md-button class="md-raised">Button</md-button>
@@ -17,6 +17,7 @@
       <md-button class="md-raised md-warn">Warn</md-button>
       <div class="label">Raised</div>
     </section>
+    <md-divider></md-divider>
 
     <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
         <md-button class="md-fab" aria-label="Eat cake">
@@ -44,14 +45,17 @@
         </md-button>
       <div class="label">FAB</div>
     </section>
+    <md-divider></md-divider>
 
     <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
         <md-button ng-href="{{googleUrl}}" target="_blank">Default Link</md-button>
-        <md-button class="md-primary" ng-href="{{googleUrl}}" target="_blank">Primary Link</md-button>
-
+        <md-button class="md-primary" ng-href="{{googleUrl}}" target="_blank">
+          Primary Link
+        </md-button>
         <md-button>Default Button</md-button>
       <div class="label">Link vs. Button</div>
     </section>
+    <md-divider></md-divider>
 
     <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
       <md-button class="md-primary md-hue-1">Primary Hue 1</md-button>
@@ -60,6 +64,7 @@
       <md-button class="md-accent md-raised md-hue-1">Accent Hue 1</md-button>
       <div class="label">Themed</div>
     </section>
+    <md-divider></md-divider>
 
     <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
       <md-button class="md-icon-button md-primary" aria-label="Settings">

src/components/button/demoBasicUsage/script.js

@@ -1,11 +1,7 @@
-
-angular.module('buttonsDemo1', ['ngMaterial'])
-
+angular.module('buttonsDemoBasic', ['ngMaterial'])
 .controller('AppCtrl', function($scope) {
   $scope.title1 = 'Button';
   $scope.title4 = 'Warn';
   $scope.isDisabled = true;
-
   $scope.googleUrl = 'http://google.com';
-
 });

src/components/button/demoBasicUsage/style.css

@@ -1,13 +1,8 @@
 section {
-  background: #f7f7f7;
   border-radius: 3px;
   text-align: center;
   margin: 1em;
   position: relative !important;
-  padding-bottom: 10px;
-}
-md-content {
-  margin-right: 7px;
 }
 section .md-button {
   margin-top: 16px;

src/components/chips/demoCustomInputs/style.css

@@ -12,7 +12,6 @@ input[type=number] {
 }
 .veggie-option .md-item-text {
  padding: 8px;
- background: #f0f0f0;
  border-radius: 3px;
 }
 .veggie-option .md-item-text h3,

src/components/tabs/demoDynamicHeight/style.scss

@@ -1,12 +1,4 @@
 md-content {
-  background-color: transparent !important;
-  md-tabs {
-    background: #f6f6f6;
-    border: 1px solid #e1e1e1;
-    md-tabs-wrapper {
-      background: white;
-    }
-  }
   h1:first-child {
     margin-top: 0;
   }

src/components/tabs/demoDynamicTabs/style.scss

@@ -1,14 +1,4 @@
 md-content {
-  background-color: transparent !important;
-  md-tabs {
-    border: 1px solid #e1e1e1;
-    md-tab-content {
-      background: #f6f6f6;
-    }
-    md-tabs-wrapper {
-      background: white;
-    }
-  }
   h1:first-child {
     margin-top: 0;
   }
@@ -26,16 +16,12 @@ md-input-container {
 .edit-form input {
   width: 100%;
 }
-md-tabs {
-  border-bottom: 1px solid rgba(0,0,0,0.12);
-}
 md-tab[disabled] {
   opacity: 0.5;
 }
 label {
   text-align: left;
 }
-
 .long > input {
   width: 264px;
 }

src/components/tabs/demoStaticTabs/index.html

@@ -1,6 +1,7 @@
 <div ng-controller="AppCtrl" ng-cloak>
   <md-content class="md-padding">
-    <md-tabs class="md-accent" md-selected="data.selectedIndex" md-align-tabs="{{data.bottom ? 'bottom' : 'top'}}">
+    <md-tabs class="md-primary" md-selected="data.selectedIndex"
+             md-align-tabs="{{data.bottom ? 'bottom' : 'top'}}">
       <md-tab id="tab1">
         <md-tab-label>Item One</md-tab-label>
         <md-tab-body>

src/components/tabs/demoStaticTabs/style.scss

@@ -1,6 +1,5 @@
 md-content {
   md-tabs {
-    border: 1px solid #e1e1e1;
     md-tab-content {
       padding: 25px;
       &:nth-child(1) {
@@ -23,14 +22,14 @@ md-content {
 }
 .after-tabs-area {
   > span {
-    margin-top:25px;
+    margin-top: 25px;
     padding-right: 15px;
     vertical-align: middle;
     line-height: 30px;
     height: 35px;
   }
   > md-checkbox {
-    margin-top:26px;
+    margin-top: 26px;
     margin-left: 0;
   }
 }

src/components/whiteframe/demoBasicClassUsage/style.css

@@ -1,5 +1,4 @@
 md-whiteframe {
-  background: #fff;
   margin: 30px;
   height: 100px;
 }
@@ -9,7 +8,6 @@ md-whiteframe {
   md-whiteframe {
     margin: 7px;
     height: 50px;
-    background-color: #c8e4fa;
   }
   md-whiteframe > span {
     font-size: 0.4em;
@@ -32,7 +30,6 @@ md-whiteframe {
   md-whiteframe {
     margin: 20px;
     height: 90px;
-    background-color: #fcddde;
   }
   md-whiteframe > span {
     font-size: 0.9em;
@@ -44,7 +41,6 @@ md-whiteframe {
   md-whiteframe {
     margin: 25px;
     height: 100px;
-    background-color: #F2FCE2;
   }
   md-whiteframe > span {
     font-size: 1.0em;

src/components/whiteframe/demoDirectiveAttributeUsage/style.css

@@ -1,5 +1,4 @@
 md-whiteframe, div.padded {
-  background: #fff;
   margin: 30px;
   height: 100px;
 }
@@ -9,7 +8,6 @@ md-whiteframe, div.padded {
   md-whiteframe, div.padded {
     margin: 7px;
     height: 50px;
-    background-color: #c8e4fa;
   }
   md-whiteframe > span, div.padded > span {
     font-size: 0.4em;
@@ -32,7 +30,6 @@ md-whiteframe, div.padded {
   md-whiteframe, div.padded {
     margin: 20px;
     height: 90px;
-    background-color: #fcddde;
   }
   md-whiteframe > span, div.padded > span {
     font-size: 0.9em;
@@ -44,7 +41,6 @@ md-whiteframe, div.padded {
   md-whiteframe, div.padded {
     margin: 25px;
     height: 100px;
-    background-color: #F2FCE2;
   }
   md-whiteframe > span, div.padded > span {
     font-size: 1.0em;

src/components/whiteframe/demoDirectiveInterpolation/style.css

@@ -1,5 +1,4 @@
 md-whiteframe, div.padded {
-  background: #fff;
   height: 100px;
 }
 
@@ -16,7 +15,6 @@ md-whiteframe:focus, div.padded:focus {
   md-whiteframe, div.padded {
     margin: 7px;
     height: 50px;
-    background-color: #c8e4fa;
   }
   md-whiteframe > span, div.padded > span {
     font-size: 0.4em;
@@ -37,7 +35,6 @@ md-whiteframe:focus, div.padded:focus {
 @media (min-width: 960px ) and (max-width: 1279px) {
   md-whiteframe, div.padded {
     height: 90px;
-    background-color: #fcddde;
   }
   md-whiteframe > span, div.padded > span {
     font-size: 0.9em;
@@ -48,7 +45,6 @@ md-whiteframe:focus, div.padded:focus {
 @media (min-width: 1280px) {
   md-whiteframe, div.padded {
     height: 100px;
-    background-color: #F2FCE2;
   }
   md-whiteframe > span, div.padded > span {
     font-size: 1.0em;