Theo's Typesafe Cult•3y ago

CSS Question - black or white text color based on background

Hey guys, I'd like to have my text colored based on the background color. I found a way to do it on the CSS tricks website, but it's using a mix-blend-mode - they say it's not well supported and it also does not work with only black / white coloring. Is there a pretty convenient way to do it in CSS (maybe Tailwind) / JS (I'm using React)? The screenshot shows what I have right now (I want the black text on the red-ish background to be white)

3 Replies

PiotrekOP•3y ago

This is my Component:

const VotingResult: React.FC<{
  song: Song & { audio: Partial<Audio> };
  percentage: number;
  voted: boolean;
}> = ({ song, percentage, voted }) => {
  return (
    <div
      className={clsx(
        "relative flex h-14 items-center justify-between rounded-lg border-[3px] border-redink p-5",
        !voted && "!border-pink-100"
      )}
    >
      <div
        className={clsx(
          "absolute left-0 -z-10 h-full bg-redink",
          !voted && "!bg-pink-100"
        )}
        style={{ width: `${percentage}%` }}
      />
      <div className="flex items-center gap-4 rounded-lg">
        <FaPlayCircle />
        <span>{song.audio.title}</span>
      </div>
      <div className="font-bold">{percentage}%</div>
    </div>
  );
};

const VotingResult: React.FC<{
  song: Song & { audio: Partial<Audio> };
  percentage: number;
  voted: boolean;
}> = ({ song, percentage, voted }) => {
  return (
    <div
      className={clsx(
        "relative flex h-14 items-center justify-between rounded-lg border-[3px] border-redink p-5",
        !voted && "!border-pink-100"
      )}
    >
      <div
        className={clsx(
          "absolute left-0 -z-10 h-full bg-redink",
          !voted && "!bg-pink-100"
        )}
        style={{ width: `${percentage}%` }}
      />
      <div className="flex items-center gap-4 rounded-lg">
        <FaPlayCircle />
        <span>{song.audio.title}</span>
      </div>
      <div className="font-bold">{percentage}%</div>
    </div>
  );
};

Unknown User•3y ago

Message Not Public

PiotrekOP•3y ago

Thanks guys!

Gaming

Programming

CSS Question - black or white text color based on background