diff --git a/dev/custom-fn.js b/dev/custom-fn.js
index a6e8444..4688283 100644
--- a/dev/custom-fn.js
+++ b/dev/custom-fn.js
@@ -5,13 +5,20 @@ module.exports = function() {
   /** @type {ClayConfig} */
   var Clay = window.Clay = this;
 
+  /**
+   * @returns {void}
+   */
+  function toggleBackground() {
+    if (this.get()) {
+      Clay.getItemByAppKey('background').enable();
+    } else {
+      Clay.getItemByAppKey('background').disable();
+    }
+  }
+
   Clay.on(Clay.EVENTS.AFTER_BUILD, function() {
-    Clay.getItemByAppKey('cool_stuff').on('change', function() {
-      if (this.get()) {
-        Clay.getItemByAppKey('background').enable();
-      } else {
-        Clay.getItemByAppKey('background').disable();
-      }
-    });
+    var coolStuffToggle = Clay.getItemByAppKey('cool_stuff');
+    toggleBackground.call(coolStuffToggle);
+    coolStuffToggle.on('change', toggleBackground);
   });
 };
diff --git a/gulpfile.js b/gulpfile.js
index 4441081..eb3e875 100755
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -104,5 +104,5 @@ gulp.task('default', ['clay']);
 gulp.task('dev', ['dev-js'], function() {
   gulp.watch('src/styles/**/*.scss', ['sass']);
   gulp.watch(['src/scripts/**/*.js', 'src/templates/**/*.tpl'], ['js']);
-  gulp.watch(['src/scripts/**/*.js', 'dev/**/*.js'], ['dev-js']);
+  gulp.watch(['src/**', 'dev/**/*.js'], ['dev-js']);
 });
diff --git a/src/templates/components/color.tpl b/src/templates/components/color.tpl
index 50df2c3..9e985c6 100755
--- a/src/templates/components/color.tpl
+++ b/src/templates/components/color.tpl
@@ -1,5 +1,5 @@
-<div class="component-color">
-  <label class="component">
+<div class="component component-color">
+  <label>
     <input
       data-manipulator-target
       type="hidden"