How to properly set background color of project for automatic white/black text?
Unanswered
Shayokh posted this in #help-forum
![Avatar](https://cdn.discordapp.com/avatars/948533966418354186/cddc950ff0196dc14b1364576dd85e1a.webp?size=256)
ShayokhOP
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
the text is always solid black color by default, making it kind of invisible. To combat that, I am forced to set
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" ?![Image](https://cdn.discordapp.com/attachments/1266204090036129862/1266204090312949770/image.png?ex=66a44bf4&is=66a2fa74&hm=40fc5ff0e31c2b78cad7562cd8aa75896ee5b213173290922f96bf2f9eff611a&)
![Image](https://cdn.discordapp.com/attachments/1266204090036129862/1266204090568933501/image.png?ex=66a44bf4&is=66a2fa74&hm=ab757a91c0910b7c2e524e7ce5a8e72f29b57eb6a241bb777d3e93b3471af457&)
7 Replies
![Avatar](https://cdn.discordapp.com/avatars/948533966418354186/cddc950ff0196dc14b1364576dd85e1a.webp?size=256)
ShayokhOP
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 -
![Image](https://cdn.discordapp.com/attachments/1266204090036129862/1266205195201679441/image.png?ex=66a44cfb&is=66a2fb7b&hm=caeed8cf81560aa55adcdcbfef462dd07db44b2eb361496bf53a55464e0a822f&)
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
![Image](https://cdn.discordapp.com/attachments/1266204090036129862/1266205866944761956/image.png?ex=66a44d9b&is=66a2fc1b&hm=14c3d8ff0f3232cadd0718f6b8f9bb2105ef474156b9cdbc9ab1133c3f898f59&)
Is there any way to prevent this behavior?