Persistence of theming preferences

[bladx]

Is your feature request related to a problem? Please describe.
This is not really an issue, but more like a new feature.
Today we have 2 options with the storage of theming preferences: session or none.
The first one is the default, the second one can be achieved following: https://marmelab.com/react-admin/Store.html#transient-store

But I believe it would be really useful that the theme selected with ToggleThemeButton would not be flushed during a logout.
Indeed, like most websites if I set my theme to dark mode then I want it dark next time I go on my website.

Describe the solution you'd like
I dug in the source code but did not find an option to change that myself (PR or existing param).
I don't know how other localStorage values (such as language) are managed in term of resetting, but I believe a global option in Admin component (such as the existing store param) or an attribute of the Logout component could do the trick.
The default one could be the session as it is (although I personally don't like it), and you would also have none and browser (or whatever).

Describe alternatives you've considered
This cache persistence could also be a param of ToggleThemeButton, but again even if I don't use the ToggleLanguageButton component I believe there would be to many components needing change (instead of 1 global one).
Before using the ToggleThemeButton I was using a custom Settings page exactly as in the demo, so I was setting the localStorage values myself and never resetting it.

[fzaninotto]

Hi, and thanks for your suggestion.

I'm not sure that the theme is different than, say, the language or the preferred filters. Your point is valid for all preferences: if a user decided about a setting once, they probably want to use this setting even during another session.

Which is why we expose the <Admin store> prop: you can use another store implementation than the default one, and synchronize user preferences with the data provider. This is totally possible in user land (although the store API isn't properly documented, but you can get it from the code).

We may even provide a special store implementation for that some time in the future. But since it's not something we need right now, I'll close this issue. If you happen to implement it and you found a generic solution, please open a PR and we'll consider merging it to the core.

[bladx]

If I understand what you suggest, then the preferences would be store in db and returned after the user authenticated through an API call.
But that would mean the login page wouldn't have the information of light or dark mode.

I feel like, as you mentioned, the current implemented solution is a kind of session length storage. And so, I believe it should be stored using the session storage and not the local one.
Maybe simply using sessionStorage by default and flushing it at logout (but not the localStorage) would allow to choose between the 2 options.
Not specifying a store would use the session storage and have the same behavior than now, while specifying the local storage would result in the preferences never explicitly reset (as it would still be the session storage that is flushed at logout).
What do you think?

[bladx]

Plus with the current behavior, the login page is always in default language.
So if you set the preferred language to french, then you will still have it in english.
I feel like my suggestion could be the solution to have both the current behavior (if still wanted) and the one I'm looking for that seems pretty common.

[Masoodt]

Plus with the current behavior, the login page is always in default language. So if you set the preferred language to french, then you will still have it in english. I feel like my suggestion could be the solution to have both the current behavior (if still wanted) and the one I'm looking for that seems pretty common.

hot fix:

import {Admin, localStorageStore,} from "react-admin";
const customStore = localStorageStore("1");
  customStore.reset = () => {
    console.log("resetting aborted");
  };
return (
<Admin
      store={customStore}
    >
<Admin>

[bladx]

Wow cheers, that works like a charm!!