diff --git a/core/themes/bartik/color/preview.js b/core/themes/bartik/color/preview.js
index cee0e0ec3f2..da8e0ca4e0b 100644
--- a/core/themes/bartik/color/preview.js
+++ b/core/themes/bartik/color/preview.js
@@ -8,7 +8,7 @@
 
   Drupal.color = {
     logoChanged: false,
-    callback: function (context, settings, form, farb, height, width) {
+    callback: function (context, settings, $form) {
       // Change the logo to be the real one.
       if (!this.logoChanged) {
         $('.color-preview .color-preview-logo img').attr('src', drupalSettings.color.logo);
@@ -19,27 +19,31 @@
         $('div').remove('.color-preview-logo');
       }
 
+      var $colorPreview = $form.find('.color-preview');
+      var $colorPalette = $form.find('.js-color-palette');
+
       // Solid background.
-      form.find('.color-preview').css('backgroundColor', $('.js-color-palette input[name="palette[bg]"]').val());
+      $colorPreview.css('backgroundColor', $colorPalette.find('input[name="palette[bg]"]').val());
 
       // Text preview.
-      form.find('.color-preview .color-preview-main h2, .color-preview .preview-content').css('color', form.find('.js-color-palette input[name="palette[text]"]').val());
-      form.find('.color-preview .color-preview-content a').css('color', form.find('.js-color-palette input[name="palette[link]"]').val());
+      $colorPreview.find('.color-preview-main h2, .color-preview .preview-content').css('color', $colorPalette.find('input[name="palette[text]"]').val());
+      $colorPreview.find('.color-preview-content a').css('color', $colorPalette.find('input[name="palette[link]"]').val());
 
       // Sidebar block.
-      form.find('.color-preview .color-preview-sidebar .color-preview-block').css('background-color', form.find('.js-color-palette input[name="palette[sidebar]"]').val());
-      form.find('.color-preview .color-preview-sidebar .color-preview-block').css('border-color', form.find('.js-color-palette input[name="palette[sidebarborders]"]').val());
+      var $colorPreviewBlock = $colorPreview.find('.color-preview-sidebar .color-preview-block');
+      $colorPreviewBlock.css('background-color', $colorPalette.find('input[name="palette[sidebar]"]').val());
+      $colorPreviewBlock.css('border-color', $colorPalette.find('input[name="palette[sidebarborders]"]').val());
 
       // Footer wrapper background.
-      form.find('.color-preview .color-preview-footer-wrapper', form).css('background-color', form.find('.js-color-palette input[name="palette[footer]"]').val());
+      $colorPreview.find('.color-preview-footer-wrapper').css('background-color', $colorPalette.find('input[name="palette[footer]"]').val());
 
       // CSS3 Gradients.
-      var gradient_start = form.find('.js-color-palette input[name="palette[top]"]').val();
-      var gradient_end = form.find('.js-color-palette input[name="palette[bottom]"]').val();
+      var gradient_start = $colorPalette.find('input[name="palette[top]"]').val();
+      var gradient_end = $colorPalette.find('input[name="palette[bottom]"]').val();
 
-      form.find('.color-preview .color-preview-header').attr('style', 'background-color: ' + gradient_start + '; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(' + gradient_start + '), to(' + gradient_end + ')); background-image: -moz-linear-gradient(-90deg, ' + gradient_start + ', ' + gradient_end + ');');
+      $colorPreview.find('.color-preview-header').attr('style', 'background-color: ' + gradient_start + '; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(' + gradient_start + '), to(' + gradient_end + ')); background-image: -moz-linear-gradient(-90deg, ' + gradient_start + ', ' + gradient_end + ');');
 
-      form.find('.color-preview .color-preview-site-name').css('color', form.find('.js-color-palette input[name="palette[titleslogan]"]').val());
+      $colorPreview.find('.color-preview-site-name').css('color', $colorPalette.find('input[name="palette[titleslogan]"]').val());
     }
   };
 })(jQuery, Drupal, drupalSettings);