diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 630e5963ae..5f4f24b766 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -136,6 +136,18 @@
 }
 
 
+// Toggle Mixins
+// --------------------------------------------------
+
+@mixin toggle-style($on-border-color, $on-bg-color) {
+  /* the track when the toggle is "on" */
+  & input:checked + .track {
+    border-color: $on-border-color;
+    background-color: $on-bg-color;
+  }
+}
+
+
 // Clearfix
 // --------------------------------------------------
 
diff --git a/scss/_toggle.scss b/scss/_toggle.scss
index 7f8753ec3e..6504657d8e 100644
--- a/scss/_toggle.scss
+++ b/scss/_toggle.scss
@@ -6,6 +6,9 @@
 
 /* the overall container of the toggle */
 .toggle {
+  // set the color defaults
+  @include toggle-style($toggle-on-default-border, $toggle-on-default-bg);
+
   position: relative;
   display: inline-block;
   margin: -$toggle-hit-area-expansion;
@@ -16,6 +19,34 @@
       background-color: $toggle-handle-dragging-bg-color !important;
     }
   }
+
+  &.toggle-light  {
+    @include toggle-style($toggle-on-light-border, $toggle-on-light-bg);
+  }
+  &.toggle-stable  {
+    @include toggle-style($toggle-on-stable-border, $toggle-on-stable-bg);
+  }
+  &.toggle-positive  {
+    @include toggle-style($toggle-on-positive-border, $toggle-on-positive-bg);
+  }
+  &.toggle-calm  {
+    @include toggle-style($toggle-on-calm-border, $toggle-on-calm-bg);
+  }
+  &.toggle-assertive  {
+    @include toggle-style($toggle-on-assertive-border, $toggle-on-assertive-bg);
+  }
+  &.toggle-balanced  {
+    @include toggle-style($toggle-on-balanced-border, $toggle-on-balanced-bg);
+  }
+  &.toggle-energized  {
+    @include toggle-style($toggle-on-energized-border, $toggle-on-energized-bg);
+  }
+  &.toggle-royal  {
+    @include toggle-style($toggle-on-royal-border, $toggle-on-royal-bg);
+  }
+  &.toggle-dark  {
+    @include toggle-style($toggle-on-dark-border, $toggle-on-dark-bg);
+  }
 }
 
 /* hide the actual input checkbox */
@@ -63,12 +94,6 @@
   }
 }
 
-/* the track when the toggle is "on" */
-.toggle input:checked + .track {
-  border-color: $toggle-on-border-color;
-  background-color: $toggle-on-bg-color;
-}
-
   /* the handle when the toggle is "on" */
 .toggle input:checked + .track .handle {
   @include translate3d($toggle-width - $toggle-handle-width - ($toggle-border-width * 2), 0, 0);
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 7e90244266..e54857ae81 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -423,11 +423,26 @@ $toggle-handle-dragging-bg-color: darken(#fff, 5%) !default;
 $toggle-off-bg-color:             #E5E5E5 !default;
 $toggle-off-border-color:         #E5E5E5 !default;
 
-$toggle-on-bg-color:              $positive !default;
-$toggle-on-border-color:          $toggle-on-bg-color !default;
-
+$toggle-on-light-bg:              $button-light-border !default;
+$toggle-on-light-border:          $toggle-on-light-bg !default;
+$toggle-on-stable-bg:             $button-stable-border !default;
+$toggle-on-stable-border:         $toggle-on-stable-bg !default;
+$toggle-on-positive-bg:           $positive !default;
+$toggle-on-positive-border:       $toggle-on-positive-bg !default;
+$toggle-on-calm-bg:               $calm !default;
+$toggle-on-calm-border:           $toggle-on-calm-bg !default;
+$toggle-on-assertive-bg:          $assertive !default;
+$toggle-on-assertive-border:      $toggle-on-assertive-bg !default;
+$toggle-on-balanced-bg:           $balanced !default;
+$toggle-on-balanced-border:       $toggle-on-balanced-bg !default;
+$toggle-on-energized-bg:          $energized !default;
+$toggle-on-energized-border:      $toggle-on-energized-bg !default;
 $toggle-on-royal-bg:              $royal !default;
 $toggle-on-royal-border:          $toggle-on-royal-bg !default;
+$toggle-on-dark-bg:               $dark !default;
+$toggle-on-dark-border:           $toggle-on-dark-bg !default;
+$toggle-on-default-bg:            $positive !default;
+$toggle-on-default-border:        $toggle-on-default-bg !default;
 
 $toggle-handle-off-bg-color:      $light !default;
 $toggle-handle-on-bg-color:       $toggle-handle-off-bg-color !default;