From 3219cae516307e04f23dba4de251776f7d15a401 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Wed, 6 Nov 2024 20:30:06 +0800 Subject: [PATCH] Better coloring for media backgrounds Still experimental --- src/app.css | 10 ++- src/components/media-modal.jsx | 128 +++++++++++++++++++++++---------- 2 files changed, 99 insertions(+), 39 deletions(-) diff --git a/src/app.css b/src/app.css index 90f32874..5e572ed5 100644 --- a/src/app.css +++ b/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%, diff --git a/src/components/media-modal.jsx b/src/components/media-modal.jsx index b890212a..1d2d1be3 100644 --- a/src/components/media-modal.jsx +++ b/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 ( - 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}% - `; - } + const colors = mediaAccentColors.map((color, i) => { + const start = i * range + gap; + const end = (i + 1) * range - gap; + if (color?.light && color?.dark) { + return { + light: ` + rgb(${color.light?.join(',')}) ${start}%, + rgb(${color.light?.join(',')}) ${end}% + `, + dark: ` + rgb(${color.dark?.join(',')}) ${start}%, + rgb(${color.dark?.join(',')}) ${end}% + `, + }; + } - return ` - transparent ${start}%, - transparent ${end}% - `; - }) - ?.join(', ') || 'transparent' - ); + return { + light: ` + transparent ${start}%, + transparent ${end}% + `, + 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( - to ${isRTL() ? 'left' : 'right'}, ${mediaAccentGradient})`, + '--accent-gradient-light': mediaAccentGradients?.light, + '--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-alpha-color': `rgba(${accentColor?.join( + '--accent-color': `rgb(${accentColor.default.join(',')})`, + '--accent-light-color': `rgb(${accentColor.light?.join( + ',', + )})`, + '--accent-dark-color': `rgb(${accentColor.dark?.join( + ',', + )})`, + '--accent-alpha-color': `rgba(${accentColor.default.join( ',', )}, 0.4)`, }