fix: persist user selected theme, fixes #2789

src/app/common/theme-provider.tsx

@@ -1,4 +1,8 @@
-import { createContext, Dispatch, SetStateAction, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
+
+import { store } from '@app/store';
+import { userSelectedThemeActions } from '@app/store/settings/settings.actions';
+import { useUserSelectedTheme } from '@app/store/settings/settings.selectors';
 
 export const themeLabelMap = {
   light: 'Light',
@@ -16,7 +20,7 @@ export const getThemeLabel = (theme: UserSelectedTheme) => {
 const ThemeContext = createContext<{
   theme: ComputedTheme;
   userSelectedTheme: UserSelectedTheme;
-  setUserSelectedTheme: Dispatch<SetStateAction<UserSelectedTheme>>;
+  setUserSelectedTheme: (theme: UserSelectedTheme) => void;
 }>({
   // These values are not used, but are set to satisfy the context's value type.
   theme: 'light',
@@ -27,12 +31,22 @@ const ThemeContext = createContext<{
 const getSystemTheme = () =>
   window.matchMedia('prefers-color-scheme: dark').matches ? 'dark' : 'light';
 
+function getComputedTheme(userSelectedTheme: UserSelectedTheme): ComputedTheme {
+  if (userSelectedTheme === 'system') return getSystemTheme();
+
+  return userSelectedTheme;
+}
+
+function setUserSelectedTheme(theme: UserSelectedTheme) {
+  store.dispatch(userSelectedThemeActions.setUserSelectedTheme(theme));
+}
+
 interface ThemeSwitcherProviderProps {
   children: JSX.Element | JSX.Element[];
 }
 export const ThemeSwitcherProvider = ({ children }: ThemeSwitcherProviderProps) => {
-  const [userSelectedTheme, setUserSelectedTheme] = useState<UserSelectedTheme>('system');
-  const [theme, setTheme] = useState<ComputedTheme>(() => getSystemTheme());
+  const userSelectedTheme = useUserSelectedTheme();
+  const [theme, setTheme] = useState<ComputedTheme>(() => getComputedTheme(userSelectedTheme));
 
   useEffect(() => {
     switch (userSelectedTheme) {

src/app/store/index.ts

@@ -24,6 +24,7 @@ import { onboardingSlice } from './onboarding/onboarding.slice';
 import { analyticsSlice } from './analytics/analytics.slice';
 import { submittedTransactionsSlice } from './submitted-transactions/submitted-transactions.slice';
 import { networksSlice } from './networks/networks.slice';
+import { settingsSlice } from './settings/settings.slice';
 
 const storage = new ExtensionStorage(chrome.storage.local, chrome.runtime);
 
@@ -37,14 +38,15 @@ const rootReducer = combineReducers({
   networks: networksSlice.reducer,
   onboarding: onboardingSlice.reducer,
   submittedTransactions: submittedTransactionsSlice.reducer,
+  settings: settingsSlice.reducer,
 });
 
 const persistConfig = {
   key: 'root',
   version: 1,
   storage,
   serialize: true,
-  whitelist: ['analytics', 'chains', 'keys', 'networks', 'onboarding'],
+  whitelist: ['analytics', 'chains', 'keys', 'networks', 'onboarding', 'settings'],
 };
 
 const persistedReducer = persistReducer(persistConfig, rootReducer);

src/app/store/settings/settings.actions.ts

@@ -0,0 +1,3 @@
+import { settingsSlice } from './settings.slice';
+
+export const userSelectedThemeActions = settingsSlice.actions;

src/app/store/settings/settings.selectors.ts

@@ -0,0 +1,12 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useSelector } from 'react-redux';
+
+import { RootState } from '@app/store';
+
+const selectSettings = (state: RootState) => state.settings;
+
+const selectUserSelectedTheme = createSelector(selectSettings, state => state.userSelectedTheme);
+
+export function useUserSelectedTheme() {
+  return useSelector(selectUserSelectedTheme);
+}

src/app/store/settings/settings.slice.ts

@@ -0,0 +1,20 @@
+import { UserSelectedTheme } from '@app/common/theme-provider';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+interface InitialState {
+  userSelectedTheme: UserSelectedTheme;
+}
+
+const initialState: InitialState = {
+  userSelectedTheme: 'system',
+};
+
+export const settingsSlice = createSlice({
+  name: 'settings',
+  initialState,
+  reducers: {
+    setUserSelectedTheme(state, action: PayloadAction<UserSelectedTheme>) {
+      state.userSelectedTheme = action.payload;
+    },
+  },
+});