Light mode broken

default discord avatar
arielarial
2 months ago

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

    Open the post
    Continue the discussion in Discord
    Like what we're doing?
    Star us on GitHub!

    Star

    Connect with the Payload Community on Discord

    Discord

    online

    Can't find what you're looking for?

    Get help straight from the Payload team with an Enterprise License.