[grid] UI Light/Dark Mode Toggle

Signed-off-by: Viet Nguyen Duc <[email protected]>

Author: VietND96

javascript/grid-ui/src/components/ThemeToggle/ThemeToggle.tsx

@@ -0,0 +1,54 @@
+// Licensed to the Software Freedom Conservancy (SFC) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The SFC licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import React from 'react'
+import { IconButton, Tooltip } from '@mui/material'
+import { LightMode, DarkMode, AutoMode } from '@mui/icons-material'
+import { useTheme } from '../../contexts/ThemeContext'
+
+export const ThemeToggle: React.FC = () => {
+  const { themeMode, setThemeMode } = useTheme()
+
+  const handleClick = () => {
+    const nextMode = themeMode === 'light' ? 'dark' : themeMode === 'dark' ? 'system' : 'light'
+    setThemeMode(nextMode)
+  }
+
+  const getIcon = () => {
+    if (themeMode === 'light') return <LightMode />
+    if (themeMode === 'dark') return <DarkMode />
+    return <AutoMode />
+  }
+
+  const getTooltip = () => {
+    if (themeMode === 'light') return 'Switch to dark mode'
+    if (themeMode === 'dark') return 'Switch to system mode'
+    return 'Switch to light mode'
+  }
+
+  return (
+    <Tooltip title={getTooltip()}>
+      <IconButton
+        color="inherit"
+        onClick={handleClick}
+        aria-label="Toggle theme"
+      >
+        {getIcon()}
+      </IconButton>
+    </Tooltip>
+  )
+}

javascript/grid-ui/src/components/TopBar/TopBar.tsx

@@ -27,6 +27,7 @@ import { Menu as MenuIcon } from '@mui/icons-material'
 import { Help as HelpIcon } from '@mui/icons-material'
 import React from 'react'
 import seleniumGridLogo from '../../assets/selenium-grid-logo.svg'
+import { ThemeToggle } from '../ThemeToggle/ThemeToggle'
 
 const AppBar = styled(MuiAppBar)(({ theme }) => ({
   zIndex: theme.zIndex.drawer + 1,
@@ -93,14 +94,16 @@ function TopBar (props): JSX.Element {
                 component="h1"
                 variant="h4"
                 noWrap
+                sx={{ color: (theme) => theme.palette.mode === 'dark' ? 'primary.main' : 'inherit' }}
               >
                 Selenium Grid
               </Typography>
-              <Typography variant="body2">
+              <Typography variant="body2" sx={{ color: (theme) => theme.palette.mode === 'dark' ? 'primary.main' : 'inherit' }}>
                 {subheader}
               </Typography>
             </Box>
           </Box>
+          <ThemeToggle />
         </Toolbar>
       </AppBar>
     </Box>

javascript/grid-ui/src/contexts/ThemeContext.tsx

@@ -0,0 +1,68 @@
+// Licensed to the Software Freedom Conservancy (SFC) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The SFC licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+
+import React, { createContext, useContext, useState, useEffect } from 'react'
+import { ThemeProvider } from '@mui/material/styles'
+import { CssBaseline } from '@mui/material'
+import { lightTheme, darkTheme } from '../theme/themes'
+
+type ThemeMode = 'light' | 'dark' | 'system'
+
+const ThemeContext = createContext<{
+  themeMode: ThemeMode
+  setThemeMode: (mode: ThemeMode) => void
+}>({
+  themeMode: 'system',
+  setThemeMode: () => {}
+})
+
+export const useTheme = () => useContext(ThemeContext)
+
+export const CustomThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [themeMode, setThemeMode] = useState<ThemeMode>('system')
+  const [systemPrefersDark, setSystemPrefersDark] = useState(false)
+
+  useEffect(() => {
+    const saved = localStorage.getItem('theme-mode') as ThemeMode
+    if (saved) setThemeMode(saved)
+    setSystemPrefersDark(window.matchMedia('(prefers-color-scheme: dark)').matches)
+  }, [])
+
+  useEffect(() => {
+    localStorage.setItem('theme-mode', themeMode)
+  }, [themeMode])
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const handler = (e: MediaQueryListEvent) => setSystemPrefersDark(e.matches)
+    mediaQuery.addEventListener('change', handler)
+    return () => mediaQuery.removeEventListener('change', handler)
+  }, [])
+
+  const isDark = themeMode === 'dark' || (themeMode === 'system' && systemPrefersDark)
+  const currentTheme = isDark ? darkTheme : lightTheme
+
+  return (
+    <ThemeContext.Provider value={{ themeMode, setThemeMode }}>
+      <ThemeProvider theme={currentTheme}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </ThemeContext.Provider>
+  )
+}

javascript/grid-ui/src/hooks/useTheme.tsx

@@ -0,0 +1,61 @@
+// Licensed to the Software Freedom Conservancy (SFC) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The SFC licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import { useState, useEffect } from 'react'
+import { lightTheme, darkTheme } from '../theme/themes'
+
+type ThemeMode = 'light' | 'dark' | 'system'
+
+export const useTheme = () => {
+  const [themeMode, setThemeMode] = useState<ThemeMode>('system')
+  const [systemPrefersDark, setSystemPrefersDark] = useState(false)
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const saved = localStorage.getItem('theme-mode') as ThemeMode
+      if (saved) setThemeMode(saved)
+      setSystemPrefersDark(window.matchMedia('(prefers-color-scheme: dark)').matches)
+    }
+  }, [])
+
+
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('theme-mode', themeMode)
+    }
+  }, [themeMode])
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+      const handler = (e: MediaQueryListEvent) => setSystemPrefersDark(e.matches)
+      mediaQuery.addEventListener('change', handler)
+      return () => mediaQuery.removeEventListener('change', handler)
+    }
+  }, [])
+
+  const isDark = themeMode === 'dark' || (themeMode === 'system' && systemPrefersDark)
+  const currentTheme = isDark ? darkTheme : lightTheme
+
+  return {
+    themeMode,
+    setThemeMode,
+    currentTheme,
+    isDark
+  }
+}

javascript/grid-ui/src/index.tsx

@@ -15,14 +15,13 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import { CssBaseline } from '@mui/material'
-import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles'
+import { StyledEngineProvider } from '@mui/material/styles'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { HashRouter as Router } from 'react-router-dom'
 import App from './App'
 import * as serviceWorker from './serviceWorker'
-import theme from './theme/theme'
+import { CustomThemeProvider } from './contexts/ThemeContext'
 import './index.css'
 
 const root = ReactDOM.createRoot(
@@ -32,12 +31,11 @@ const root = ReactDOM.createRoot(
 root.render(
   <React.StrictMode>
     <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={theme}>
-        <CssBaseline/>
+      <CustomThemeProvider>
         <Router>
           <App/>
         </Router>
-      </ThemeProvider>
+      </CustomThemeProvider>
     </StyledEngineProvider>
   </React.StrictMode>
 )

javascript/grid-ui/src/tests/__mocks__/useTheme.tsx

@@ -0,0 +1,25 @@
+// Licensed to the Software Freedom Conservancy (SFC) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The SFC licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import { lightTheme } from '../../theme/themes'
+
+export const useTheme = jest.fn(() => ({
+  themeMode: 'light',
+  setThemeMode: jest.fn(),
+  currentTheme: lightTheme,
+  isDark: false
+}))

javascript/grid-ui/src/tests/components/ThemeToggle.test.tsx

@@ -0,0 +1,78 @@
+// Licensed to the Software Freedom Conservancy (SFC) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The SFC licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ThemeToggle } from '../../components/ThemeToggle/ThemeToggle'
+import { CustomThemeProvider } from '../../contexts/ThemeContext'
+
+const mockMatchMedia = (matches: boolean) => ({
+  matches,
+  addEventListener: jest.fn(),
+  removeEventListener: jest.fn()
+})
+
+beforeEach(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(() => mockMatchMedia(false))
+  })
+})
+
+it('cycles through theme modes on click', () => {
+  render(
+    <CustomThemeProvider>
+      <ThemeToggle />
+    </CustomThemeProvider>
+  )
+  
+  const button = screen.getByRole('button')
+  
+  // Should start with system mode
+  expect(button).toHaveAttribute('aria-label', 'Toggle theme')
+  
+  // Click to light mode
+  fireEvent.click(button)
+  
+  // Click to dark mode
+  fireEvent.click(button)
+  
+  // Click back to system mode
+  fireEvent.click(button)
+})
+
+it('responds to system preference changes', () => {
+  const listeners: Array<(e: any) => void> = []
+  const mockMediaQuery = {
+    matches: false,
+    addEventListener: jest.fn((_, handler) => listeners.push(handler)),
+    removeEventListener: jest.fn()
+  }
+  
+  window.matchMedia = jest.fn(() => mockMediaQuery)
+  
+  render(
+    <CustomThemeProvider>
+      <ThemeToggle />
+    </CustomThemeProvider>
+  )
+  
+  // Simulate system preference change
+  listeners.forEach(listener => listener({ matches: true }))
+  
+  expect(mockMediaQuery.addEventListener).toHaveBeenCalledWith('change', expect.any(Function))
+})