fix(body): body background matches ion-content

ionic-team · Dec 16, 2018 · 0699884 · 0699884
1 parent 4c4bdf2
commit 0699884
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>