Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Light mode broken

default discord avatar
arielarial2 years ago
1

Hey guys! I'm running a fresh instance of payload, using next-payload and something is wrong with light mode :/



As far as I can tell, the problem is here:


body {
    color: rgb(var(--foreground-rgb));
    background: linear-gradient( to bottom, transparent, rgb(var(--background-end-rgb)) ) rgb(var(--background-start-rgb));
}


body

is using the css vars

background-start-rgb

and

background-end-rgb

But this vars are set by a media query that reads not html's data-theme (which is now "light") but

(prefers-color-scheme: dark)

, that comes from my OS:


@media (prefers-color-scheme: dark)
:root {
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
}


I've already used payload in a couple other projects, that did not have this issue


Does someone else have this problem?



ok, so 🤡 the culprit was Next's starter global css

  • default discord avatar
    hrpinedar91last year

    how are you resolve this problem?

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.