From 1ee6b5f974c498f40f2ce90f98a4776951100746 Mon Sep 17 00:00:00 2001 From: Alexey Kunitsky Date: Tue, 14 Nov 2023 11:00:44 +0100 Subject: [PATCH] fix: wrap watcher into useEffect --- packages/bruno-app/src/providers/Theme/index.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/bruno-app/src/providers/Theme/index.js b/packages/bruno-app/src/providers/Theme/index.js index 1a639c464..724ef4fa6 100644 --- a/packages/bruno-app/src/providers/Theme/index.js +++ b/packages/bruno-app/src/providers/Theme/index.js @@ -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);