Disable Dark Mode in Admin Panel

[hidden plume]

Is there a way to prevent dark Mode in the admin panel?

I've tried to use a custom index.html and manually set the data-theme attribute to "light", it gets overwritten though

[stable mica]

I am not aware if there is an official way to disable it but I guess you can make this happen with a custom provider and just setting data-theme attribute to light in the initial useEffect https://payloadcms.com/docs/admin/components#custom-providers

[buoyant solstice]

Would be good if this can be an official feature

[raven niche]

For all who are also searching:

RemoveDarkModeProvider.tsx:

import React, { useEffect } from 'react'

export type RemoveDarkModeProviderProps = {
  children: React.ReactNode[]
}

export const RemoveDarkModeProvider: React.FC<RemoveDarkModeProviderProps> = (
  props
) => {
  useEffect(() => {
    const html = document.getElementsByTagName('html')[0]
    // Function to handle attribute changes
    const handleChange = (mutationsList): void => {
      for (const mutation of mutationsList) {
        if (
          mutation.type === 'attributes' &&
          mutation.attributeName === 'data-theme'
        ) {
          const newTheme = document.documentElement.getAttribute('data-theme')
          if (newTheme === 'dark') {
            document.documentElement.setAttribute('data-theme', 'light')
          }
        }
      }
    }

    // Creating an observer instance
    const observer = new MutationObserver(handleChange)

    // Options for the observer (which attributes to watch)
    const config = { attributes: true }

    // Start observing the target node for configured mutations
    observer.observe(document.documentElement, config)

    html.setAttribute('data-theme', 'light')

    // Cleanup function to disconnect the observer
    return () => {
      observer.disconnect()
    }
  }, [])
  return <>{props.children}</>
}

payload config:
...

 components: {
      providers: [RemoveDarkModeProvider]
    }

[hidden plume]

We actually ended up solving it with a simple useEffect in a custom Provider:

useEffect(() => {
        document.documentElement.setAttribute('data-theme', 'light');

    }, [])

Has worked great for us so far, haven't thoroughly tested it on all device types and browsers though, so @raven niche 's solution might be more sophisticated

[raven niche]

This won't work if the user manually switches the mode in the settings I guess until reload