Allow deactivation of automatic color styling

Closes #36

Author: lehni

README.md

@@ -35,13 +35,13 @@ Use:
 
 ### Properties
 
-| Name      | Type              | Default     | Description                        |
-| ---       | ---               | ---         | ---                                |
-| value     | Boolean           | false       | Initial state of the toggle button |
-| sync      | Boolean           | false       | If set to `true`, will be watching changes in `value` property and overwrite the current state of the button whenever `value` prop. changes |
-| speed     | Number            | 300        | Transition time for the animation   |
-| disabled  | Boolean           | false      | Button does not react on mouse events |
-| color     | [String, Object]  | `#75C791`  | if `String` - color of the button when checked <br>If `Object` - colors for the button when checked/uncheked <br>Example: `{checked: '#00FF00', unchecked: '#FF0000'}`  |
+| Name      | Type                    | Default     | Description                        |
+| ---       | ---                     | ---         | ---                                |
+| value     | Boolean                 | false       | Initial state of the toggle button |
+| sync      | Boolean                 | false       | If set to `true`, will be watching changes in `value` property and overwrite the current state of the button whenever `value` prop. changes |
+| speed     | Number                  | 300        | Transition time for the animation   |
+| disabled  | Boolean                 | false      | Button does not react on mouse events |
+| color     | [String, Object, null]  | `#75C791`  | If `String` - color of the button when checked <br>If `Object` - colors for the button when checked/uncheked <br>If `null` - Deactivate colors in favor of CSS styling <br>Example: `{checked: '#00FF00', unchecked: '#FF0000'}`  |
 | labels    | [Boolean, Object] | false      | If `Boolean` - shows/hides default labels ("on" and "off") <br>If `Object` - sets custom labels for both states. <br>Example: `{checked: 'Foo', unchecked: 'Bar'}`   |
 | width     | Number            | 50         | Width of the button, default is 50 |
 | height    | Number            | 22         | Height of the button, default is 22 |

dist/index.js

@@ -132,22 +132,22 @@ export default {
 
     colorChecked () {
       let { color } = this
-
-      if (typeof color !== 'object') {
-        return color || constants.colorChecked
-      }
-
-      return contains(color, 'checked')
-        ? color.checked
-        : constants.colorChecked
+      return color === null 
+        ? undefined
+        : typeof color !== 'object'
+          ? color || constants.colorChecked
+          : contains(color, 'checked')
+            ? color.checked
+            : constants.colorChecked
     },
 
     colorUnchecked () {
       let { color } = this
-
-      return contains(color, 'unchecked')
-        ? color.unchecked
-        : constants.colorUnchecked
+      return color === null
+        ? undefined
+        : contains(color, 'unchecked')
+          ? color.unchecked
+          : constants.colorUnchecked
     },
 
     colorCurrent () {