Reuse color utils for media modal background

src/app.css

@@ -1052,13 +1052,13 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   width: 100%;
   height: 100vh;
   height: 100dvh;
-  background-color: var(--average-color-alpha);
-  background-image: radial-gradient(
+  background-color: var(--accent-alpha-color);
+  /* background-image: radial-gradient(
     closest-side,
-    var(--average-color) 10%,
-    var(--average-color-alpha) 40%,
+    var(--accent-color) 10%,
+    var(--accent-alpha-color) 40%,
     transparent 100%
-  );
+  ); */
 }
 .carousel .carousel-item :is(img, video) {
   width: auto;

src/components/media-modal.jsx

@@ -3,6 +3,8 @@ import { getBlurHashAverageColor } from 'fast-blurhash';
 import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
 
+import { oklab2rgb, rgb2oklab } from '../utils/color-utils';
+
 import Icon from './icon';
 import Link from './link';
 import Media from './media';
@@ -112,17 +114,22 @@ function MediaModal({
       >
         {mediaAttachments?.map((media, i) => {
           const { blurhash } = media;
-          const rgbAverageColor = blurhash
-            ? getBlurHashAverageColor(blurhash)
-            : null;
+          let accentColor;
+          if (blurhash) {
+            const averageColor = getBlurHashAverageColor(blurhash);
+            const labAverageColor = rgb2oklab(averageColor);
+            accentColor = oklab2rgb([
+              0.6,
+              labAverageColor[1],
+              labAverageColor[2],
+            ]);
+          }
           return (
             <div
               class="carousel-item"
               style={{
-                '--average-color': `rgb(${rgbAverageColor?.join(',')})`,
-                '--average-color-alpha': `rgba(${rgbAverageColor?.join(
-                  ',',
-                )}, .5)`,
+                '--accent-color': `rgb(${accentColor?.join(',')})`,
+                '--accent-alpha-color': `rgba(${accentColor?.join(',')}, 0.4)`,
               }}
               tabindex="0"
               key={media.id}

src/index.css

@@ -53,7 +53,7 @@
   --divider-color: rgba(0, 0, 0, 0.1);
   --backdrop-color: rgba(0, 0, 0, 0.05);
   --backdrop-darker-color: rgba(0, 0, 0, 0.25);
-  --backdrop-solid-color: #ccc;
+  --backdrop-solid-color: #eee;
   --img-bg-color: rgba(128, 128, 128, 0.2);
   --loader-color: #1c1e2199;
   --comment-line-color: #e5e5e5;