Some css values does not reflect data-theme="dark"

[filipzava]

Hi! thanks for your great job! 👍

I am facing this issue: Dark mode enabled in system by default. Html attribute is filled automatically to data-theme="dark". And some css values as body.color or body.background are overwritten by next-payload default css.

Screenshot of styling issue

How to reproduce it ...

Add data-theme="dark" to html element

Workaround solution:

Custom payload CSS with own values

 body {
     color: white !important;
     background: transparent !important;
 }

Bonus question 🥇

Do you guys know how can I force dark or ligh mode ?

Thx!

[filipzava]

Hi, its me again ... This is (also workaround) solution for setting light/dark mode:

// src/app/(payload)/admin/page.tsx
React.useEffect(() => {
  const html = document.querySelector("html");
  if (mounted && html) {
    html.dataset.theme = 'light' // or "dark"
  }
}, [mounted]);

[tylandavis]

Hi @filipzava, let me see if I can help get to the bottom of this.

Is the issue that you are not seeing you CSS changes in light or dark mode? Make sure you have your custom Payload CSS file specified in your next.config.js file:

module.exports = withPayload({

    // Your Next.js config

  },
  {
    // Path to your Payload config file
    configPath: path.resolve(__dirname, './payload/payload.config.ts'),

    // Path to your Payload custom styles
    cssPath: path.resolve(__dirname, './styles/my-custom-payload-styles.css'),
  }
);

as well as in your payload.config.ts:

export default buildConfig({

  // the rest of your payload.config

  admin: {
    css: '../styles/my-custom-payload-styles.css',
  }
});

[filipzava]

Hi @tylandavis! 👋 Please read carefully. ⬆️ Simply no, the issue is that when dark mode is enabled by default, the admin page is not displayed correctly. No custom css. You can reproduce it in fresh install. Just read section How to reproduce it ... Thank you for sharing anyway! 🙏

[tylandavis]

@filipzava Sorry for the misunderstanding!

I tried to reproduce using a brand new create-next-app with next-payload installed, and I am not able to see any issues with the styling. Here is a screenshot of the create new user page on first load:

Can you use web inspector to see what stylesheet is applying to the "Forgot Password?" text? Perhaps there is another stylesheet in your application being applied.

[filipzava]

Hi @tylandavis , I figured out why this is happening. It's a bug in my implementation because I use mui.com together with next-payload and I should have used ThemeProvider incorrectly, which then clashed with the default styles of next-payload. Sorry for wasting your time and thank you!