Better coloring for media backgrounds

Still experimental

src/app.css

@@ -1395,6 +1395,11 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   user-select: none;
   width: 100%;
   gap: 16px;
+  --accent-gradient: var(--accent-gradient-light);
+  @media (prefers-color-scheme: dark) {
+    --accent-gradient: var(--accent-gradient-dark);
+  }
+  background-image: linear-gradient(to var(--forward), var(--accent-gradient));
 }
 .carousel::-webkit-scrollbar {
   display: none;
@@ -1409,7 +1414,10 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   width: 100%;
   height: 100vh;
   height: 100dvh;
-  background-color: var(--accent-alpha-color);
+  background-color: var(--accent-light-color);
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--accent-dark-color);
+  }
   /* background-image: radial-gradient(
     closest-side,
     var(--accent-color) 10%,

src/components/media-modal.jsx

@@ -126,36 +126,85 @@ function MediaModal({
       return null;
     });
   }, [mediaAttachments]);
+  // const mediaAccentColors = useMemo(() => {
+  //   return mediaOklabColors?.map((labAverageColor) => {
+  //     if (labAverageColor) {
+  //       return oklab2rgb([0.6, labAverageColor[1], labAverageColor[2]]);
+  //     }
+  //     return null;
+  //   });
+  // }, [mediaOklabColors]);
   const mediaAccentColors = useMemo(() => {
     return mediaOklabColors?.map((labAverageColor) => {
       if (labAverageColor) {
-        return oklab2rgb([0.6, labAverageColor[1], labAverageColor[2]]);
+        return {
+          light: oklab2rgb([0.95, labAverageColor[1], labAverageColor[2]]),
+          dark: oklab2rgb([0.25, labAverageColor[1], labAverageColor[2]]),
+          default: oklab2rgb([0.6, labAverageColor[1], labAverageColor[2]]),
+        };
       }
-      return null;
+      return {};
     });
-  }, [mediaOklabColors]);
+  });
-  const mediaAccentGradient = useMemo(() => {
+  // const mediaAccentGradient = useMemo(() => {
+  //   const gap = 5;
+  //   const range = 100 / mediaAccentColors.length;
+  //   return (
+  //     mediaAccentColors
+  //       ?.map((color, i) => {
+  //         const start = i * range + gap;
+  //         const end = (i + 1) * range - gap;
+  //         if (color) {
+  //           return `
+  //           rgba(${color?.join(',')}, 0.4) ${start}%,
+  //           rgba(${color?.join(',')}, 0.4) ${end}%
+  //         `;
+  //         }
+
+  //         return `
+  //           transparent ${start}%,
+  //           transparent ${end}%
+  //         `;
+  //       })
+  //       ?.join(', ') || 'transparent'
+  //   );
+  // }, [mediaAccentColors]);
+  const mediaAccentGradients = useMemo(() => {
     const gap = 5;
     const range = 100 / mediaAccentColors.length;
-    return (
+    const colors = mediaAccentColors.map((color, i) => {
-      mediaAccentColors
+      const start = i * range + gap;
-        ?.map((color, i) => {
+      const end = (i + 1) * range - gap;
-          const start = i * range + gap;
+      if (color?.light && color?.dark) {
-          const end = (i + 1) * range - gap;
+        return {
-          if (color) {
+          light: `
-            return `
+                rgb(${color.light?.join(',')}) ${start}%, 
-            rgba(${color?.join(',')}, 0.4) ${start}%,
+                rgb(${color.light?.join(',')}) ${end}%
-            rgba(${color?.join(',')}, 0.4) ${end}%
+              `,
-          `;
+          dark: `
-          }
+                rgb(${color.dark?.join(',')}) ${start}%, 
+                rgb(${color.dark?.join(',')}) ${end}%
+              `,
+        };
+      }
 
-          return `
+      return {
-            transparent ${start}%,
+        light: `
-            transparent ${end}%
+              transparent ${start}%, 
-          `;
+              transparent ${end}%
-        })
+            `,
-        ?.join(', ') || 'transparent'
+        dark: `
-    );
+              transparent ${start}%, 
+              transparent ${end}%
+            `,
+      };
+    });
+    const lightGradient = colors.map((color) => color.light).join(', ');
+    const darkGradient = colors.map((color) => color.dark).join(', ');
+    return {
+      light: lightGradient,
+      dark: darkGradient,
+    };
   }, [mediaAccentColors]);
 
   let toastRef = useRef(null);
@@ -166,39 +215,34 @@ function MediaModal({
   }, []);
 
   useLayoutEffect(() => {
-    const currentColor = mediaOklabColors[currentIndex];
+    const currentColor = mediaAccentColors[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) {
+        const mediaColor = `rgb(${currentColor[theme].join(',')})`;
+        console.log({ mediaColor });
         $meta = document.querySelector(
           `meta[name="theme-color"][data-theme-setting="manual"]`,
         );
         if ($meta) {
           metaColor = $meta.content;
-          $meta.content = mediaColor[theme];
+          $meta.content = mediaColor;
         }
       } else {
         const colorScheme = window.matchMedia('(prefers-color-scheme: dark)')
           .matches
           ? 'dark'
           : 'light';
+        const mediaColor = `rgb(${currentColor[colorScheme].join(',')})`;
+        console.log({ mediaColor });
         $meta = document.querySelector(
           `meta[name="theme-color"][media*="${colorScheme}"]`,
         );
         if ($meta) {
           metaColor = $meta.content;
-          $meta.content = mediaColor[colorScheme];
+          $meta.content = mediaColor;
         }
       }
     }
@@ -232,8 +276,10 @@ function MediaModal({
           mediaAttachments.length > 1
             ? {
                 backgroundAttachment: 'local',
-                backgroundImage: `linear-gradient(
+                '--accent-gradient-light': mediaAccentGradients?.light,
-            to ${isRTL() ? 'left' : 'right'}, ${mediaAccentGradient})`,
+                '--accent-gradient-dark': mediaAccentGradients?.dark,
+                //     backgroundImage: `linear-gradient(
+                // to ${isRTL() ? 'left' : 'right'}, ${mediaAccentGradient})`,
               }
             : {}
         }
@@ -247,8 +293,14 @@ function MediaModal({
               style={
                 accentColor
                   ? {
-                      '--accent-color': `rgb(${accentColor?.join(',')})`,
+                      '--accent-color': `rgb(${accentColor.default.join(',')})`,
-                      '--accent-alpha-color': `rgba(${accentColor?.join(
+                      '--accent-light-color': `rgb(${accentColor.light?.join(
+                        ',',
+                      )})`,
+                      '--accent-dark-color': `rgb(${accentColor.dark?.join(
+                        ',',
+                      )})`,
+                      '--accent-alpha-color': `rgba(${accentColor.default.join(
                         ',',
                       )}, 0.4)`,
                     }