Have a little fun with CSS variables X JS

src/app.css

@@ -494,6 +494,13 @@ a.mention span {
   width: 100vw;
   height: 100vh;
   height: 100dvh;
+  background-color: var(--average-color-alpha);
+  background-image: radial-gradient(
+    closest-side,
+    var(--average-color) 10%,
+    var(--average-color-alpha) 40%,
+    transparent 100%
+  );
 }
 .carousel > * :is(img, video) {
   width: auto;

src/components/status.jsx

@@ -1326,8 +1326,10 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
             <InView
               class="carousel-item"
               style={{
-                backgroundColor:
+                '--average-color': `rgb(${rgbAverageColor?.join(',')})`,
-                  rgbAverageColor && `rgba(${rgbAverageColor.join(',')}, .5)`,
+                '--average-color-alpha': `rgba(${rgbAverageColor?.join(
+                  ',',
+                )}, .5)`,
               }}
               tabindex="0"
               key={media.id}