diff --git a/docs/getting-started.md b/docs/getting-started.md
index 95b3e84a8..dc691927f 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -198,6 +198,7 @@ Click on a tile to change the primary color of the theme:
+
+
{% if lang.t("search.language") != "en" %}
{% set languages = lang.t("search.language").split(",") %}
{% if languages | length and languages[0] != "" %}
diff --git a/src/assets/stylesheets/application-palette.scss b/src/assets/stylesheets/application-palette.scss
index f01339ff4..ac282c086 100644
--- a/src/assets/stylesheets/application-palette.scss
+++ b/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,