diff --git a/core/scripts/theme-builder/src/theme-variables.ts b/core/scripts/theme-builder/src/theme-variables.ts
index df8b5b4b01..6d0417c239 100644
--- a/core/scripts/theme-builder/src/theme-variables.ts
+++ b/core/scripts/theme-builder/src/theme-variables.ts
@@ -242,6 +242,9 @@ export const THEME_VARIABLES: ThemeVariable[] = [
   {
     property: '--ion-overlay-background-color'
   },
+  {
+    property: '--ion-ripple-background-color'
+  },
   {
     property: '--ion-background-color',
     quickPick: {
diff --git a/core/src/components/ripple-effect/ripple-effect.ios.scss b/core/src/components/ripple-effect/ripple-effect.ios.scss
deleted file mode 100644
index 2ea7f845b5..0000000000
--- a/core/src/components/ripple-effect/ripple-effect.ios.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import "./ripple-effect";
-@import "./ripple-effect.ios.vars";
-
-// iOS Ripple Effect
-.ripple-iod .ripple-effect {
-  background-color: $ripple-ios-background-color;
-}
diff --git a/core/src/components/ripple-effect/ripple-effect.ios.vars.scss b/core/src/components/ripple-effect/ripple-effect.ios.vars.scss
deleted file mode 100644
index 34da65d47c..0000000000
--- a/core/src/components/ripple-effect/ripple-effect.ios.vars.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import "../../themes/ionic.globals.ios";
-
-// iOS Ripple Effect
-
-/// @prop - Background color of the ripple
-$ripple-ios-background-color:  $text-ios-color;
diff --git a/core/src/components/ripple-effect/ripple-effect.md.scss b/core/src/components/ripple-effect/ripple-effect.md.scss
deleted file mode 100644
index 448afd1a4d..0000000000
--- a/core/src/components/ripple-effect/ripple-effect.md.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import "./ripple-effect";
-@import "./ripple-effect.md.vars";
-
-// Material Design Ripple Effect
-.ripple-md .ripple-effect {
-  background-color: $ripple-md-background-color;
-}
diff --git a/core/src/components/ripple-effect/ripple-effect.md.vars.scss b/core/src/components/ripple-effect/ripple-effect.md.vars.scss
deleted file mode 100644
index 19e96ebc93..0000000000
--- a/core/src/components/ripple-effect/ripple-effect.md.vars.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import "../../themes/ionic.globals.md";
-
-// Material Design Ripple Effect
-
-/// @prop - Background color of the ripple
-$ripple-md-background-color:  $text-md-color;
diff --git a/core/src/components/ripple-effect/ripple-effect.scss b/core/src/components/ripple-effect/ripple-effect.scss
index 3fb88a4f68..20fc29fbf3 100644
--- a/core/src/components/ripple-effect/ripple-effect.scss
+++ b/core/src/components/ripple-effect/ripple-effect.scss
@@ -1,4 +1,6 @@
 @import "../../themes/ionic.globals";
+@import "../../themes/ionic.theme.default";
+
 
 // Material Design Ripple Effect
 // --------------------------------------------------
@@ -17,10 +19,10 @@ ion-ripple-effect {
   @include border-radius(50%);
   position: absolute;
 
+  background-color: $ripple-background-color;
   opacity: 0;
 
   will-change: transform, opacity;
-
   pointer-events: none;
   animation-name: rippleAnimation;
   animation-duration: 200ms;
diff --git a/core/src/components/ripple-effect/ripple-effect.tsx b/core/src/components/ripple-effect/ripple-effect.tsx
index 3ec29e4ec5..3c44422f2f 100644
--- a/core/src/components/ripple-effect/ripple-effect.tsx
+++ b/core/src/components/ripple-effect/ripple-effect.tsx
@@ -4,13 +4,7 @@ import { DomController } from '../../global/dom-controller';
 
 @Component({
   tag: 'ion-ripple-effect',
-  styleUrls: {
-    ios: 'ripple-effect.ios.scss',
-    md: 'ripple-effect.md.scss'
-  },
-  host: {
-    theme: 'ripple'
-  }
+  styleUrl: 'ripple-effect.scss',
 })
 export class RippleEffect {
 
diff --git a/core/src/themes/css/default.css b/core/src/themes/css/default.css
index fed50be282..31ad3e5323 100644
--- a/core/src/themes/css/default.css
+++ b/core/src/themes/css/default.css
@@ -69,6 +69,7 @@
   --ion-color-dark-tint: #383838;
   --ion-backdrop-color: #000000;
   --ion-overlay-background-color: #fafafa;
+  --ion-ripple-background-color: #000000;
   --ion-background-color: #ffffff;
   --ion-background-color-rgb:  255,255,255;
   --ion-background-color-step-50: #f2f2f2;
diff --git a/core/src/themes/ionic.theme.default.ios.scss b/core/src/themes/ionic.theme.default.ios.scss
index 080772eb4d..044b214550 100644
--- a/core/src/themes/ionic.theme.default.ios.scss
+++ b/core/src/themes/ionic.theme.default.ios.scss
@@ -22,7 +22,7 @@ $alpha-ios-border-high:                       css-var($alpha-border-high, alpha-
 $alpha-ios-disabled:                          css-var($alpha-disabled, alpha-ios-disabled) !default;
 $alpha-ios-focused:                           css-var($alpha-focused, alpha-ios-focused) !default;
 $alpha-ios-hover:                             css-var($alpha-hover, alpha-ios-hover) !default;
-$alpha-ios-lowest:                            css-var($alpha-lowest, alpha-ios-lowest) !default
+$alpha-ios-lowest:                            css-var($alpha-lowest, alpha-ios-lowest) !default;
 $alpha-ios-low:                               css-var($alpha-low, alpha-ios-low) !default;
 $alpha-ios-medium:                            css-var($alpha-medium, alpha-ios-medium) !default;
 $alpha-ios-high:                              css-var($alpha-high, alpha-ios-high) !default;
diff --git a/core/src/themes/ionic.theme.default.md.scss b/core/src/themes/ionic.theme.default.md.scss
index 8f3dfcabfa..a62840bb4d 100644
--- a/core/src/themes/ionic.theme.default.md.scss
+++ b/core/src/themes/ionic.theme.default.md.scss
@@ -22,7 +22,7 @@ $alpha-md-border-high:                  css-var($alpha-border-high, alpha-md-bor
 $alpha-md-disabled:                     css-var($alpha-disabled, alpha-md-disabled) !default;
 $alpha-md-focused:                      css-var(.1, alpha-md-focused) !default;
 $alpha-md-hover:                        css-var($alpha-hover, alpha-md-hover) !default;
-$alpha-md-lowest:                       css-var($alpha-lowest, alpha-md-lowest) !default
+$alpha-md-lowest:                       css-var($alpha-lowest, alpha-md-lowest) !default;
 $alpha-md-low:                          css-var($alpha-low, alpha-md-low) !default;
 $alpha-md-medium:                       css-var($alpha-medium, alpha-md-medium) !default;
 $alpha-md-high:                         css-var($alpha-high, alpha-md-high) !default;
diff --git a/core/src/themes/ionic.theme.default.scss b/core/src/themes/ionic.theme.default.scss
index 1676e8e877..84dab1ba70 100644
--- a/core/src/themes/ionic.theme.default.scss
+++ b/core/src/themes/ionic.theme.default.scss
@@ -167,6 +167,7 @@ $backdrop-color:                        css-var(#000, backdrop-color) !default;
 $border-color:                          css-var(#b2b2b2, border-color) !default;
 $box-shadow-color:                      css-var(#000, box-shadow-color) !default;
 $overlay-background-color:              css-var(#fafafa, overlay-background-color) !default;
+$ripple-background-color:               css-var(#000, ripple-background-color) !default;
 
 // Default Tabs & Tab bar
 // --------------------------------------------------
diff --git a/core/stencil.config.js b/core/stencil.config.js
index f37b4f4fdf..bc8c4ac707 100644
--- a/core/stencil.config.js
+++ b/core/stencil.config.js
@@ -21,7 +21,6 @@ exports.config = {
     { components: ['ion-loading', 'ion-loading-controller'] },
     { components: ['ion-menu', 'ion-menu-controller', 'ion-menu-toggle', 'ion-menu-button'] },
     { components: ['ion-modal', 'ion-modal-controller'] },
-    { components: ['ion-nav', 'ion-back-button'] },
     { components: ['ion-popover', 'ion-popover-controller'] },
     { components: ['ion-radio', 'ion-radio-group'] },
     { components: ['ion-reorder', 'ion-reorder-group'] },