diff --git a/scss/_variables.scss b/scss/_variables.scss
index 168f4efb..4c5dc5ef 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -20,6 +20,7 @@ $bmd-label-color: $gray-light !default;
 $bmd-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted not a control-label which is primary
 
 // Bootstrap Material Design default colors (these can be override by user)
+$theme-colors: () !default;
 $theme-colors: map-merge((
   primary: $teal,
   success: $green,
diff --git a/scss/variables/bootstrap/_state.scss b/scss/variables/bootstrap/_state.scss
index dd16cb27..d95382da 100644
--- a/scss/variables/bootstrap/_state.scss
+++ b/scss/variables/bootstrap/_state.scss
@@ -2,13 +2,13 @@
 //
 // Define colors for form feedback states and, by default, alerts.
 $state-success-text: $bmd-inverse !default;
-$state-success-bg: $brand-success !default;
+$state-success-bg: map-get($theme-colors, success) !default;
 
 $state-info-text: $bmd-inverse !default;
-$state-info-bg: $brand-info !default;
+$state-info-bg: map-get($theme-colors, info) !default;
 
 $state-warning-text: $bmd-inverse !default;
-$state-warning-bg: $brand-warning !default;
+$state-warning-bg: map-get($theme-colors, warning) !default;
 
 $state-danger-text: $bmd-inverse !default;
-$state-danger-bg: $brand-danger !default;
+$state-danger-bg: map-get($theme-colors, danger) !default;