Disable Dark Mode in Admin Panel

default discord avatar
sandrowegmannlast year

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

  • 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:


    import React, { useEffect } from 'react'
    export type RemoveDarkModeProviderProps = {
      children: React.ReactNode[]
    export const RemoveDarkModeProvider: React.FC<RemoveDarkModeProviderProps> = (
    ) => {
      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 () => {
      }, [])
      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


Star on GitHub


Chat on Discord



Can't find what you're looking for?

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