Theme done

src/utils/slices/settingsSlice.ts

@@ -5,10 +5,12 @@ import { RootState } from 'src/store'
 
 export type SettingsState = {
   language: 'zh' | 'en' | undefined
+  theme: 'light' | 'dark' | 'auto'
 }
 
 const initialState = {
-  language: undefined
+  language: undefined,
+  theme: 'auto'
 }
 
 // export const updateLocal = createAsyncThunk(
@@ -62,6 +64,12 @@ const settingsSlice = createSlice({
       action: PayloadAction<NonNullable<SettingsState['language']>>
     ) => {
       state.language = action.payload
+    },
+    changeTheme: (
+      state,
+      action: PayloadAction<NonNullable<SettingsState['theme']>>
+    ) => {
+      state.theme = action.payload
     }
   }
   // extraReducers: builder => {
@@ -72,6 +80,7 @@ const settingsSlice = createSlice({
 })
 
 export const getSettingsLanguage = (state: RootState) => state.settings.language
+export const getSettingsTheme = (state: RootState) => state.settings.theme
 
-export const { changeLanguage } = settingsSlice.actions
+export const { changeLanguage, changeTheme } = settingsSlice.actions
 export default settingsSlice.reducer

src/utils/styles/ThemeManager.tsx

@@ -1,39 +1,44 @@
 import React, { createContext, useContext, useEffect, useState } from 'react'
-import { Appearance, useColorScheme } from 'react-native-appearance'
+import { Appearance } from 'react-native-appearance'
+import { useSelector } from 'react-redux'
 import { ColorDefinitions, getTheme } from 'src/utils/styles/themes'
+import { getSettingsTheme } from '../slices/settingsSlice'
 
-const osTheme = Appearance.getColorScheme() as 'light' | 'dark'
-
-export const ManageThemeContext: React.Context<{
+type ContextType = {
   mode: 'light' | 'dark'
   theme: { [key in ColorDefinitions]: string }
-  toggle: () => void
-}> = createContext({
-  mode: osTheme,
-  theme: getTheme(osTheme),
-  toggle: () => {}
+  setTheme: (theme: 'light' | 'dark') => void
+}
+
+export const ManageThemeContext = createContext<ContextType>({
+  mode: 'light',
+  theme: getTheme('light'),
+  setTheme: () => {}
 })
 
 export const useTheme = () => useContext(ManageThemeContext)
 
 const ThemeManager: React.FC = ({ children }) => {
-  const [mode, setMode] = useState(osTheme)
-  const systemTheme = useColorScheme()
+  const userTheme = useSelector(getSettingsTheme)
+  const currentMode =
+    userTheme === 'auto'
+      ? (Appearance.getColorScheme() as 'light' | 'dark')
+      : userTheme
 
-  const toggleTheme = () => {
-    mode === 'light' ? setMode('dark') : setMode('light')
-  }
+  const [mode, setMode] = useState(currentMode)
+
+  const setTheme = (theme: 'light' | 'dark') => setMode(theme)
 
   useEffect(() => {
-    setMode(systemTheme === 'no-preference' ? 'light' : systemTheme)
-  }, [systemTheme])
+    setMode(currentMode)
+  }, [currentMode])
 
   return (
     <ManageThemeContext.Provider
       value={{
         mode: mode,
         theme: getTheme(mode),
-        toggle: toggleTheme
+        setTheme: setTheme
       }}
     >
       {children}