refactor(shell): move theme definition to its own file

src/components/Shell/Shell.tsx

@@ -8,7 +8,7 @@ import {
   useState,
 } from 'react'
 import CssBaseline from '@mui/material/CssBaseline'
-import { ThemeProvider, createTheme } from '@mui/material/styles'
+import { ThemeProvider } from '@mui/material/styles'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 import { AlertColor } from '@mui/material/Alert'
@@ -45,6 +45,7 @@ import {
   EnvironmentUnsupportedDialog,
   isEnvironmentSupported,
 } from './EnvironmentUnsupportedDialog'
+import { useShellTheme } from './useShellTheme'
 
 export interface ShellProps extends PropsWithChildren {
   userPeerId: string
@@ -57,17 +58,7 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
   const { getUserSettings, updateUserSettings } = useContext(SettingsContext)
   const isEmbedded = queryParams.get(QueryParamKeys.IS_EMBEDDED) !== null
 
-  const { colorMode } = getUserSettings()
+  const theme = useShellTheme()
-
-  const theme = useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode: colorMode,
-        },
-      }),
-    [colorMode]
-  )
 
   const [windowWidth] = useWindowSize()
   const defaultSidebarsOpen = windowWidth >= theme.breakpoints.values.lg

src/components/Shell/useShellTheme.ts

@@ -0,0 +1,23 @@
+import { SettingsContext } from 'contexts/SettingsContext'
+import { useContext, useMemo } from 'react'
+import { createTheme } from '@mui/material/styles'
+
+export const useShellTheme = () => {
+  const { getUserSettings } = useContext(SettingsContext)
+  const { colorMode } = getUserSettings()
+
+  const theme = useMemo(
+    () =>
+      // NOTE: You can make theme customizations here. It is recommended to use
+      // the default theme viewer as a reference:
+      // https://mui.com/material-ui/customization/default-theme/
+      createTheme({
+        palette: {
+          mode: colorMode,
+        },
+      }),
+    [colorMode]
+  )
+
+  return theme
+}