RI-7754: improve system theme handling

redisinsight/ui/src/App.tsx

@@ -19,7 +19,6 @@ import {
 } from './components'
 import { ThemeProvider } from './contexts/themeContext'
 import MainComponent from './components/main/MainComponent'
-import ThemeComponent from './components/theme/ThemeComponent'
 import MonacoEnvironmentInitializer from './components/MonacoEnvironmentInitializer/MonacoEnvironmentInitializer'
 import GlobalDialogs from './components/global-dialogs'
 import NotFoundErrorPage from './pages/not-found-error/NotFoundErrorPage'
@@ -51,7 +50,6 @@ const App = ({ children }: { children?: ReactElement[] }) => {
   }, [serverLoading])
   return (
     <div className="main-container">
-      <ThemeComponent />
       <MonacoEnvironmentInitializer />
       <Switch>
         <Route exact path={Pages.notFound} component={NotFoundErrorPage} />

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,
@@ -44,6 +44,10 @@
   },
 }
 
+export const isValidTheme = (theme: unknown): theme is Theme => {
+  return typeof theme === 'string' && THEME_NAMES.includes(theme as Theme)
+}
+
 export const ThemeContext = React.createContext(defaultState)
 
 export class ThemeProvider extends React.Component<Props> {
@@ -57,7 +61,7 @@
 
     if (queryTheme) {
       theme = queryTheme
-    } else if (storedThemeValue && THEME_NAMES.includes(storedThemeValue)) {
+    } else if (storedThemeValue && isValidTheme(storedThemeValue)) {
       theme = storedThemeValue
     }
 
@@ -120,5 +124,9 @@
     )
   }
 }
+
+export const useThemeContext = () => {
+  return useContext(ThemeContext)
+}
 
 export default ThemeProvider