Theme switching with dark being the default requires an extra initial click on the ToggleThemeButton to switch to light

[christiaanwesterbeek]

The documentation of ToggleThemeButton state that:

The component lets users switch from light to dark mode, and persists that choice by leveraging the store.

So me trying to have darkTheme be the default theme seems out of scope, but it works, but requires an additional click.

What you were expecting:
Hoping to have dark theme the default theme, and switch to light theme using the ToggleThemeButton.

What happened instead:
It works, but requires an additional initial click on the button.

Steps to reproduce:

• Go to https://stackblitz.com/edit/github-vymxfy
• It opens in dark, which is intentional (see theme=darkTheme in Admin)
• Click once on the ToggleThemeButton --> nothing happens
• Click again on the ToggleThemeButton --> no theme switches to light

const lightTheme = { palette: { mode: 'light' } };
const darkTheme = { palette: { mode: 'dark' } };

<Admin
    theme={darkTheme}
    store={memoryStore()}
    ...
/>

<AppBar {...props}>
      <Typography flex="1" variant="h6" id="react-admin-title" />
      <div style={{ width: 300 }}>{`theme: ${theme.palette.mode}`}</div>
      <ToggleThemeButton lightTheme={lightTheme} darkTheme={darkTheme} />
</AppBar>

Environment

• React-admin version: 4.5.2
• Last version that did not exhibit the issue (if applicable): -

[christiaanwesterbeek]

I made a copy of ToggleThemeButton and made only the change of removing the default parameter of lightTheme that is passed to useTheme. Then theme switching works without the extra click. However it will break the app (on load) if no theme is passed to Admin.

[WiXSL]

This seems to happen when you pass a custom memoryStore only to the Admin,
I'm marking it as a bug

[christiaanwesterbeek]

The bug is there with memoryStore and with the default localStorageStore.
With using localStorageStore the bug is camouflaged after loading the app more than once.
With using memoryStore the bug is never camouflaged, so it may seem that memoryStore is the cause when you try a few times in stackblitz, but it's not.