delete ThemeContext.ts and move logic to ThemeContext.tsx

Author: jenny-s51

clients/ui/frontend/src/app/MUIThemeContext.ts

@@ -2,12 +2,21 @@ import * as React from 'react';
 import { createTheme } from '@mui/material';
 import { ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
 import { isMUITheme, Theme } from '~/shared/utilities/const';
-import { ThemeContext } from './MUIThemeContext';
 
 type ThemeProviderProps = {
   children: React.ReactNode;
 };
 
+type ThemeContextProps = {
+  isMUITheme: boolean;
+};
+
+export const ThemeContext = React.createContext({
+  isMUITheme: false,
+});
+
+export const useThemeContext = (): ThemeContextProps => React.useContext(ThemeContext);
+
 const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
   const themeValue = React.useMemo(() => ({ isMUITheme: isMUITheme() }), []);
   const createMUITheme = React.useMemo(() => createTheme({ cssVariables: true }), []);

clients/ui/frontend/src/app/ThemeContext.tsx

@@ -7,7 +7,7 @@ import { ProjectObjectType, typedEmptyImage } from '~/shared/components/design/u
 import { ModelRegistryContextProvider } from '~/app/context/ModelRegistryContext';
 import TitleWithIcon from '~/shared/components/design/TitleWithIcon';
 import KubeflowDocs from '~/shared/components/KubeflowDocs';
-import { useThemeContext } from '~/app/MUIThemeContext';
+import { useThemeContext } from '~/app/ThemeContext';
 import EmptyModelRegistryState from './screens/components/EmptyModelRegistryState';
 import InvalidModelRegistry from './screens/InvalidModelRegistry';
 import ModelRegistrySelectorNavigator from './screens/ModelRegistrySelectorNavigator';