fix: wrap watcher into useEffect

This commit is contained in:
Alexey Kunitsky 2023-11-14 11:00:44 +01:00
parent 8130de23ff
commit 1ee6b5f974

View File

@ -1,7 +1,7 @@
import themes from 'themes/index';
import useLocalStorage from 'hooks/useLocalStorage/index';
import { createContext, useContext, useState } from 'react';
import { createContext, useContext, useEffect, useState } from 'react';
import { ThemeProvider as SCThemeProvider } from 'styled-components';
export const ThemeContext = createContext();
@ -10,10 +10,12 @@ export const ThemeProvider = (props) => {
const [displayedTheme, setDisplayedTheme] = useState(isBrowserThemeLight ? 'light' : 'dark');
const [storedTheme, setStoredTheme] = useLocalStorage('bruno.theme', 'system');
window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
if (storedTheme !== 'system') return;
setDisplayedTheme(e.matches ? 'light' : 'dark');
});
useEffect(() => {
window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
if (storedTheme !== 'system') return;
setDisplayedTheme(e.matches ? 'light' : 'dark');
});
}, []);
const theme = storedTheme === 'system' ? themes[displayedTheme] : themes[storedTheme];
const themeOptions = Object.keys(themes);