diff --git a/app/assets/javascripts/wizard/lib/preview.js b/app/assets/javascripts/wizard/lib/preview.js
index 243f34e9190..48a2e72e310 100644
--- a/app/assets/javascripts/wizard/lib/preview.js
+++ b/app/assets/javascripts/wizard/lib/preview.js
@@ -4,6 +4,7 @@ import { Promise } from "rsvp";
 import getUrl from "discourse-common/lib/get-url";
 import { htmlSafe } from "@ember/template";
 import { scheduleOnce } from "@ember/runloop";
+import { observes } from "discourse-common/utils/decorators";
 
 export const LOREM = `
 Lorem ipsum dolor sit amet,
@@ -54,6 +55,13 @@ export function createPreviewComponent(width, height, obj) {
         this.reload();
       },
 
+      @observes(
+        "step.fieldsById.{color_scheme,body_font,heading_font,homepage_style}.value"
+      )
+      themeChanged() {
+        this.triggerRepaint();
+      },
+
       images() {},
 
       loadFonts() {