RI-7754: improve system theme handling

redisinsight/ui/src/components/theme/ThemeComponent.tsx

@@ -1,18 +1,18 @@
-import React, { useContext, useEffect } from 'react'
+import React, { useEffect } from 'react'
 import {
   BrowserStorageItem,
   Theme,
   THEME_MATCH_MEDIA_DARK,
 } from 'uiSrc/constants'
 import { localStorageService } from 'uiSrc/services'
-import { ThemeContext } from 'uiSrc/contexts/themeContext'
+import { useThemeContext } from 'uiSrc/contexts/themeContext'
 
 const ThemeComponent = () => {
-  const themeContext = useContext(ThemeContext)
+  const themeContext = useThemeContext()
   useEffect(() => {
-    const handler = (event) => {
+    const handler = () => {
       let theme = localStorageService.get(BrowserStorageItem.theme)
-      if (theme === Theme.System) {
+      if (theme === Theme.System && themeContext.usingSystemTheme) {
         themeContext.changeTheme(theme)
       }
     }

redisinsight/ui/src/contexts/themeContext.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { ThemeProvider as StyledThemeProvider } from 'styled-components'
 import {
   theme as redisUiOldTheme,
@@ -121,4 +121,12 @@
   }
 }
 
+export const useThemeContext = () => {
+  const context = useContext(ThemeContext)
+  if (context === undefined) {
+    throw new Error('useThemeContext must be used within a ThemeProvider')
+  }
+  return context
+}
+
 export default ThemeProvider