RI-7754 detect system color change (#5268)

* add useSystemThemeListener.ts, it should detect system change

References: #RI-7754

Author: pd-redis

redisinsight/ui/src/App.tsx

@@ -8,6 +8,7 @@ import { removePagePlaceholder } from 'uiSrc/utils'
 import MonacoLanguages from 'uiSrc/components/monaco-laguages'
 import AppInit from 'uiSrc/components/init/AppInit'
 import { Page, PageBody } from 'uiSrc/components/base/layout/page'
+import { useSystemThemeListener } from 'uiSrc/services/hooks/useSystemThemeListener'
 import { Pages, Theme } from './constants'
 import { themeService } from './services'
 import {
@@ -48,6 +49,7 @@ const App = ({ children }: { children?: ReactElement[] }) => {
       removePagePlaceholder()
     }
   }, [serverLoading])
+  useSystemThemeListener()
   return (
     <div className="main-container">
       <MonacoEnvironmentInitializer />

redisinsight/ui/src/services/hooks/useSystemThemeListener.ts

@@ -0,0 +1,25 @@
+import { useEffect } from 'react'
+import { Theme, THEME_MATCH_MEDIA_DARK } from 'uiSrc/constants'
+import { useThemeContext } from 'uiSrc/contexts/themeContext'
+
+/**
+ * Hook that listens to OS system theme changes
+ * and updates the theme context when user has System theme selected.
+ */
+export const useSystemThemeListener = () => {
+  const { usingSystemTheme, changeTheme } = useThemeContext()
+
+  useEffect(() => {
+    const handleSystemThemeChange = () => {
+      changeTheme(Theme.System)
+    }
+    const mediaQuery = window.matchMedia?.(THEME_MATCH_MEDIA_DARK)
+    if (usingSystemTheme && mediaQuery) {
+      mediaQuery.addEventListener('change', handleSystemThemeChange)
+    }
+
+    return () => {
+      mediaQuery?.removeEventListener('change', handleSystemThemeChange)
+    }
+  }, [usingSystemTheme, changeTheme])
+}