diff --git a/src/components/catalog-row/catalog-row.module.css b/src/components/catalog-row/catalog-row.module.css
index 9e911af3..3ba350b4 100644
--- a/src/components/catalog-row/catalog-row.module.css
+++ b/src/components/catalog-row/catalog-row.module.css
@@ -20,10 +20,10 @@
   opacity: 0.5;
 }
 
-.blackThumbnail {
+.hiddenThumbnail {
   width: 150px;
   height: 150px;
-  background-color: black;
+  background-color: var(--media-thumbnail-background-color);
   display: inline-block;
 }
 
diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx
index fa1d7fea..890b40f3 100644
--- a/src/components/catalog-row/catalog-row.tsx
+++ b/src/components/catalog-row/catalog-row.tsx
@@ -175,7 +175,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
         <div onMouseOver={() => setHoveredCid(isDescription ? 'd' : isRules ? 'r' : cid)} onMouseLeave={() => setHoveredCid(null)}>
           {hidden ? (
             <Link to={postLink}>
-              <span className={`${styles.blackThumbnail} ${styles.hidden}`} />
+              <span className={styles.hiddenThumbnail} />
             </Link>
           ) : hasThumbnail ? (
             <Link to={postLink}>