Disable Dark Mode in Admin Panel

sandrowegmannlast year

6

• 

  chrispy.qlast year

  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
• 

  tyteen4a0310 months ago

  Would be good if this can be an official feature

• 

  60pfennig8 months ago

  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]
      }

• 

  sandrowegmann8 months ago

  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 @60pfennig 's solution might be more sophisticated

• 

  60pfennig8 months ago

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

• 

  sandrowegmann8 months ago

  True!