I am having an issue for a while regarding the background color of my project. I am using a black "#0a0a0a" color as background which I added in the tailwind config and applied the color into the layout.tsx. The issue is whenever I add a text element for example Hello the text is always solid black color by default, making it kind of invisible. To combat that, I am forced to set text-white to every text element. Is there any way for nextjs to detect that "since the background is black (#0a0a0a), the default color of texts should be white" ?

How to properly set background color of project for automatic white/black text?

Unanswered

Shayokh posted this in #help-forum

2024-07-26T01:22:59.999Z

I am having an issue for a while regarding the background color of my project. I am using a black "#0a0a0a" color as background which I added in the tailwind config and applied the color into the layout.tsx.

The issue is whenever I add a text element for example

<h1>Hello</h1>

the text is always solid black color by default, making it kind of invisible. To combat that, I am forced to set text-white to every text element. Is there any way for nextjs to detect that "since the background is black (#0a0a0a), the default color of texts should be white" ?

7 Replies

ShayokhOP

2024-07-26T01:23:59.406Z

Here is a demo of what I am experiencing

function HttpMonitorList() {
  return (
    <section className="mt-10">
      <h1 className="text-4xl">
        Monitors.
      </h1>
    </section>
  );
}

When I add a component like that, that <h1> get rendered in black color, resulting this -

For that, I am being forced to set

text-white

to that <h1>

function HttpMonitorList() {
  return (
    <section className="mt-10">
      <h1 className="text-white text-4xl">
        Monitors<span className="text-custom-green">.</span>
      </h1>
    </section>
  );
}

This causes the text to show up

Is there any way to prevent this behavior?