next-themes icon indicating copy to clipboard operation
next-themes copied to clipboard

Option to use sessionStorage instead of localStorage

Open macguirerintoul opened this issue 3 years ago • 5 comments

Hello! I noticed after adding this to my project that because it uses localStorage, the theme always persists between sessions.

When someone visits my site, I'd prefer to have it get the default theme first (i.e. system), if for example the system theme has changed from their previous session because they're visiting at a different time of day.

I've implemented this in https://github.com/pacocoursey/next-themes/pull/71. Please let me know what you think!

macguirerintoul avatar Dec 29 '21 20:12 macguirerintoul

My thoughts on: https://github.com/pacocoursey/next-themes/pull/71#issuecomment-1046267203

Don't you think having a generic option might be a bit over engineered for the common use cases?

I thought of the following implementation would solve #72 quiet nicely.

  • Add a storage property: the accepted values are : none, sessionStorage, localStorage.

In regards to a 'generic' custom solution : I think it would be cool if it was possible to hook into the theme changes, to for example allow the syncing of a users theme-preferences with a data-storage.

  • For custom storage options we could define a simple interface. I believe something like this might make sense:
   interface ExternalThemeStorage extends EventTarget { // EventTarget could be an overkill tbh
      get: () => Promise<string | null>
      set: (value: string) =>  Promise<void>
      delete: () => Promise<void>
   }

An object implementing this interface could then be passed to the customStorage property to be used inside the ThemeProvider.

I think allowing the user to combine both the storage property and customStorage property could be very useful, since saving a users preferences over multiple devices is fairly common.

trm217 avatar Mar 01 '22 12:03 trm217

I don't want to be picky, it is a very nice integration.

But...

I am looking to store the theme info in Redux and have the provider read directly from Redux store instead.

mrjackyliang avatar Feb 16 '23 21:02 mrjackyliang

I don't want to be picky, it is a very nice integration.

But...

I am looking to store the theme info in Redux and have the provider read directly from Redux store instead.

Have you made any progress on that?

omarabid avatar Jun 11 '23 13:06 omarabid