From 7ba94900bb8e7db4b9bcf7120dac1eb905a54359 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Tue, 4 Dec 2018 16:38:50 -0500
Subject: [PATCH] refactor(themes): remove the outer-content class from core
 (#16589)

BREAKING CHANGES

The outer-content class has been removed in favor of setting the color in your app instead:

```
.outer-content {
  --background: #f2f2f2;
 }
```
---
 core/src/components/action-sheet/test/preview/index.html | 6 ------
 core/src/components/alert/test/preview/index.html        | 6 ------
 core/src/components/avatar/test/preview/index.html       | 6 ------
 core/src/components/badge/test/preview/index.html        | 6 ------
 core/src/components/button/test/preview/index.html       | 6 ------
 core/src/components/card/test/preview/index.html         | 4 ----
 core/src/components/checkbox/test/preview/index.html     | 6 ------
 core/src/components/chip/test/preview/index.html         | 6 ------
 core/src/components/content/test/preview/index.html      | 4 ----
 core/src/components/content/test/standalone/index.html   | 4 ++++
 core/src/components/datetime/test/basic/index.html       | 6 ++++++
 core/src/components/datetime/test/preview/index.html     | 5 +++--
 core/src/components/fab/test/preview/index.html          | 4 ----
 core/src/components/grid/test/preview/index.html         | 4 ----
 core/src/components/icon/test/preview/index.html         | 3 ---
 .../components/infinite-scroll/test/preview/index.html   | 6 ------
 core/src/components/input/test/preview/index.html        | 6 ------
 core/src/components/item-divider/test/preview/index.html | 4 ++--
 core/src/components/item-sliding/test/preview/index.html | 4 ----
 core/src/components/item/test/dividers/index.html        | 6 ++++++
 core/src/components/item/test/preview/index.html         | 6 ------
 core/src/components/item/test/text/index.html            | 6 ++++++
 core/src/components/label/test/preview/index.html        | 6 ------
 core/src/components/list/test/preview/index.html         | 6 ------
 core/src/components/modal/test/preview/index.html        | 6 ------
 core/src/components/nav-pop/test/preview/index.html      | 4 ----
 core/src/components/nav-push/test/preview/index.html     | 4 ----
 core/src/components/nav-set-root/test/preview/index.html | 5 -----
 core/src/components/nav/test/preview/index.html          | 5 -----
 core/src/components/note/test/preview/index.html         | 6 ------
 core/src/components/radio-group/test/basic/index.html    | 9 ++++++---
 core/src/components/radio-group/test/form/index.html     | 7 +++++--
 core/src/components/radio-group/test/preview/index.html  | 4 ++--
 core/src/components/radio/test/basic/index.html          | 5 ++++-
 core/src/components/radio/test/preview/index.html        | 4 ++--
 core/src/components/range/test/preview/index.html        | 6 ------
 core/src/components/refresher/test/preview/index.html    | 6 ------
 .../src/components/reorder-group/test/preview/index.html | 6 ------
 .../src/components/ripple-effect/test/preview/index.html | 6 ------
 core/src/components/router/test/preview/index.html       | 4 ----
 core/src/components/searchbar/test/preview/index.html    | 7 -------
 core/src/components/select/test/basic/index.html         | 6 ++++++
 .../src/components/select/test/multiple-value/index.html | 6 ++++++
 core/src/components/select/test/preview/index.html       | 4 ++--
 core/src/components/select/test/single-value/index.html  | 6 ++++++
 core/src/components/spinner/test/preview/index.html      | 6 ------
 core/src/components/tabs/test/preview/index.html         | 6 ------
 core/src/components/text/test/preview/index.html         | 4 ----
 core/src/components/textarea/test/preview/index.html     | 6 ------
 core/src/components/thumbnail/test/preview/index.html    | 6 ------
 core/src/components/toast/test/preview/index.html        | 4 ----
 core/src/components/toggle/test/preview/index.html       | 6 ------
 52 files changed, 66 insertions(+), 214 deletions(-)

diff --git a/core/src/components/action-sheet/test/preview/index.html b/core/src/components/action-sheet/test/preview/index.html
index a564de7569..84557745cd 100644
--- a/core/src/components/action-sheet/test/preview/index.html
+++ b/core/src/components/action-sheet/test/preview/index.html
@@ -32,12 +32,6 @@
       <ion-button expand="block" id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</ion-button>
 
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 
   <script>
diff --git a/core/src/components/alert/test/preview/index.html b/core/src/components/alert/test/preview/index.html
index 5c67ff5a87..2a53bb4b7c 100644
--- a/core/src/components/alert/test/preview/index.html
+++ b/core/src/components/alert/test/preview/index.html
@@ -32,12 +32,6 @@
       <ion-button id="checkbox" expand="block" onclick="presentAlertCheckbox()">Checkbox</ion-button>
       <ion-button expand="block" onclick="presentWithCssClass()">CssClass</ion-button>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 
   <script>
diff --git a/core/src/components/avatar/test/preview/index.html b/core/src/components/avatar/test/preview/index.html
index c2c91f9189..0210a2d23d 100644
--- a/core/src/components/avatar/test/preview/index.html
+++ b/core/src/components/avatar/test/preview/index.html
@@ -38,12 +38,6 @@
         <ion-label>Item Avatar</ion-label>
       </ion-item>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 </body>
 
diff --git a/core/src/components/badge/test/preview/index.html b/core/src/components/badge/test/preview/index.html
index 9be69d4522..4e746006ca 100644
--- a/core/src/components/badge/test/preview/index.html
+++ b/core/src/components/badge/test/preview/index.html
@@ -112,12 +112,6 @@
         </ion-item>
       </ion-list>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 
   <script>
diff --git a/core/src/components/button/test/preview/index.html b/core/src/components/button/test/preview/index.html
index c509e072d3..9bd39f8078 100644
--- a/core/src/components/button/test/preview/index.html
+++ b/core/src/components/button/test/preview/index.html
@@ -81,12 +81,6 @@
       </p>
 
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 
   <script>
diff --git a/core/src/components/card/test/preview/index.html b/core/src/components/card/test/preview/index.html
index f7ebf091d3..297fe092c6 100644
--- a/core/src/components/card/test/preview/index.html
+++ b/core/src/components/card/test/preview/index.html
@@ -68,10 +68,6 @@
     </ion-content>
 
     <style>
-      ion-toolbar {
-        --background: white;
-      }
-
       .content {
         background: #e5e5e5;
       }
diff --git a/core/src/components/checkbox/test/preview/index.html b/core/src/components/checkbox/test/preview/index.html
index 9ecd5d474b..52d399bcf1 100644
--- a/core/src/components/checkbox/test/preview/index.html
+++ b/core/src/components/checkbox/test/preview/index.html
@@ -80,12 +80,6 @@
         <ion-checkbox slot="end" disabled></ion-checkbox>
       </ion-item>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 </body>
 
diff --git a/core/src/components/chip/test/preview/index.html b/core/src/components/chip/test/preview/index.html
index d3f0b5aff7..7d2a6eb5d5 100644
--- a/core/src/components/chip/test/preview/index.html
+++ b/core/src/components/chip/test/preview/index.html
@@ -92,12 +92,6 @@
       </ion-chip>
 
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 </body>
 
diff --git a/core/src/components/content/test/preview/index.html b/core/src/components/content/test/preview/index.html
index 71bf1b472e..cf2dd9f194 100644
--- a/core/src/components/content/test/preview/index.html
+++ b/core/src/components/content/test/preview/index.html
@@ -100,10 +100,6 @@
     </script>
 
     <style>
-      ion-toolbar {
-        --background: white;
-      }
-
       ion-header.animation,
       ion-footer.animation,
       ion-content.animation {
diff --git a/core/src/components/content/test/standalone/index.html b/core/src/components/content/test/standalone/index.html
index 517fede63f..956a3b7e84 100644
--- a/core/src/components/content/test/standalone/index.html
+++ b/core/src/components/content/test/standalone/index.html
@@ -84,6 +84,10 @@
       height: 100%;
     }
 
+    .outer-content {
+      --background: #f2f2f2;
+    }
+
     .custom-color {
       --background: blue;
       --color: white;
diff --git a/core/src/components/datetime/test/basic/index.html b/core/src/components/datetime/test/basic/index.html
index b7eefbb975..0c4ea73e24 100644
--- a/core/src/components/datetime/test/basic/index.html
+++ b/core/src/components/datetime/test/basic/index.html
@@ -141,6 +141,12 @@
 
     </ion-content>
 
+    <style>
+      .outer-content {
+        --background: #f2f2f2;
+      }
+    </style>
+
     <script>
       var yearValuesArray = [2020, 2016, 2008, 2004, 2000, 1996];
       var customYearValues = document.getElementById('customYearValues');
diff --git a/core/src/components/datetime/test/preview/index.html b/core/src/components/datetime/test/preview/index.html
index 85d16f7689..c241c48a80 100644
--- a/core/src/components/datetime/test/preview/index.html
+++ b/core/src/components/datetime/test/preview/index.html
@@ -127,8 +127,8 @@
       </ion-content>
 
     <style>
-      ion-toolbar {
-        --background: white;
+      .outer-content {
+        --background: #f2f2f2;
       }
     </style>
 
@@ -173,6 +173,7 @@
       }
     </script>
   </ion-app>
+
 </body>
 
 </html>
diff --git a/core/src/components/fab/test/preview/index.html b/core/src/components/fab/test/preview/index.html
index 0a213320f0..aaab3f1a9c 100644
--- a/core/src/components/fab/test/preview/index.html
+++ b/core/src/components/fab/test/preview/index.html
@@ -150,10 +150,6 @@
     </ion-footer>
 
     <style>
-      ion-toolbar {
-        --background: white;
-      }
-
       f {
         display: block;
         margin: 15px auto;
diff --git a/core/src/components/grid/test/preview/index.html b/core/src/components/grid/test/preview/index.html
index a57b31247f..7b051a5ca2 100644
--- a/core/src/components/grid/test/preview/index.html
+++ b/core/src/components/grid/test/preview/index.html
@@ -284,10 +284,6 @@
     </ion-content>
 
     <style>
-      ion-toolbar {
-        --background: white;
-      }
-
       .grid-demo ion-col div {
         background-color: #f7f7f7;
         border: 1px solid #ddd;
diff --git a/core/src/components/icon/test/preview/index.html b/core/src/components/icon/test/preview/index.html
index 2490a6e9c1..50eee6c630 100644
--- a/core/src/components/icon/test/preview/index.html
+++ b/core/src/components/icon/test/preview/index.html
@@ -176,9 +176,6 @@
 
 
     <style>
-      ion-toolbar {
-        --background: white;
-      }
 
       /*to ensure ng css encapsulation doesn't mess with icon attributes*/
       code {
diff --git a/core/src/components/infinite-scroll/test/preview/index.html b/core/src/components/infinite-scroll/test/preview/index.html
index d02ebcdad8..7ff8a763d1 100644
--- a/core/src/components/infinite-scroll/test/preview/index.html
+++ b/core/src/components/infinite-scroll/test/preview/index.html
@@ -34,12 +34,6 @@
       </ion-infinite-scroll>
     </ion-content>
 
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
-
   </ion-app>
 
   <script>
diff --git a/core/src/components/input/test/preview/index.html b/core/src/components/input/test/preview/index.html
index 9bcbad0c41..3b23e45b25 100644
--- a/core/src/components/input/test/preview/index.html
+++ b/core/src/components/input/test/preview/index.html
@@ -103,12 +103,6 @@
 
     </ion-content>
 
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
-
     <script>
       function toggleBoolean(id, prop) {
         var el = document.getElementById(id);
diff --git a/core/src/components/item-divider/test/preview/index.html b/core/src/components/item-divider/test/preview/index.html
index b522f12a6c..b1f88db3f9 100644
--- a/core/src/components/item-divider/test/preview/index.html
+++ b/core/src/components/item-divider/test/preview/index.html
@@ -146,8 +146,8 @@
     </ion-content>
 
     <style>
-      ion-toolbar {
-        --background: white;
+      .outer-content {
+        --background: #f2f2f2;
       }
 
       img {
diff --git a/core/src/components/item-sliding/test/preview/index.html b/core/src/components/item-sliding/test/preview/index.html
index 1bf7bb6a68..a5e8229230 100644
--- a/core/src/components/item-sliding/test/preview/index.html
+++ b/core/src/components/item-sliding/test/preview/index.html
@@ -298,10 +298,6 @@
     </ion-content>
 
     <style>
-      ion-toolbar {
-        --background: white;
-      }
-
       .download-spinner {
         display: none;
       }
diff --git a/core/src/components/item/test/dividers/index.html b/core/src/components/item/test/dividers/index.html
index 2a73bb74f0..87bed6eba2 100644
--- a/core/src/components/item/test/dividers/index.html
+++ b/core/src/components/item/test/dividers/index.html
@@ -142,6 +142,12 @@
         </ion-item>
       </ion-item-group>
     </ion-content>
+
+    <style>
+      .outer-content {
+        --background: #f2f2f2;
+      }
+    </style>
   </ion-app>
 </body>
 
diff --git a/core/src/components/item/test/preview/index.html b/core/src/components/item/test/preview/index.html
index 499e8d0c4c..ca486759f9 100644
--- a/core/src/components/item/test/preview/index.html
+++ b/core/src/components/item/test/preview/index.html
@@ -115,12 +115,6 @@
         <ion-title>Footer</ion-title>
       </ion-toolbar>
     </ion-footer>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 </body>
 
diff --git a/core/src/components/item/test/text/index.html b/core/src/components/item/test/text/index.html
index c4fef73b68..20fbd92237 100644
--- a/core/src/components/item/test/text/index.html
+++ b/core/src/components/item/test/text/index.html
@@ -120,6 +120,12 @@
 
     </ion-content>
 
+    <style>
+      .outer-content {
+        --background: #f2f2f2;
+      }
+    </style>
+
   </ion-app>
 </body>
 
diff --git a/core/src/components/label/test/preview/index.html b/core/src/components/label/test/preview/index.html
index 73e2fffe38..8a406ba686 100644
--- a/core/src/components/label/test/preview/index.html
+++ b/core/src/components/label/test/preview/index.html
@@ -43,12 +43,6 @@
         </ion-item>
       </ion-list>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 </body>
 
diff --git a/core/src/components/list/test/preview/index.html b/core/src/components/list/test/preview/index.html
index 167bba9794..c0068440d1 100644
--- a/core/src/components/list/test/preview/index.html
+++ b/core/src/components/list/test/preview/index.html
@@ -41,12 +41,6 @@
         <ion-item>Halo</ion-item>
       </ion-list>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 </body>
 
diff --git a/core/src/components/modal/test/preview/index.html b/core/src/components/modal/test/preview/index.html
index f4fbd900a1..15041ef8f9 100644
--- a/core/src/components/modal/test/preview/index.html
+++ b/core/src/components/modal/test/preview/index.html
@@ -25,12 +25,6 @@
       </p>
     </ion-content>
     <ion-modal-controller></ion-modal-controller>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 
   <script>
diff --git a/core/src/components/nav-pop/test/preview/index.html b/core/src/components/nav-pop/test/preview/index.html
index 639a69cad8..137e58b7e3 100644
--- a/core/src/components/nav-pop/test/preview/index.html
+++ b/core/src/components/nav-pop/test/preview/index.html
@@ -16,10 +16,6 @@
   </ion-app>
 
   <style>
-    ion-toolbar {
-      --background: white;
-    }
-
     f {
       display: block;
       margin: 15px auto;
diff --git a/core/src/components/nav-push/test/preview/index.html b/core/src/components/nav-push/test/preview/index.html
index 0de75914eb..fd77aabd65 100644
--- a/core/src/components/nav-push/test/preview/index.html
+++ b/core/src/components/nav-push/test/preview/index.html
@@ -16,10 +16,6 @@
   </ion-app>
 
   <style>
-    ion-toolbar {
-      --background: white;
-    }
-
     f {
       display: block;
       margin: 15px auto;
diff --git a/core/src/components/nav-set-root/test/preview/index.html b/core/src/components/nav-set-root/test/preview/index.html
index 0389221649..72f8ba100c 100644
--- a/core/src/components/nav-set-root/test/preview/index.html
+++ b/core/src/components/nav-set-root/test/preview/index.html
@@ -14,11 +14,6 @@
   <ion-app>
     <ion-nav root="page-one"></ion-nav>
   </ion-app>
-  <style>
-    ion-toolbar {
-      --background: white;
-    }
-  </style>
 </body>
 
 <script>
diff --git a/core/src/components/nav/test/preview/index.html b/core/src/components/nav/test/preview/index.html
index 4cc30e10da..f7d85a1082 100644
--- a/core/src/components/nav/test/preview/index.html
+++ b/core/src/components/nav/test/preview/index.html
@@ -75,11 +75,6 @@
   <ion-app>
     <ion-nav root="page-one"></ion-nav>
   </ion-app>
-  <style>
-    ion-toolbar {
-      --background: white;
-    }
-  </style>
 </body>
 
 </html>
diff --git a/core/src/components/note/test/preview/index.html b/core/src/components/note/test/preview/index.html
index c8ca13958f..94ae413f26 100644
--- a/core/src/components/note/test/preview/index.html
+++ b/core/src/components/note/test/preview/index.html
@@ -131,12 +131,6 @@
         </ion-item>
       </ion-list>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 
   <script>
diff --git a/core/src/components/radio-group/test/basic/index.html b/core/src/components/radio-group/test/basic/index.html
index f31fda8dd2..72d74ebc19 100644
--- a/core/src/components/radio-group/test/basic/index.html
+++ b/core/src/components/radio-group/test/basic/index.html
@@ -12,8 +12,6 @@
 
 <body>
   <ion-app>
-
-
     <ion-header>
       <ion-toolbar>
         <ion-title>Radio Group - Basic</ion-title>
@@ -57,6 +55,12 @@
       <ion-button onClick="toggleDisabled()">Toggle Disabled</ion-button>
     </ion-content>
 
+    <style>
+      .outer-content {
+        --background: #f2f2f2;
+      }
+    </style>
+
     <script>
       var dynamicDisabled = document.getElementById('dynamicDisabled');
 
@@ -64,7 +68,6 @@
         dynamicDisabled.disabled = !dynamicDisabled.disabled;
       }
     </script>
-
   </ion-app>
 </body>
 
diff --git a/core/src/components/radio-group/test/form/index.html b/core/src/components/radio-group/test/form/index.html
index f3db5320ed..2ebe124ee5 100644
--- a/core/src/components/radio-group/test/form/index.html
+++ b/core/src/components/radio-group/test/form/index.html
@@ -12,8 +12,6 @@
 
 <body>
   <ion-app>
-
-
     <ion-header>
       <ion-toolbar>
         <ion-title>Radio Group - Form</ion-title>
@@ -79,6 +77,11 @@
 
     </ion-content>
 
+    <style>
+      .outer-content {
+        --background: #f2f2f2;
+      }
+    </style>
     <script>
       var changes = 0;
 
diff --git a/core/src/components/radio-group/test/preview/index.html b/core/src/components/radio-group/test/preview/index.html
index e7c7c10f59..7cf3efb0ea 100644
--- a/core/src/components/radio-group/test/preview/index.html
+++ b/core/src/components/radio-group/test/preview/index.html
@@ -56,8 +56,8 @@
     </ion-content>
 
     <style>
-      ion-toolbar {
-        --background: white;
+      .outer-content {
+        --background: #f2f2f2;
       }
     </style>
 
diff --git a/core/src/components/radio/test/basic/index.html b/core/src/components/radio/test/basic/index.html
index 24dd6d7207..3bec373487 100644
--- a/core/src/components/radio/test/basic/index.html
+++ b/core/src/components/radio/test/basic/index.html
@@ -12,7 +12,6 @@
 
 <body>
   <ion-app>
-
     <ion-header>
       <ion-toolbar>
         <ion-title>Radio - Basic</ion-title>
@@ -187,6 +186,10 @@
     </script>
 
     <style>
+      .outer-content {
+        --background: #f2f2f2;
+      }
+
       .radio-test pre {
         background: #f6f6f6;
         border: 1px solid #ddd;
diff --git a/core/src/components/radio/test/preview/index.html b/core/src/components/radio/test/preview/index.html
index 3854d48014..f9db88e311 100644
--- a/core/src/components/radio/test/preview/index.html
+++ b/core/src/components/radio/test/preview/index.html
@@ -181,8 +181,8 @@
     </script>
 
     <style>
-      ion-toolbar {
-        --background: white;
+      .outer-content {
+        --background: #f2f2f2;
       }
 
       .radio-test pre {
diff --git a/core/src/components/range/test/preview/index.html b/core/src/components/range/test/preview/index.html
index 9817d6db2a..28dad66bba 100644
--- a/core/src/components/range/test/preview/index.html
+++ b/core/src/components/range/test/preview/index.html
@@ -104,12 +104,6 @@
 
   </ion-app>
 
-  <style>
-    ion-toolbar {
-      --background: white;
-    }
-  </style>
-
   <script>
     var ranges = ['progressValue', 'brightnessValue', 'contrastValue'];
 
diff --git a/core/src/components/refresher/test/preview/index.html b/core/src/components/refresher/test/preview/index.html
index a7fe261d21..a87c8e2138 100644
--- a/core/src/components/refresher/test/preview/index.html
+++ b/core/src/components/refresher/test/preview/index.html
@@ -26,12 +26,6 @@
 
       <ion-list id="list"></ion-list>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 
   <script type="text/javascript" src="preview/data.js"></script>
diff --git a/core/src/components/reorder-group/test/preview/index.html b/core/src/components/reorder-group/test/preview/index.html
index cdf7796864..330f2285f0 100644
--- a/core/src/components/reorder-group/test/preview/index.html
+++ b/core/src/components/reorder-group/test/preview/index.html
@@ -108,12 +108,6 @@
         </ion-reorder-group>
       </ion-list>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 
   <script>
diff --git a/core/src/components/ripple-effect/test/preview/index.html b/core/src/components/ripple-effect/test/preview/index.html
index b757b800cf..035ec1aaea 100644
--- a/core/src/components/ripple-effect/test/preview/index.html
+++ b/core/src/components/ripple-effect/test/preview/index.html
@@ -59,12 +59,6 @@
         <ion-ripple-effect></ion-ripple-effect>
       </div>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
   <script>
     function blockClicked() {
diff --git a/core/src/components/router/test/preview/index.html b/core/src/components/router/test/preview/index.html
index b789131e32..83591e3b46 100644
--- a/core/src/components/router/test/preview/index.html
+++ b/core/src/components/router/test/preview/index.html
@@ -140,10 +140,6 @@
   </ion-app>
 
   <style>
-    ion-toolbar {
-      --background: white;
-    }
-
     f {
       display: block;
       margin: 15px auto;
diff --git a/core/src/components/searchbar/test/preview/index.html b/core/src/components/searchbar/test/preview/index.html
index fa2d9c09e4..653a99af0f 100644
--- a/core/src/components/searchbar/test/preview/index.html
+++ b/core/src/components/searchbar/test/preview/index.html
@@ -115,13 +115,6 @@
         }
       </script>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
-
   </ion-app>
 </body>
 
diff --git a/core/src/components/select/test/basic/index.html b/core/src/components/select/test/basic/index.html
index 44de966a11..7e6bb28626 100644
--- a/core/src/components/select/test/basic/index.html
+++ b/core/src/components/select/test/basic/index.html
@@ -272,6 +272,12 @@
 
     </ion-content>
 
+    <style>
+      .outer-content {
+        --background: #f2f2f2;
+      }
+    </style>
+
     <script>
       var pets = document.getElementById('pets');
       pets.value = ['bird', 'dog'];
diff --git a/core/src/components/select/test/multiple-value/index.html b/core/src/components/select/test/multiple-value/index.html
index 77776e728c..abcb1b3943 100644
--- a/core/src/components/select/test/multiple-value/index.html
+++ b/core/src/components/select/test/multiple-value/index.html
@@ -119,6 +119,12 @@
 
     </ion-content>
 
+    <style>
+      .outer-content {
+        --background: #f2f2f2;
+      }
+    </style>
+
     <script>
       var toppings = document.getElementById('toppings');
       toppings.value = ['bacon', 'xcheese'];
diff --git a/core/src/components/select/test/preview/index.html b/core/src/components/select/test/preview/index.html
index d8e85d3395..e682ca4838 100644
--- a/core/src/components/select/test/preview/index.html
+++ b/core/src/components/select/test/preview/index.html
@@ -118,8 +118,8 @@
     </ion-content>
 
     <style>
-      ion-toolbar {
-        --background: white;
+      .outer-content {
+        --background: #f2f2f2;
       }
     </style>
 
diff --git a/core/src/components/select/test/single-value/index.html b/core/src/components/select/test/single-value/index.html
index 1882be0f0f..6cbc83fdfa 100644
--- a/core/src/components/select/test/single-value/index.html
+++ b/core/src/components/select/test/single-value/index.html
@@ -160,6 +160,12 @@
       </p>
     </ion-content>
 
+    <style>
+      .outer-content {
+        --background: #f2f2f2;
+      }
+    </style>
+
     <script>
       let selects = document.querySelectorAll('ion-select');
       selects.forEach(function (select) {
diff --git a/core/src/components/spinner/test/preview/index.html b/core/src/components/spinner/test/preview/index.html
index ca465ee7cc..429143d7ef 100644
--- a/core/src/components/spinner/test/preview/index.html
+++ b/core/src/components/spinner/test/preview/index.html
@@ -58,12 +58,6 @@
         </ion-item>
       </ion-list>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 </body>
 
diff --git a/core/src/components/tabs/test/preview/index.html b/core/src/components/tabs/test/preview/index.html
index df4f59a357..24b8217878 100644
--- a/core/src/components/tabs/test/preview/index.html
+++ b/core/src/components/tabs/test/preview/index.html
@@ -76,12 +76,6 @@
         </ion-tab-button>
       </ion-tab-bar>
     </ion-tabs>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 </body>
 
diff --git a/core/src/components/text/test/preview/index.html b/core/src/components/text/test/preview/index.html
index 15923f4ec5..a4019987f6 100644
--- a/core/src/components/text/test/preview/index.html
+++ b/core/src/components/text/test/preview/index.html
@@ -72,10 +72,6 @@
   </ion-app>
 
   <style>
-    ion-toolbar {
-      --background: white;
-    }
-
     .color-purple {
       color: purple;
     }
diff --git a/core/src/components/textarea/test/preview/index.html b/core/src/components/textarea/test/preview/index.html
index d7425ae64f..29859b490f 100644
--- a/core/src/components/textarea/test/preview/index.html
+++ b/core/src/components/textarea/test/preview/index.html
@@ -95,12 +95,6 @@
       </div>
     </ion-content>
 
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
-
     <script>
       function toggleBoolean(id, prop) {
         var el = document.getElementById(id);
diff --git a/core/src/components/thumbnail/test/preview/index.html b/core/src/components/thumbnail/test/preview/index.html
index b8a8005204..8536042e9c 100644
--- a/core/src/components/thumbnail/test/preview/index.html
+++ b/core/src/components/thumbnail/test/preview/index.html
@@ -38,12 +38,6 @@
         <ion-label>Wide Thumbnail</ion-label>
       </ion-item>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 </body>
 
diff --git a/core/src/components/toast/test/preview/index.html b/core/src/components/toast/test/preview/index.html
index ad0be7d456..048727d68f 100644
--- a/core/src/components/toast/test/preview/index.html
+++ b/core/src/components/toast/test/preview/index.html
@@ -84,10 +84,6 @@
   </script>
 
   <style>
-    ion-toolbar {
-      --background: white;
-    }
-
     f {
       display: block;
       background: blue;
diff --git a/core/src/components/toggle/test/preview/index.html b/core/src/components/toggle/test/preview/index.html
index a24b55e2d3..bd48cd3308 100644
--- a/core/src/components/toggle/test/preview/index.html
+++ b/core/src/components/toggle/test/preview/index.html
@@ -79,12 +79,6 @@
       </p>
     </ion-content>
 
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
-
     <script>
       function printForm(ev) {