2 files changed, 13 insertions, 6 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index 45eefe6d3..2e98dbc13 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -28,12 +28,18 @@
     // touch action none means that the browser will handle none of the touch actions. this allows us to implement our own actions.
     touch-action: none;
 
-    .collectionfreeformview-placeholderSpan {
-        font-size: 32;
+    .collectionfreeformview-placeholder {
         background: gray;
-        margin: auto;
+        width: 100%;
+        height: 100%;
         display: flex;
-        text-align: center;
+        align-items: center;
+        .collectionfreeformview-placeholderSpan {
+            font-size: 32;
+            display: flex;
+            text-align: center;
+            background: #80808069;
+        }
     }
 
     .collectionfreeformview>.jsx-parser {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 67f7dd602..e9c3f6b0f 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -883,8 +883,9 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         return eles;
     }
     @computed get placeholder() {
-        return <div style={{ background: "gray", width: "100%", height: "100%", display: "flex", alignItems: "center" }}>
-            <span className="collectionfreeformview-placeholderSpan">{this.props.Document.title}</span></div>;
+        return <div className="collectionfreeformview-placeholder" style={{ background: this.Document.backgroundColor }}>
+            <span className="collectionfreeformview-placeholderSpan">{this.props.Document.title}</span>
+        </div>;
     }
     @computed get marqueeView() {
         return <MarqueeView {...this.props} extensionDoc={this.extensionDoc!} activeDocuments={this.getActiveDocuments} selectDocuments={this.selectDocuments} addDocument={this.addDocument}