RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

calculate contrast color for header background

Browse Source
This commit is contained in:
SrGooglo 2022-12-20 14:46:41 +00:00
parent 4a8fbdf20a
commit 25902f33ef
2 changed files with 26 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/app/src/pages/featured-event/[id].jsx
View File

@ -3,6 +3,7 @@ import { Skeleton } from "antd"
import ReactMarkdown from "react-markdown"
import remarkGfm from "remark-gfm"
import ContrastYIQ from "utils/contrastYIQ"
import ProcessString from "utils/processString"
import { Icons } from "components/Icons"
@ -77,6 +78,25 @@ export default (props) => {
fetchEventData()
}, [])
React.useEffect(() => {
// get average color of custom background image
if (eventData?.customHeader.style) {
let backgroundImage = eventData.customHeader.style.backgroundImage
if (backgroundImage) {
backgroundImage = backgroundImage.replace("url(", "").replace(")", "").replace(/\"/gi, "").replace(/\"/gi, "").replace(/\'/gi, "")
console.log(backgroundImage)
ContrastYIQ.fromUrl(backgroundImage).then((contrastColor) => {
console.log(`YIQ returns [${contrastColor}] as contrast color`)
document.getElementById("eventHeader").style.color = `var(--text-color-${contrastColor})`
})
}
}
}, [eventData])
if (!eventData) {
return <Skeleton active />
}
@ -84,7 +104,7 @@ export default (props) => {
return <div className="event">
{
eventData.customHeader &&
<div className="header custom" style={eventData.customHeader.style}>
<div className="header custom" style={eventData.customHeader.style} id="eventHeader">
{
eventData.customHeader.displayLogo && <div className="logo">
<img src={eventData.announcement.logoImg} />
@ -100,7 +120,7 @@ export default (props) => {
}
{
!eventData.customHeader && <div className="header" style={eventData.announcement.backgroundStyle}>
!eventData.customHeader && <div className="header" style={eventData.announcement.backgroundStyle} id="eventHeader">
{eventData.announcement.logoImg &&
<div className="logo">
<img src={eventData.announcement.logoImg} />

4
packages/app/src/pages/featured-event/index.less
View File

@ -53,6 +53,10 @@
font-weight: 700;
}
}
h1,h2,h3,h4,h5,h6,p,span {
color: inherit;
}
}
.content {