Added black as a primary color

docs/getting-started.md

@@ -198,6 +198,7 @@ Click on a tile to change the primary color of the theme:
 <button data-md-color-primary="brown">Brown</button>
 <button data-md-color-primary="grey">Grey</button>
 <button data-md-color-primary="blue-grey">Blue Grey</button>
+<button data-md-color-primary="black">Black</button>
 <button data-md-color-primary="white">White</button>
 
 <script>

material/base.html

@@ -56,9 +56,9 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/application.30686662.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/application.4031d38b.css' | url }}">
       {% if palette.primary or palette.accent %}
-        <link rel="stylesheet" href="{{ 'assets/stylesheets/application-palette.0ed588d8.css' | url }}">
+        <link rel="stylesheet" href="{{ 'assets/stylesheets/application-palette.3e3d1dff.css' | url }}">
       {% endif %}
       {% if palette.primary %}
         {% import "partials/palette.html" as map %}
@@ -193,7 +193,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/application.e0c39f9f.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/application.718059d6.js' | url }}"></script>
       {% if lang.t("search.language") != "en" %}
         {% set languages = lang.t("search.language").split(",") %}
         {% if languages | length and languages[0] != "" %}

src/assets/stylesheets/application-palette.scss

@@ -38,7 +38,7 @@
 @import "config";
 
 // ----------------------------------------------------------------------------
-// Rules
+// Rules: button styles
 // ----------------------------------------------------------------------------
 
 // Color tile for presentation in theme documentation
@@ -62,6 +62,10 @@ button[data-md-color-accent] {
   }
 }
 
+// ----------------------------------------------------------------------------
+// Rules: primary colors
+// ----------------------------------------------------------------------------
+
 // Build primary colors
 @each $name, $color in (
   "red":         $clr-red-400,
@@ -148,6 +152,10 @@ button[data-md-color-accent] {
   }
 }
 
+// ----------------------------------------------------------------------------
+// Rules: white
+// ----------------------------------------------------------------------------
+
 // Color tile for presentation in theme documentation
 button[data-md-color-primary="white"] {
   background-color: $md-color-white;
@@ -155,7 +163,7 @@ button[data-md-color-primary="white"] {
   box-shadow: 0 0 px2rem(1px) $md-color-black--light inset;
 }
 
-// Overrides for white color
+// Overrides for black color
 [data-md-color-primary="white"] {
 
   // Application header (stays always on top)
@@ -226,6 +234,69 @@ button[data-md-color-primary="white"] {
   }
 }
 
+// ----------------------------------------------------------------------------
+// Rules: black
+// ----------------------------------------------------------------------------
+
+// Color tile for presentation in theme documentation
+button[data-md-color-primary="black"] {
+  background-color: $clr-black;
+}
+
+// Color palette
+[data-md-color-primary="black"] {
+
+  // Application header (stays always on top)
+  .md-header {
+    background-color: $clr-black;
+  }
+
+  // Hero teaser
+  .md-hero {
+    background-color: $clr-black;
+  }
+
+  // [tablet portrait -]: Layered navigation
+  @include break-to-device(tablet portrait) {
+
+    // Repository containing source
+    .md-nav__source {
+      background-color: mix($clr-black, $md-color-white, 75%);
+    }
+  }
+
+  // [tablet landscape +]: Header-embedded search
+  @include break-from-device(tablet landscape) {
+
+    // Search input
+    .md-search__input {
+      background-color: $md-color-white--lighter;
+    }
+  }
+
+  // [tablet -]: Layered navigation
+  @include break-to-device(tablet) {
+
+    // Site title in main navigation
+    html & .md-nav--primary .md-nav__title--site {
+      background-color: $clr-black;
+    }
+  }
+
+  // [screen +]: Set background color for tabs
+  @include break-from-device(screen) {
+
+    // Tabs with outline
+    .md-tabs {
+      background-color: $clr-black;
+    }
+  }
+}
+
+// ----------------------------------------------------------------------------
+// Rules: accent colors
+// ----------------------------------------------------------------------------
+
 // Build accent colors
 @each $name, $color in (
   "red":         $clr-red-a400,