How do I use a different background for dark mode when using Material UI Themes?

I have the following...

export const myThemeOptions: ThemeOptions = {
    palette: {
        mode: "light" as PaletteMode,
        primary: {
            main: '#1FC8B9',
            dark: '#14A996',
        },
        secondary: {
            main: '#57ECE6',
            dark: '#0F6E60',
        },
        background: {
            default: '#074E40',
            paper: '#086A5D',
        },
    },
};

I would like to change the background when I am in dark mode but I can't seem to do it. I tried...

export const myThemeOptions: ThemeOptions = {
    palette: {
        mode: "light" as PaletteMode,
        primary: {
            main: '#1FC8B9',
            dark: '#14A996',
        },
        secondary: {
            main: '#57ECE6',
            dark: '#0F6E60',
        },
        background: {
            default: '#6AD6CD',
            paper: '#086A5D',
        },
        dark: {
            background: {
                default: '#074E40',
                paper: '#424242',
            },
        },
    },
};

But that didn't work the background just stayed #6AD6CD. What am I missing how do I change this? My current provider looks like this...

export const ColorProvider: React.FC = ({ children }) => {
    const [colorMode, setColorMode] = useState<ColorMode>(() => {
        const savedColorMode = getCookie('colorMode');
        return savedColorMode ? (savedColorMode as ColorMode) : 'light';
    });

    const [theme, setTheme] = useState(createTheme(myThemeOptions));

    useEffect(() => {
        const updatedPaletteMode = colorMode === 'dark' ? 'dark' : 'light'; // Updated logic
        const updatedThemeOptions = {
            ...myThemeOptions,
            palette: {
                ...myThemeOptions.palette,
                mode: updatedPaletteMode,
            },
        };
        const updatedTheme = createTheme(updatedThemeOptions);
        setTheme(updatedTheme);
        // Save color mode to cookie
        setCookie('colorMode', colorMode);
    }, [colorMode]);

    const toggleColorMode = () =>
        setColorMode(colorMode === 'light' ? 'dark' : 'light');

    const contextValue: ColorContextType = {
        colorMode,
        toggleColorMode,
    };

    return (
        <ColorContext.Provider value={contextValue}>
            <ThemeProvider theme={theme}>
                <CssBaseline enableColorScheme/>
                {children}
            </ThemeProvider>
        </ColorContext.Provider>
    );
};

You're most likely going to want to replace your myThemeOptions object with a function that spreads in and returns the appropriate theme values for the passed mode, per the MUI documentation for Dark mode with custom palette. For example:

const myThemeOptions = (mode: PaletteMode) => ({
  palette: {
    mode,
    primary: {
      main: "#1FC8B9",
      dark: "#14A996"
    },
    secondary: {
      main: "#57ECE6",
      dark: "#0F6E60"
    },
    background: {
      default: "#6AD6CD",
      paper: "#086A5D"
    },
    ...(mode === "dark" && {
      background: {
        default: "#074E40",
        paper: "#424242"
      }
    })
  }
});

Then you'll want to either run/memoize the result from within your provider and/or store it elsewhere in state.

I stitched together a couple of the MUI doc examples to make this quick [non-Provider] demo.

Working demo: https://codesandbox.io/s/mutable-grass-qjh9ij?file=/demo.tsx:286-692