feat: Implement Dark mode support

Signed-off-by: Sneha Das <154408198+Snehadas2005@users.noreply.github.com>

Author: Snehadas2005

workspaces/frontend/src/app/components/ThemeAwareSearchInput.tsx

@@ -4,7 +4,7 @@ import {
   SearchInputProps,
 } from '@patternfly/react-core/dist/esm/components/SearchInput';
 import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput';
-import { useThemeContext } from 'mod-arch-kubeflow';
+import { useThemeContext } from '~/app/hooks/useThemeContext';
 import FormFieldset from '~/app/components/FormFieldset';
 
 type ThemeAwareSearchInputProps = Omit<SearchInputProps, 'onChange' | 'onClear'> & {

workspaces/frontend/src/app/context/ThemeContext.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
+import { Theme } from 'mod-arch-kubeflow';
+import '~/style/MUI-theme.scss';
+
+export type ThemeContextProps = {
+  isMUITheme: boolean;
+  isDarkMode: boolean;
+  toggleDarkMode: () => void;
+};
+
+export const ThemeContext = React.createContext<ThemeContextProps>({
+  isMUITheme: false,
+  isDarkMode: false,
+  toggleDarkMode: () => {},
+});
+
+const DARK_MODE_STORAGE_KEY = 'kubeflow-dark-mode';
+
+export const ThemeProvider: React.FC<{ theme?: Theme; children: React.ReactNode }> = ({
+  theme = Theme.Patternfly,
+  children,
+}) => {
+  const [isDarkMode, setIsDarkMode] = React.useState<boolean>(() => {
+    const saved = localStorage.getItem(DARK_MODE_STORAGE_KEY);
+    return saved === 'true';
+  });
+
+  const toggleDarkMode = React.useCallback(() => {
+    setIsDarkMode((prev) => {
+      const newVal = !prev;
+      localStorage.setItem(DARK_MODE_STORAGE_KEY, String(newVal));
+      return newVal;
+    });
+  }, []);
+
+  const muiTheme = React.useMemo(
+    () =>
+      createTheme({
+        cssVariables: true,
+        palette: {
+          mode: isDarkMode ? 'dark' : 'light',
+        },
+      }),
+    [isDarkMode],
+  );
+
+  React.useEffect(() => {
+    const html = document.documentElement;
+
+    if (theme === Theme.MUI) {
+      html.classList.add(Theme.MUI);
+    } else {
+      html.classList.remove(Theme.MUI);
+    }
+
+    if (isDarkMode) {
+      html.classList.add('pf-v6-theme-dark');
+    } else {
+      html.classList.remove('pf-v6-theme-dark');
+    }
+  }, [theme, isDarkMode]);
+
+  const value = React.useMemo(
+    () => ({
+      isMUITheme: theme === Theme.MUI,
+      isDarkMode,
+      toggleDarkMode,
+    }),
+    [theme, isDarkMode, toggleDarkMode],
+  );
+
+  return (
+    <ThemeContext.Provider value={value}>
+      {theme === Theme.MUI ? (
+        <MUIThemeProvider theme={muiTheme}>{children}</MUIThemeProvider>
+      ) : (
+        children
+      )}
+    </ThemeContext.Provider>
+  );
+};

workspaces/frontend/src/app/hooks/useThemeContext.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { ThemeContext } from '~/app/context/ThemeContext';
+
+export const useThemeContext = () => {
+  const context = React.useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useThemeContext must be used within a ThemeProvider');
+  }
+  return context;
+};

workspaces/frontend/src/app/pages/WorkspaceKinds/Form/EditableLabels.tsx

@@ -11,7 +11,7 @@ import inlineEditStyles from '@patternfly/react-styles/css/components/InlineEdit
 import { css } from '@patternfly/react-styles';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import { TrashAltIcon } from '@patternfly/react-icons/dist/esm/icons/trash-alt-icon';
-import { useThemeContext } from 'mod-arch-kubeflow';
+import { useThemeContext } from '~/app/hooks/useThemeContext';
 import { WorkspacekindsOptionLabel } from '~/generated/data-contracts';
 import ThemeAwareFormGroupWrapper from '~/shared/components/ThemeAwareFormGroupWrapper';
 

workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormResource.tsx

@@ -15,7 +15,7 @@ import { Checkbox } from '@patternfly/react-core/dist/esm/components/Checkbox';
 import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/esm/components/HelperText';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import { TrashAltIcon } from '@patternfly/react-icons/dist/esm/icons/trash-alt-icon';
-import { useThemeContext } from 'mod-arch-kubeflow';
+import { useThemeContext } from '~/app/hooks/useThemeContext';
 import ThemeAwareFormGroupWrapper from '~/shared/components/ThemeAwareFormGroupWrapper';
 import { generateUniqueId } from '~/app/pages/WorkspaceKinds/Form/helpers';
 import { isMemoryLimitLarger } from '~/shared/utilities/valueUnits';

workspaces/frontend/src/app/pages/Workspaces/Form/properties/secrets/SecretsCreateModal.tsx

@@ -17,7 +17,7 @@ import { Select } from '@patternfly/react-core/dist/esm/components/Select';
 import { MenuToggle } from '@patternfly/react-core/dist/esm/components/MenuToggle';
 import { HelperText } from '@patternfly/react-core/dist/esm/components/HelperText';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-import { useThemeContext } from 'mod-arch-kubeflow';
+import { useThemeContext } from '~/app/hooks/useThemeContext';
 import { useNotebookAPI } from '~/app/hooks/useNotebookAPI';
 import { useNamespaceSelectorWrapper } from '~/app/hooks/useNamespaceSelectorWrapper';
 import { SecretsSecretListItem } from '~/generated/data-contracts';

workspaces/frontend/src/app/standalone/NavBar.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Brand } from '@patternfly/react-core/dist/esm/components/Brand';
+import { Button } from '@patternfly/react-core/dist/esm/components/Button';
 import {
   Dropdown,
   DropdownItem,
@@ -26,9 +27,11 @@ import {
 } from '@patternfly/react-core/dist/esm/components/Toolbar';
 import { SimpleSelect } from '@patternfly/react-templates';
 import { BarsIcon } from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import { MoonIcon } from '@patternfly/react-icons/dist/esm/icons/moon-icon';
+import { SunIcon } from '@patternfly/react-icons/dist/esm/icons/sun-icon';
 import { useNamespaceSelector, useModularArchContext } from 'mod-arch-core';
-import { useThemeContext } from 'mod-arch-kubeflow';
 import { images as sharedImages } from 'mod-arch-shared';
+import { useThemeContext } from '~/app/hooks/useThemeContext';
 
 interface NavBarProps {
   username?: string;
@@ -38,7 +41,7 @@ interface NavBarProps {
 const NavBar: React.FC<NavBarProps> = ({ username, onLogout }) => {
   const { namespaces, preferredNamespace, updatePreferredNamespace } = useNamespaceSelector();
   const { config } = useModularArchContext();
-  const { isMUITheme } = useThemeContext();
+  const { isMUITheme, isDarkMode, toggleDarkMode } = useThemeContext();
 
   const [userMenuOpen, setUserMenuOpen] = useState(false);
 
@@ -99,8 +102,18 @@ const NavBar: React.FC<NavBarProps> = ({ username, onLogout }) => {
                 />
               </ToolbarItem>
             </ToolbarGroup>
-            {username && (
-              <ToolbarGroup variant="action-group-plain" align={{ default: 'alignEnd' }}>
+            <ToolbarGroup variant="action-group-plain" align={{ default: 'alignEnd' }}>
+              {isMUITheme && (
+                <ToolbarItem>
+                  <Button
+                    variant="plain"
+                    aria-label={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'}
+                    onClick={toggleDarkMode}
+                    icon={isDarkMode ? <SunIcon /> : <MoonIcon />}
+                  />
+                </ToolbarItem>
+              )}
+              {username && (
                 <ToolbarItem>
                   <Dropdown
                     popperProps={{ position: 'right' }}
@@ -122,8 +135,8 @@ const NavBar: React.FC<NavBarProps> = ({ username, onLogout }) => {
                     <DropdownList>{userMenuItems}</DropdownList>
                   </Dropdown>
                 </ToolbarItem>
-              </ToolbarGroup>
-            )}
+              )}
+            </ToolbarGroup>
           </ToolbarContent>
         </Toolbar>
       </MastheadContent>

workspaces/frontend/src/app/standalone/NavSidebar.tsx

@@ -8,7 +8,8 @@ import {
   NavList,
 } from '@patternfly/react-core/dist/esm/components/Nav';
 import { PageSidebar, PageSidebarBody } from '@patternfly/react-core/dist/esm/components/Page';
-import { useThemeContext, images as kubeflowImages } from 'mod-arch-kubeflow';
+import { images as kubeflowImages } from 'mod-arch-kubeflow';
+import { useThemeContext } from '~/app/hooks/useThemeContext';
 import { isNavDataGroup, NavDataHref, NavDataGroup } from '~/app/standalone/types';
 import { useTypedLocation } from '~/app/routerHelper';
 import { useNavData } from '~/app/AppRoutes';

workspaces/frontend/src/index.tsx

@@ -7,7 +7,7 @@ import {
   ModularArchContextProvider,
   NotificationContextProvider,
 } from 'mod-arch-core';
-import { ThemeProvider } from 'mod-arch-kubeflow';
+import { ThemeProvider } from '~/app/context/ThemeContext';
 import App from './app/App';
 import {
   DEPLOYMENT_MODE,

workspaces/frontend/src/shared/components/DeleteModal.tsx

@@ -13,7 +13,7 @@ import { Stack, StackItem } from '@patternfly/react-core/dist/esm/layouts/Stack'
 import { FlexItem } from '@patternfly/react-core/dist/esm/layouts/Flex';
 import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/esm/components/HelperText';
 import { default as ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import { useThemeContext } from 'mod-arch-kubeflow';
+import { useThemeContext } from '~/app/hooks/useThemeContext';
 import { ActionButton } from '~/shared/components/ActionButton';
 import { ErrorAlert } from '~/shared/components/ErrorAlert';
 import ThemeAwareFormGroupWrapper from '~/shared/components/ThemeAwareFormGroupWrapper';