Disable Dark Mode in Admin Panel

default discord avatar
sandrowegmannlast year
6

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

  • default discord avatar
    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
  • default discord avatar
    tyteen4a037 months ago

    Would be good if this can be an official feature

  • default discord avatar
    60pfennig5 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]
        }
  • default discord avatar
    sandrowegmann5 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

  • default discord avatar
    60pfennig5 months ago

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

  • default discord avatar
    sandrowegmann5 months ago

    True!

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

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