=== added file 'misc/color-module-preview.html'
--- misc/color-module-preview.html	1970-01-01 00:00:00 +0000
+++ misc/color-module-preview.html	2010-04-20 22:20:17 +0000
@@ -0,0 +1,7 @@
+<div id="preview">
+  <div id="text">
+    <h2>Lorem ipsum dolor</h2>
+    <p>Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <a href="#">exercitation ullamco</a> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  </div>
+  <div id="img"></div>
+</div>
\ No newline at end of file

=== modified file 'modules/color/color.js'
--- modules/color/color.js	2010-04-08 20:10:29 +0000
+++ modules/color/color.js	2010-04-21 00:51:40 +0000
@@ -69,31 +69,36 @@
      * Render the preview.
      */
     function preview() {
-      // Solid background.
-      $('#preview', form).css('backgroundColor', $('#palette input[name="palette[base]"]', form).val());
-
-      // Text preview
-      $('#text', form).css('color', $('#palette input[name="palette[text]"]', form).val());
-      $('#text a, #text h2', form).css('color', $('#palette input[name="palette[link]"]', form).val());
-
-      // Set up gradients if there are some.
-      var color_start, color_end;
-      for (i in settings.gradients) {
-        color_start = farb.unpack($('#palette input[name="palette[' + settings.gradients[i]['colors'][0] + ']"]', form).val());
-        color_end = farb.unpack($('#palette input[name="palette[' + settings.gradients[i]['colors'][1] + ']"]', form).val());
-        if (color_start && color_end) {
-          var delta = [];
-          for (j in color_start) {
-            delta[j] = (color_end[j] - color_start[j]) / (settings.gradients[i]['vertical'] ? height[i] : width[i]);
-          }
-          var accum = color_start;
-          // Render gradient lines.
-          $('#gradient-' + i + ' > div', form).each(function () {
-            for (j in accum) {
-              accum[j] += delta[j];
+      if (Drupal.color.callback) {
+        Drupal.color.callback(context, settings, form);
+      }
+      else {
+        // Solid background.
+        $('#preview', form).css('backgroundColor', $('#palette input[name="palette[base]"]', form).val());
+  
+        // Text preview
+        $('#text', form).css('color', $('#palette input[name="palette[text]"]', form).val());
+        $('#text a, #text h2', form).css('color', $('#palette input[name="palette[link]"]', form).val());
+  
+        // Set up gradients if there are some.
+        var color_start, color_end;
+        for (i in settings.gradients) {
+          color_start = farb.unpack($('#palette input[name="palette[' + settings.gradients[i]['colors'][0] + ']"]', form).val());
+          color_end = farb.unpack($('#palette input[name="palette[' + settings.gradients[i]['colors'][1] + ']"]', form).val());
+          if (color_start && color_end) {
+            var delta = [];
+            for (j in color_start) {
+              delta[j] = (color_end[j] - color_start[j]) / (settings.gradients[i]['vertical'] ? height[i] : width[i]);
             }
-            this.style.backgroundColor = farb.pack(accum);
-          });
+            var accum = color_start;
+            // Render gradient lines.
+            $('#gradient-' + i + ' > div', form).each(function () {
+              for (j in accum) {
+                accum[j] += delta[j];
+              }
+              this.style.backgroundColor = farb.pack(accum);
+            });
+          }
         }
       }
     }

=== modified file 'modules/color/color.module'
--- modules/color/color.module	2010-04-13 15:23:02 +0000
+++ modules/color/color.module	2010-04-21 00:49:09 +0000
@@ -237,6 +237,11 @@
   $info = $form['info']['#value'];
   $path = drupal_get_path('theme', $theme) . '/';
   drupal_add_css($path . $info['preview_css']);
+  
+  if (isset($info['preview_js'])) {
+    // Add the JS at a weight above color.js.
+    drupal_add_js($path . $info['preview_js'], array('weight' => JS_DEFAULT - 1));
+  }
 
   $output  = '';
   $output .= '<div class="color-form clearfix">';
@@ -251,7 +256,14 @@
   // Preview
   $output .= drupal_render_children($form);
   $output .= '<h2>' . t('Preview') . '</h2>';
-  $output .= '<div id="preview"><div id="text"><h2>Lorem ipsum dolor</h2><p>Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <a href="#">exercitation ullamco</a> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div><div id="img" style="background-image: url(' . base_path() . $path . $info['preview_image'] . ')"></div></div>';
+  // Attempt to load preview HTML if the theme provides it.
+  $preview_html_path = DRUPAL_ROOT . '/' . drupal_get_path('theme', $theme) . '/color/preview.html';
+  if (file_exists($preview_html_path)) {
+    $output .= file_get_contents($preview_html_path);
+  }
+  else {
+    $output .= file_get_contents(DRUPAL_ROOT . '/misc/color-module-preview.html');
+  }
   // Close the wrapper div.
   $output .= '</div>';
 

=== modified file 'themes/garland/color/preview.css'
--- themes/garland/color/preview.css	2010-04-03 08:05:08 +0000
+++ themes/garland/color/preview.css	2010-04-20 22:16:42 +0000
@@ -28,6 +28,7 @@
 #preview #img {
   position: relative;
   z-index: 3;
+  background-image: url(preview.png);
 }
 #preview #gradient-0 .gradient-line {
   height: 10px;