mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-21 08:45:32 +03:00
Code Issues Projects Releases Packages Wiki Activity

Better coloring for media backgrounds

Browse source 
Still experimental
This commit is contained in:
Lim Chee Aun 2024-11-06 20:30:06 +08:00
parent 4e56faa7c8
commit 3219cae516
2 changed files with 99 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/app.css
View file

@ -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%,

128
src/components/media-modal.jsx
View file

@ -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)`,
}