Experimental theme-color change when viewing media

src/components/media-modal.jsx

@@ -14,6 +14,7 @@ import { oklab2rgb, rgb2oklab } from '../utils/color-utils';
 import isRTL from '../utils/is-rtl';
 import showToast from '../utils/show-toast';
 import states from '../utils/states';
+import store from '../utils/store';
 
 import Icon from './icon';
 import Link from './link';
@@ -115,17 +116,24 @@ function MediaModal({
     return () => clearTimeout(timer);
   }, []);
 
-  const mediaAccentColors = useMemo(() => {
+  const mediaOklabColors = useMemo(() => {
     return mediaAttachments?.map((media) => {
       const { blurhash } = media;
       if (blurhash) {
         const averageColor = getBlurHashAverageColor(blurhash);
-        const labAverageColor = rgb2oklab(averageColor);
-        return oklab2rgb([0.6, labAverageColor[1], labAverageColor[2]]);
+        return rgb2oklab(averageColor);
       }
       return null;
     });
   }, [mediaAttachments]);
+  const mediaAccentColors = useMemo(() => {
+    return mediaOklabColors?.map((labAverageColor) => {
+      if (labAverageColor) {
+        return oklab2rgb([0.6, labAverageColor[1], labAverageColor[2]]);
+      }
+      return null;
+    });
+  }, [mediaOklabColors]);
   const mediaAccentGradient = useMemo(() => {
     const gap = 5;
     const range = 100 / mediaAccentColors.length;
@@ -157,6 +165,51 @@ function MediaModal({
     };
   }, []);
 
+  useLayoutEffect(() => {
+    const currentColor = mediaOklabColors[currentIndex];
+    let $meta;
+    let metaColor;
+    if (currentColor) {
+      const mediaColor = {
+        light: `rgb(${oklab2rgb([0.81, currentColor[1], currentColor[2]]).join(
+          ',',
+        )})`,
+        dark: `rgb(${oklab2rgb([0.35, currentColor[1], currentColor[2]]).join(
+          ',',
+        )})`,
+      };
+
+      const theme = store.local.get('theme');
+      if (theme) {
+        $meta = document.querySelector(
+          `meta[name="theme-color"][data-theme-setting="manual"]`,
+        );
+        if ($meta) {
+          metaColor = $meta.content;
+          $meta.content = mediaColor[theme];
+        }
+      } else {
+        const colorScheme = window.matchMedia('(prefers-color-scheme: dark)')
+          .matches
+          ? 'dark'
+          : 'light';
+        $meta = document.querySelector(
+          `meta[name="theme-color"][media*="${colorScheme}"]`,
+        );
+        if ($meta) {
+          metaColor = $meta.content;
+          $meta.content = mediaColor[colorScheme];
+        }
+      }
+    }
+    return () => {
+      // Reset meta color
+      if ($meta && metaColor) {
+        $meta.content = metaColor;
+      }
+    };
+  }, [currentIndex, mediaAccentColors]);
+
   return (
     <div
       class={`media-modal-container media-modal-count-${mediaAttachments?.length}`}

src/locales/en.po

@@ -106,7 +106,7 @@ msgstr ""
 #: src/components/account-info.jsx:1118
 #: src/components/compose.jsx:2488
 #: src/components/media-alt-modal.jsx:45
-#: src/components/media-modal.jsx:283
+#: src/components/media-modal.jsx:336
 #: src/components/status.jsx:1721
 #: src/components/status.jsx:1738
 #: src/components/status.jsx:1862
@@ -410,7 +410,7 @@ msgstr ""
 #: src/components/keyboard-shortcuts-help.jsx:39
 #: src/components/list-add-edit.jsx:33
 #: src/components/media-alt-modal.jsx:33
-#: src/components/media-modal.jsx:247
+#: src/components/media-modal.jsx:300
 #: src/components/notification-service.jsx:156
 #: src/components/report-modal.jsx:75
 #: src/components/shortcuts-settings.jsx:230
@@ -858,13 +858,13 @@ msgid "Type to search GIFs"
 msgstr ""
 
 #: src/components/compose.jsx:3491
-#: src/components/media-modal.jsx:387
+#: src/components/media-modal.jsx:440
 #: src/components/timeline.jsx:889
 msgid "Previous"
 msgstr ""
 
 #: src/components/compose.jsx:3509
-#: src/components/media-modal.jsx:406
+#: src/components/media-modal.jsx:459
 #: src/components/timeline.jsx:906
 msgid "Next"
 msgstr ""
@@ -1185,27 +1185,27 @@ msgstr ""
 msgid "Speak"
 msgstr ""
 
-#: src/components/media-modal.jsx:294
+#: src/components/media-modal.jsx:347
 msgid "Open original media in new window"
 msgstr ""
 
-#: src/components/media-modal.jsx:298
+#: src/components/media-modal.jsx:351
 msgid "Open original media"
 msgstr ""
 
-#: src/components/media-modal.jsx:314
+#: src/components/media-modal.jsx:367
 msgid "Attempting to describe image. Please wait…"
 msgstr ""
 
-#: src/components/media-modal.jsx:329
+#: src/components/media-modal.jsx:382
 msgid "Failed to describe image"
 msgstr ""
 
-#: src/components/media-modal.jsx:339
+#: src/components/media-modal.jsx:392
 msgid "Describe image…"
 msgstr ""
 
-#: src/components/media-modal.jsx:362
+#: src/components/media-modal.jsx:415
 msgid "View post"
 msgstr ""