diff --git a/src/components/theme-toggler/theme-toggler.component.js b/src/components/theme-toggler/theme-toggler.component.js index 8e041f0..59aef70 100644 --- a/src/components/theme-toggler/theme-toggler.component.js +++ b/src/components/theme-toggler/theme-toggler.component.js @@ -6,11 +6,13 @@ import useMediaQuery from '@material-ui/core/useMediaQuery'; import DarkModeIcon from '@material-ui/icons/Brightness3'; import LightModeIcon from '@material-ui/icons/Brightness7'; -export default function ThemeToggler({ isDarkMode, toggleTheme, initializeTheme }) { +export default function ThemeToggler({ isDarkMode, isInitialized, toggleTheme, initializeTheme }) { const darkModeBySystemPreferences = useMediaQuery('(prefers-color-scheme: dark)'); useEffect(() => { - initializeTheme(darkModeBySystemPreferences); - }, [initializeTheme, darkModeBySystemPreferences]); + if (!isInitialized) { + initializeTheme(darkModeBySystemPreferences); + } + }, [isInitialized, initializeTheme, darkModeBySystemPreferences]); return ( {isDarkMode && } diff --git a/src/components/theme-toggler/theme-toggler.container.js b/src/components/theme-toggler/theme-toggler.container.js index 2b200c6..bffe2ec 100644 --- a/src/components/theme-toggler/theme-toggler.container.js +++ b/src/components/theme-toggler/theme-toggler.container.js @@ -1,11 +1,12 @@ import { connect } from 'react-redux'; import ThemeToggler from './theme-toggler.component'; -import { toggleTheme, initializeTheme, isDarkMode } from '../../ducks/theme-toggler.duck'; +import { toggleTheme, initializeTheme, isDarkMode, isInitialized } from '../../ducks/theme-toggler.duck'; function mapStateToProps(state) { return { isDarkMode: isDarkMode(state), + isInitialized: isInitialized(state), }; } diff --git a/src/ducks/theme-toggler.duck.js b/src/ducks/theme-toggler.duck.js index d753710..d638201 100644 --- a/src/ducks/theme-toggler.duck.js +++ b/src/ducks/theme-toggler.duck.js @@ -3,6 +3,7 @@ export const THEME_INITIALIZE = 'grapher/Theme/INITIALIZE'; const initialState = { darkMode: undefined, + initialized: false, }; export default function reducer(state = initialState, action) { @@ -11,6 +12,7 @@ export default function reducer(state = initialState, action) { return { ...state, darkMode: action.payload, + initialized: true, }; } case THEME_TOGGLE: { @@ -41,3 +43,7 @@ export function initializeTheme(darkMode) { export function isDarkMode(state) { return state.theme.darkMode; } + +export function isInitialized(state) { + return state.theme.initialized; +}