Light mode broken

default discord avatar
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));


is using the css vars




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!


    Connect with the Payload Community on Discord



    Can't find what you're looking for?

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