mirror of
https://github.com/cheeaun/phanpy.git
synced 2024-11-21 16:55:25 +03:00
Better coloring for media backgrounds
Still experimental
This commit is contained in:
Lim Chee Aun
parent
4e56faa7c8
commit
3219cae516
2 changed files with 99 additions and 39 deletions
10
src/app.css
10
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%,
|
||||
|
|
|
|||
|
|
@ -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)`,
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue