diff --git a/src/utils/styles/ThemeManager.tsx b/src/utils/styles/ThemeManager.tsx index 83af5fa5..123ac357 100644 --- a/src/utils/styles/ThemeManager.tsx +++ b/src/utils/styles/ThemeManager.tsx @@ -1,8 +1,9 @@ import React, { createContext, useContext, useEffect, useState } from 'react' -import { useColorScheme } from 'react-native' +import { Appearance } from 'react-native' import { useSelector } from 'react-redux' import { ColorDefinitions, getTheme } from '@utils/styles/themes' import { getSettingsTheme } from '@utils/slices/settingsSlice' +import { throttle } from 'lodash' type ContextType = { mode: 'light' | 'dark' @@ -18,8 +19,34 @@ export const ManageThemeContext = createContext({ export const useTheme = () => useContext(ManageThemeContext) +const useColorSchemeDelay = (delay = 250) => { + const [colorScheme, setColorScheme] = React.useState( + Appearance.getColorScheme() + ) + const onColorSchemeChange = React.useCallback( + throttle( + ({ colorScheme }) => { + setColorScheme(colorScheme) + }, + delay, + { + leading: false + } + ), + [] + ) + React.useEffect(() => { + Appearance.addChangeListener(onColorSchemeChange) + return () => { + onColorSchemeChange.cancel() + Appearance.removeChangeListener(onColorSchemeChange) + } + }, []) + return colorScheme +} + const ThemeManager: React.FC = ({ children }) => { - const osTheme = useColorScheme() + const osTheme = useColorSchemeDelay() const userTheme = useSelector(getSettingsTheme) const currentMode = userTheme === 'auto' ? (osTheme as 'light' | 'dark') : userTheme