Merge remote-tracking branch 'origin/main' into APL-1200

Author: svcAPLBot

src/components/AccountPopover.tsx

@@ -61,6 +61,7 @@ export default function AccountPopover({ email }: Props) {
           p: 0,
           mt: 1.5,
           ml: 0.75,
+          width: 300,
           '& .MuiMenuItem-root': {
             typography: 'body2',
             borderRadius: 0.75,

src/components/SettingMode.tsx

@@ -1,6 +1,6 @@
 // @mui
 import { styled } from '@mui/material/styles'
-import { CardActionArea, Grid, RadioGroup } from '@mui/material'
+import { CardActionArea, Grid, RadioGroup, Tooltip } from '@mui/material'
 import useSettings from 'hooks/useSettings'
 //
 import Iconify from './Iconify'
@@ -9,7 +9,7 @@ import BoxMask from './BoxMask'
 // ----------------------------------------------------------------------
 
 const BoxStyle = styled(CardActionArea)(({ theme }) => ({
-  height: 72,
+  aspectRatio: '1',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -23,26 +23,43 @@ const BoxStyle = styled(CardActionArea)(({ theme }) => ({
 export default function SettingMode() {
   const { themeMode, onChangeMode } = useSettings()
 
+  const modes = ['light', 'dark', 'system']
+  const icons = ['ph:sun-duotone', 'ph:moon-duotone', 'ph:monitor-duotone']
+
+  const getBackgroundColor = (mode: string) => {
+    if (mode === 'light') return 'common.white'
+    if (mode === 'dark') return 'grey.800'
+    return 'grey.600'
+  }
+
+  const getModeLabel = (mode: string) => {
+    return mode.charAt(0).toUpperCase() + mode.slice(1)
+  }
+
   return (
     <RadioGroup name='themeMode' value={themeMode} onChange={onChangeMode}>
       <Grid dir='ltr' container spacing={2.5}>
-        {['light', 'dark'].map((mode, index) => {
+        {modes.map((mode, index) => {
           const isSelected = themeMode === mode
 
           return (
-            <Grid key={mode} item xs={6}>
-              <BoxStyle
-                sx={{
-                  bgcolor: mode === 'light' ? 'common.white' : 'grey.800',
-                  ...(isSelected && {
-                    color: 'primary.main',
-                    boxShadow: (theme) => theme.customShadows.z20,
-                  }),
-                }}
-              >
-                <Iconify icon={index === 0 ? 'ph:sun-duotone' : 'ph:moon-duotone'} width={28} height={28} />
-                <BoxMask value={mode} />
-              </BoxStyle>
+            <Grid key={mode} item xs={4}>
+              <Tooltip title={getModeLabel(mode)} arrow placement='bottom'>
+                <span>
+                  <BoxStyle
+                    sx={{
+                      bgcolor: getBackgroundColor(mode),
+                      ...(isSelected && {
+                        color: 'primary.main',
+                        boxShadow: (theme) => theme.customShadows.z20,
+                      }),
+                    }}
+                  >
+                    <Iconify icon={icons[index]} width={28} height={28} />
+                    <BoxMask value={mode} />
+                  </BoxStyle>
+                </span>
+              </Tooltip>
             </Grid>
           )
         })}

src/components/SettingsType.ts

@@ -12,7 +12,7 @@ type ColorVariants = {
 }
 
 export type ThemeView = 'platform' | 'team'
-export type ThemeMode = 'light' | 'dark'
+export type ThemeMode = 'light' | 'dark' | 'system'
 export type ThemeContrast = 'default' | 'bold'
 export type ThemeLayout = 'vertical' | 'horizontal'
 export type ThemeColorPresets = 'default' | 'purple' | 'cyan' | 'blue' | 'orange' | 'red'

src/config.ts

@@ -40,7 +40,7 @@ export const cookiesKey = {
 
 export const defaultSettings: SettingsValueProps = {
   themeView: 'platform',
-  themeMode: 'dark',
+  themeMode: 'system',
   themeContrast: 'default',
   themeLayout: 'horizontal',
   themeColorPresets: 'cyan',

src/contexts/SettingsContext.tsx

@@ -76,9 +76,12 @@ function SettingsProvider({ children, defaultSettings }: SettingsProviderProps)
   // Mode
 
   const onToggleMode = () => {
+    const modes: ThemeMode[] = ['light', 'dark', 'system']
+    const currentIndex = modes.indexOf(settings.themeMode)
+    const nextIndex = (currentIndex + 1) % modes.length
     setSettings({
       ...settings,
-      themeMode: settings.themeMode === 'light' ? 'dark' : 'light',
+      themeMode: modes[nextIndex],
     })
   }
 

src/theme/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useMemo } from 'react'
+import { ReactNode, useEffect, useMemo, useState } from 'react'
 // @mui
 import { CssBaseline } from '@mui/material'
 import { ThemeProvider as MUIThemeProvider, ThemeOptions, createTheme } from '@mui/material/styles'
@@ -19,7 +19,24 @@ type Props = {
 export default function AppThemeProvider({ children }: Props) {
   const { themeMode } = useSettings()
 
-  const isLight = themeMode === 'light'
+  const [systemPreference, setSystemPreference] = useState<'light' | 'dark'>(() => {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  })
+
+  useEffect(() => {
+    if (themeMode !== 'system') return undefined
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const handler = (e: MediaQueryListEvent) => {
+      setSystemPreference(e.matches ? 'dark' : 'light')
+    }
+
+    mediaQuery.addEventListener('change', handler)
+    return () => mediaQuery.removeEventListener('change', handler)
+  }, [themeMode])
+
+  const actualMode = themeMode === 'system' ? systemPreference : themeMode
+  const isLight = actualMode === 'light'
 
   const themeOptions: ThemeOptions = useMemo(
     () => ({