diff --git a/app/assets/javascripts/discourse/app/controllers/composer.js b/app/assets/javascripts/discourse/app/controllers/composer.js
index 3e990c07451..574b992653c 100644
--- a/app/assets/javascripts/discourse/app/controllers/composer.js
+++ b/app/assets/javascripts/discourse/app/controllers/composer.js
@@ -1235,8 +1235,11 @@ export default Controller.extend({
       this.model.set("reply", opts.topicBody);
     }
 
+    // The two custom properties below can be overriden by themes/plugins to set different default composer heights.
     const defaultComposerHeight =
-      this.model.action === "reply" ? "300px" : "400px";
+      this.model.action === "reply"
+        ? "var(--reply-composer-height, 300px)"
+        : "var(--new-topic-composer-height, 400px)";
 
     this.set("model.composerHeight", defaultComposerHeight);
     document.documentElement.style.setProperty(
diff --git a/app/assets/javascripts/discourse/tests/acceptance/composer-test.js b/app/assets/javascripts/discourse/tests/acceptance/composer-test.js
index 2ec16f1854c..a38a59ce2ea 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/composer-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/composer-test.js
@@ -65,7 +65,7 @@ acceptance("Composer", function (needs) {
 
     assert.strictEqual(
       document.documentElement.style.getPropertyValue("--composer-height"),
-      "400px",
+      "var(--new-topic-composer-height, 400px)",
       "sets --composer-height to 400px when creating topic"
     );
 
@@ -83,7 +83,7 @@ acceptance("Composer", function (needs) {
     await click(".toggle-fullscreen");
     assert.strictEqual(
       document.documentElement.style.getPropertyValue("--composer-height"),
-      "400px",
+      "var(--new-topic-composer-height, 400px)",
       "sets --composer-height back to 400px when composer is opened from draft mode"
     );