diff --git a/src/components/mdSwitch/mdSwitch.theme b/src/components/mdSwitch/mdSwitch.theme
index d466db3..97162d2 100644
--- a/src/components/mdSwitch/mdSwitch.theme
+++ b/src/components/mdSwitch/mdSwitch.theme
@@ -19,7 +19,36 @@
       }
     }
 
-    &.md-disabled {
+    &.md-checked.md-primary {
+      .md-switch-container {
+        background-color: #{'PRIMARY-COLOR-500-0.5'};
+      }
+
+      .md-switch-thumb {
+        background-color: #{'PRIMARY-COLOR'};
+      }
+
+      .md-ink-ripple {
+        color: #{'PRIMARY-COLOR'};
+      }
+    }
+
+    &.md-checked.md-warn {
+      .md-switch-container {
+        background-color: #{'WARN-COLOR-500-0.5'};
+      }
+
+      .md-switch-thumb {
+        background-color: #{'WARN-COLOR'};
+      }
+
+      .md-ink-ripple {
+        color: #{'WARN-COLOR'};
+      }
+    }
+
+    &.md-disabled,
+    &.md-disabled.md-checked {
       .md-switch-container {
         background-color: rgba(#000, .12);
       }
diff --git a/src/docs/pages/Switch.vue b/src/docs/pages/Switch.vue
index 8668340..e28eaf4 100644
--- a/src/docs/pages/Switch.vue
+++ b/src/docs/pages/Switch.vue
@@ -1,39 +1,53 @@
 <template>
-  <section>
-    <h2 class="title">Switch</h2>
+  <demo-page>
+    <div slot="examples">
+      <demo-example label="Default">
+        <div>
+          <md-switch v-model="checked0" id="my-test0" name="my-test0"></md-switch>
+        </div>
 
-    <div>
-      <md-switch v-model="checked0" id="my-test0" name="my-test0"></md-switch>
+        <div>
+          <md-switch v-model="checked1" id="my-test1" name="my-test1" class="md-primary">Primary Color</md-switch>
+        </div>
+
+        <div>
+          <md-switch v-model="checked2" id="my-test2" name="my-test2" class="md-warn">Warn Color</md-switch>
+        </div>
+
+        <div>
+          <md-switch v-model="checked3" id="my-test3" name="my-test3" disabled>Disabled</md-switch>
+        </div>
+      </demo-example>
+
+      <demo-example label="Themed">
+        <div v-md-theme="'orange'">
+          <md-switch v-model="checked4" id="my-test4" name="my-test4" class="md-primary"></md-switch>
+        </div>
+
+        <div v-md-theme="'green'">
+          <md-switch v-model="checked5" id="my-test5" name="my-test5" class="md-primary">Green Primary Color</md-switch>
+        </div>
+
+        <div v-md-theme="'brown'">
+          <md-switch v-model="checked6" id="my-test6" name="my-test6" class="md-primary">Brown Primary Color</md-switch>
+        </div>
+
+        <div v-md-theme="'light-blue'">
+          <md-switch v-model="checked7" id="my-test7" name="my-test7" class="md-primary" disabled>Light Blue Primary Color Disabled</md-switch>
+        </div>
+      </demo-example>
     </div>
 
-    <div v-md-theme="'indigo'">
-      <md-switch v-model="checked1" id="my-test1" name="my-test1">With label</md-switch>
+    <div slot="code">
+      <h2>Code</h2>
     </div>
 
-    <div v-md-theme="'blue'">
-      <md-switch v-model="checked2" id="my-test2" name="my-test2">Themed</md-switch>
-    </div>
+    <div slot="api">
 
-    <div v-md-theme="'orange'">
-      <md-switch v-model="checked3" id="my-test3" name="my-test3">Accent Color</md-switch>
     </div>
-
-    <div v-md-theme="'teal'">
-      <md-switch v-model="checked4" id="my-test4" name="my-test4">Fancy colors</md-switch>
-    </div>
-
-    <div v-md-theme="'teal'">
-      <md-switch v-model="checked5" id="my-test5" name="my-test5" disabled>Disabled</md-switch>
-    </div>
-  </section>
+  </demo-page>
 </template>
 
-<style lang="scss" scoped>
-  section {
-    padding: 0 24px;
-  }
-</style>
-
 <script>
   export default {
     data() {
@@ -43,8 +57,13 @@
         checked2: true,
         checked3: true,
         checked4: true,
-        checked5: true
+        checked5: true,
+        checked6: true,
+        checked7: true
       };
+    },
+    mounted() {
+      this.$root.pageTitle = 'Switch';
     }
   };
 </script>