Remove Context/ColorMode.jsx, all handled by theme now.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r621",
+  "version": "1.0.0-r622",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",

src/Components/About/AboutGuide.jsx

@@ -1,22 +1,20 @@
-import React, {useContext} from 'react'
+import React from 'react'
 import Box from '@mui/material/Box'
-import {useTheme} from '@mui/styles'
-import {ColorModeContext} from '../../Context/ColorMode'
+import useTheme from '@mui/styles/useTheme'
 import CutPlaneIcon from '../../assets/icons/CutPlane.svg'
 import ListIcon from '../../assets/icons/List.svg'
+import LogoBuildings from '../../assets/Logo_Buildings.svg'
 import NotesIcon from '../../assets/icons/Notes.svg'
 import ShareIcon from '../../assets/icons/Share.svg'
-import LogoBuildings from '../../assets/Logo_Buildings.svg'
 
 
 /**
  * A miniature view of the App to show as a guide in the About dialog.
  *
- * @return {React.ReactElement}
+ * @return {React.ReactComponent}
  */
 export default function AboutGuide() {
   const theme = useTheme()
-  const colorMode = useContext(ColorModeContext)
   return (
     <Box
       sx={{
@@ -27,8 +25,7 @@ export default function AboutGuide() {
         margin: '2em 0',
         padding: '.5em 1em .5em .5em',
         color: theme.palette.primary.contrastText,
-        backgroundColor: colorMode.isDay() ? '#E8E8E8' : '#353535',
-        // border: `1px solid ${colorMode.isDay() ? 'Grey' : '#4C4C4C'}`,
+        backgroundColor: theme.palette.primary.background,
       }}
     >
       <Box

src/Components/CutPlaneMenu.jsx

@@ -3,13 +3,13 @@ import {useLocation} from 'react-router-dom'
 import {Vector3} from 'three'
 import Menu from '@mui/material/Menu'
 import MenuItem from '@mui/material/MenuItem'
-import useTheme from '../theme/Theme'
+import useTheme from '@mui/styles/useTheme'
 import useStore from '../store/useStore'
+import debug from '../utils/debug'
 import {addHashParams, getHashParams, getObjectParams, removeHashParams} from '../utils/location'
+import {floatStrTrim, isNumeric} from '../utils/strings'
 import {TooltipIconButton} from './Buttons'
 import CutPlaneIcon from '../assets/icons/CutPlane.svg'
-import {floatStrTrim, isNumeric} from '../utils/strings'
-import debug from '../utils/debug'
 
 
 const PLANE_PREFIX = 'p'
@@ -115,9 +115,10 @@ export default function CutPlaneMenu() {
             transform: 'translateX(-50px)',
           },
           sx: {
+            'color': theme.palette.primary.contrastText,
             '& .Mui-selected': {
-              color: theme.theme.palette.secondary.main,
-              fontWeight: 600,
+              color: theme.palette.primary.highlight,
+              fontWeight: 800,
             },
           },
         }}

src/Components/ExtractLevelsMenu.jsx

@@ -4,9 +4,9 @@ import {Vector3} from 'three'
 import {IFCBUILDINGSTOREY} from 'web-ifc'
 import Menu from '@mui/material/Menu'
 import MenuItem from '@mui/material/MenuItem'
+import useTheme from '@mui/styles/useTheme'
 import useStore from '../store/useStore'
 import {addHashParams, getHashParams, removeHashParams} from '../utils/location'
-import useTheme from '../theme/Theme'
 import {isNumeric} from '../utils/strings'
 import {TooltipIconButton} from './Buttons'
 import LevelsIcon from '../assets/icons/Levels.svg'
@@ -136,7 +136,7 @@ export default function ExtractLevelsMenu({listOfOptions, icon, title}) {
           },
           sx: {
             '& .Mui-selected': {
-              color: theme.theme.palette.secondary.main,
+              color: theme.palette.secondary.main,
               fontWeight: 600,
             },
           },

src/Components/Logo.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import {useTheme} from '@mui/styles'
 import Box from '@mui/material/Box'
+import useTheme from '@mui/styles/useTheme'
 import {TooltipIconButton} from './Buttons'
 import LogoIcon from '../assets/LogoB.svg'
 import PkgJson from '../../package.json'

src/Components/NoContent.jsx

@@ -1,20 +1,18 @@
-import React, {useContext} from 'react'
+import React from 'react'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
-import {ColorModeContext} from '../Context/ColorMode'
+import useTheme from '@mui/styles/useTheme'
 import AttentionIcon from '../assets/icons/Attention.svg'
 
 
 /**
- * Loader contains the ItemPanel and allows for
- * show/hide from the right of the screen.
+ * Loader contains the ItemPanel and allows for show/hide from the
+ * right of the screen.
  *
- * @return {object} React component.
+ * @return {React.Component}
  */
 export default function NoContent() {
-  const theme = useContext(ColorModeContext).getTheme()
-
-
+  const theme = useTheme()
   return (
     <Box sx={{width: '100%'}}>
       <Box sx={{

src/Components/OperationsGroup.jsx

@@ -1,9 +1,8 @@
-import React, {useContext} from 'react'
+import React from 'react'
 import Box from '@mui/material/Box'
 import ButtonGroup from '@mui/material/ButtonGroup'
-import {useTheme} from '@mui/styles'
+import useTheme from '@mui/styles/useTheme'
 import useStore from '../store/useStore'
-import {ColorModeContext} from '../Context/ColorMode'
 import {assertDefined} from '../utils/assert'
 import {hexToRgba} from '../utils/color'
 import AboutControl from './About/AboutControl'
@@ -35,8 +34,6 @@ export default function OperationsGroup({deselectItems}) {
   const cutPlanes = useStore((state) => state.cutPlanes)
   const levelInstance = useStore((state) => state.levelInstance)
   const selectedElement = useStore((state) => state.selectedElement)
-  const colorMode = useContext(ColorModeContext)
-
   const isLoginVisible = useStore((state) => state.isLoginVisible)
   const isCollaborationGroupVisible = useStore((state) => state.isCollaborationGroupVisible)
   const isModelInteractionGroupVisible = useStore((state) => state.isModelInteractionGroupVisible)
@@ -124,9 +121,9 @@ export default function OperationsGroup({deselectItems}) {
       {isSettingsVisible &&
        <ButtonGroup orientation='vertical'>
          <TooltipIconButton
-           title={`${colorMode.isDay() ? 'Night' : 'Day'} theme`}
-           onClick={() => colorMode.toggleColorMode()}
-           icon={colorMode.isDay() ? <MoonIcon/> : <SunIcon/>}
+           title={`${theme.palette.mode === 'light' ? 'Day' : 'Night'} theme`}
+           onClick={() => theme.toggleColorMode()}
+           icon={theme.palette.mode === 'light' ? <MoonIcon/> : <SunIcon/>}
          />
          <AboutControl/>
        </ButtonGroup>

src/Components/SearchBar.jsx

@@ -3,21 +3,20 @@ import {useLocation, useNavigate, useSearchParams} from 'react-router-dom'
 import Box from '@mui/material/Box'
 import InputBase from '@mui/material/InputBase'
 import Paper from '@mui/material/Paper'
-import debug from '../utils/debug'
+import useTheme from '@mui/styles/useTheme'
 import {looksLikeLink, githubUrlOrPathToSharePath} from '../ShareRoutes'
-import useTheme from '../theme/Theme'
+import debug from '../utils/debug'
 import OpenModelControl from './OpenModelControl'
 import {TooltipIconButton} from './Buttons'
-import ClearIcon from '../assets/icons/Clear.svg'
 import {handleBeforeUnload} from '../utils/event'
+import ClearIcon from '../assets/icons/Clear.svg'
 
 
 /**
  * Search bar component
  *
- * @param {Function} onClickMenuCb callback
- * @param {boolean} showNavPanel toggle
- * @return {React.Component} The SearchBar react component
+ * @property {Function} fileOpen callback for OpenModelControl
+ * @return {React.Component}
  */
 export default function SearchBar({fileOpen}) {
   const location = useLocation()
@@ -122,7 +121,7 @@ export default function SearchBar({fileOpen}) {
           error={true}
           placeholder={'Search / Insert GitHub link'}
           sx={{
-            ...theme.theme.typography.tree,
+            ...theme.typography.tree,
             'marginTop': '4px',
             'marginLeft': '8px',
             '& input::placeholder': {

src/Components/SnackbarMessage.jsx

@@ -1,19 +1,17 @@
 import React from 'react'
-import Snackbar from '@mui/material/Snackbar'
 import MuiAlert from '@mui/material/Alert'
-import {useTheme} from '@mui/styles'
+import Snackbar from '@mui/material/Snackbar'
+import useTheme from '@mui/styles/useTheme'
 
 
 /**
- * @param {string} message
- * @param {string} type
- * @param {Function} open
+ * @property {string} message Message for user
+ * @property {string} severity Alert severity
+ * @property {Function} open Progress callback
  * @return {object}
  */
-export default function SnackBarMessage({message, type, open}) {
+export default function SnackBarMessage({message, severity, open}) {
   const theme = useTheme()
-
-
   return (
     <Snackbar
       open={open}
@@ -35,7 +33,7 @@ export default function SnackBarMessage({message, type, open}) {
             overflowWrap: 'anywhere',
           },
         }}
-        severity={type}
+        severity={severity}
         elevation={0}
         icon={false}
       >

src/Components/Toggle.jsx

@@ -1,19 +1,17 @@
 import React from 'react'
 import Switch from '@mui/material/Switch'
-import {useTheme} from '@mui/styles'
+import useTheme from '@mui/styles/useTheme'
 
 
 /**
  * Toggle Switch
  *
  * @property {Function} onChange callback
  * @property {boolean} checked react state
- * @return {React.ReactElement} React component
+ * @return {React.ReactComponent}
  */
 export default function Toggle({onChange, checked}) {
   const theme = useTheme()
-
-
   return (
     <Switch
       checked={checked}