From 0699884d1001944b1730820e779b3f50de88d5c5 Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.mtza@gmail.com>
Date: Sun, 16 Dec 2018 18:35:52 +0100
Subject: [PATCH] fix(body): body background matches ion-content

---
 core/src/components/nav/test/basic/index.html | 29 +++++++++++++++++++
 core/src/css/core.scss                        |  4 +++
 core/src/themes/ionic.theme.default.md.scss   |  2 +-
 .../themes/test/css-variables/css/dark.css    | 27 +++++++++++++++++
 core/src/themes/test/css-variables/index.html |  3 ++
 5 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 core/src/themes/test/css-variables/css/dark.css

diff --git a/core/src/components/nav/test/basic/index.html b/core/src/components/nav/test/basic/index.html
index e201f05756..7ff2bdde7a 100644
--- a/core/src/components/nav/test/basic/index.html
+++ b/core/src/components/nav/test/basic/index.html
@@ -8,6 +8,35 @@
   <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../dist/ionic.js"></script>
+  <style>
+  :root {
+  --ion-background-color: #171717;
+  --ion-text-color: #ffffff;
+  --ion-color-step-50: #232323;
+  --ion-color-step-100: #2e2e2e;
+  --ion-color-step-150: #3a3a3a;
+  --ion-color-step-200: #454545;
+  --ion-color-step-250: #515151;
+  --ion-color-step-300: #5d5d5d;
+  --ion-color-step-350: #686868;
+  --ion-color-step-400: #747474;
+  --ion-color-step-450: #7f7f7f;
+  --ion-color-step-500: #8b8b8b;
+  --ion-color-step-550: #979797;
+  --ion-color-step-600: #a2a2a2;
+  --ion-color-step-650: #aeaeae;
+  --ion-color-step-700: #b9b9b9;
+  --ion-color-step-750: #c5c5c5;
+  --ion-color-step-800: #d1d1d1;
+  --ion-color-step-850: #dcdcdc;
+  --ion-color-step-900: #e8e8e8;
+  --ion-color-step-950: #f3f3f3;
+
+  --ion-background-color-rgb: 23,23,23;
+  --ion-background-color-rgb: 0,0,0;
+  --ion-text-color-rgb: 255,255,255;
+}
+</style>
   <script>
     class PageOne extends HTMLElement {
       connectedCallback() {
diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index 453c962187..97822d4ece 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -14,6 +14,10 @@ html {
   --ion-font-family: var(--ion-default-font);
 }
 
+body {
+  background: var(--ion-background-color);
+}
+
 body.backdrop-no-scroll {
   overflow: hidden;
 }
diff --git a/core/src/themes/ionic.theme.default.md.scss b/core/src/themes/ionic.theme.default.md.scss
index 692917b16b..ce72beb4ec 100644
--- a/core/src/themes/ionic.theme.default.md.scss
+++ b/core/src/themes/ionic.theme.default.md.scss
@@ -16,7 +16,7 @@ $overlay-md-background-color:               var(--ion-overlay-background-color,
 // --------------------------------------------------
 $tabbar-md-background:                      var(--ion-tab-bar-background, $background-color) !default;
 $tabbar-md-background-focused:              var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default;
-$tabbar-md-border-color:                    var(--ion-tab-bar-border-color, var(--ion-border-color, rgba(0, 0, 0, .07))) !default;
+$tabbar-md-border-color:                    var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .07)))) !default;
 $tabbar-md-color:                           var(--ion-tab-bar-color, $text-color-step-400) !default;
 $tabbar-md-color-activated:                 var(--ion-tab-bar-color-activated, ion-color(primary, base)) !default;
 
diff --git a/core/src/themes/test/css-variables/css/dark.css b/core/src/themes/test/css-variables/css/dark.css
new file mode 100644
index 0000000000..1d3681a34c
--- /dev/null
+++ b/core/src/themes/test/css-variables/css/dark.css
@@ -0,0 +1,27 @@
+:root {
+  --ion-background-color: #171717;
+  --ion-text-color: #ffffff;
+  --ion-color-step-50: #232323;
+  --ion-color-step-100: #2e2e2e;
+  --ion-color-step-150: #3a3a3a;
+  --ion-color-step-200: #454545;
+  --ion-color-step-250: #515151;
+  --ion-color-step-300: #5d5d5d;
+  --ion-color-step-350: #686868;
+  --ion-color-step-400: #747474;
+  --ion-color-step-450: #7f7f7f;
+  --ion-color-step-500: #8b8b8b;
+  --ion-color-step-550: #979797;
+  --ion-color-step-600: #a2a2a2;
+  --ion-color-step-650: #aeaeae;
+  --ion-color-step-700: #b9b9b9;
+  --ion-color-step-750: #c5c5c5;
+  --ion-color-step-800: #d1d1d1;
+  --ion-color-step-850: #dcdcdc;
+  --ion-color-step-900: #e8e8e8;
+  --ion-color-step-950: #f3f3f3;
+
+  --ion-background-color-rgb: 23,23,23;
+  --ion-background-color-rgb: 0,0,0;
+  --ion-text-color-rgb: 255,255,255;
+}
diff --git a/core/src/themes/test/css-variables/index.html b/core/src/themes/test/css-variables/index.html
index d1bbc38bec..a0012bcca0 100644
--- a/core/src/themes/test/css-variables/index.html
+++ b/core/src/themes/test/css-variables/index.html
@@ -76,6 +76,7 @@
                 <ion-select-option value="default" selected>Default</ion-select-option>
                 <ion-select-option value="oceanic">Oceanic</ion-select-option>
                 <ion-select-option value="vibrant">Vibrant</ion-select-option>
+                <ion-select-option value="dark">Dark</ion-select-option>
               </ion-select>
             </div>
           </ion-toolbar>
@@ -328,6 +329,7 @@
                 <ion-select-option value="default" selected>Default</ion-select-option>
                 <ion-select-option value="oceanic">Oceanic</ion-select-option>
                 <ion-select-option value="vibrant">Vibrant</ion-select-option>
+                <ion-select-option value="dark">Dark</ion-select-option>
               </ion-select>
             </div>
           </ion-toolbar>
@@ -684,6 +686,7 @@
                 <ion-select-option value="default" selected>Default</ion-select-option>
                 <ion-select-option value="oceanic">Oceanic</ion-select-option>
                 <ion-select-option value="vibrant">Vibrant</ion-select-option>
+                <ion-select-option value="dark">Dark</ion-select-option>
               </ion-select>
             </div>
           </ion-toolbar>