Integrate ColorModeContext into Theme.

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/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}

src/Containers/CadView.jsx

@@ -1,7 +1,8 @@
-import React, {useContext, useEffect, useState} from 'react'
+import React, {useEffect, useState} from 'react'
 import {Color, MeshLambertMaterial} from 'three'
 import {useNavigate, useSearchParams, useLocation} from 'react-router-dom'
 import Box from '@mui/material/Box'
+import useTheme from '@mui/styles/useTheme'
 import {navToDefault} from '../Share'
 import Alert from '../Components/Alert'
 import BranchesControl from '../Components/BranchesControl'
@@ -13,7 +14,6 @@ import OperationsGroup from '../Components/OperationsGroup'
 import SnackBarMessage from '../Components/SnackbarMessage'
 import {hasValidUrlParams as urlHasCameraParams} from '../Components/CameraControl'
 import {useIsMobile} from '../Components/Hooks'
-import {ColorModeContext} from '../Context/ColorMode'
 import {IfcViewerAPIExtended} from '../Infrastructure/IfcViewerAPIExtended'
 import * as Privacy from '../privacy/Privacy'
 import debug from '../utils/debug'
@@ -60,7 +60,7 @@ export default function CadView({
   const [expandedElements, setExpandedElements] = useState([])
 
   // UI elts
-  const colorMode = useContext(ColorModeContext)
+  const theme = useTheme()
   const [showSearchBar, setShowSearchBar] = useState(false)
   const [alert, setAlert] = useState(null)
   const [isLoading, setIsLoading] = useState(false)
@@ -161,21 +161,22 @@ export default function CadView({
   function onModelPath() {
     setIsNavPanelOpen(false)
     setShowSearchBar(false)
-    const theme = colorMode.getTheme()
-    const initializedViewer = initViewer(
-        pathPrefix,
-        (theme &&
-         theme.palette &&
-         theme.palette.scene &&
-         theme.palette.scene.background) || '0xabcdef')
-    setViewer(initializedViewer)
-    setViewerStore(initializedViewer)
+    // TODO(pablo): First arg isn't used for first time, and then it's
+    // newMode for the themeChangeListeners, which is also unused.
+    const initViewerCb = (any, themeArg) => {
+      const initializedViewer = initViewer(
+          pathPrefix,
+          assertDefined(themeArg.palette.scene.background))
+      setViewer(initializedViewer)
+      setViewerStore(initializedViewer)
+    }
+    initViewerCb(undefined, theme)
+    theme.addThemeChangeListener(initViewerCb)
   }
 
 
   /** When viewer is ready, load IFC model. */
   async function onViewer() {
-    const theme = colorMode.getTheme()
     if (viewer === null) {
       debug().warn('CadView#onViewer, viewer is null')
       return
@@ -201,7 +202,6 @@ export default function CadView({
       viewer.IFC.selector.selection.material = selectMat
     }
 
-    addThemeListener()
     const pathToLoad = modelPath.gitpath || (installPrefix + modelPath.filepath)
     const tmpModelRef = await loadIfc(pathToLoad)
     await onModel(tmpModelRef)
@@ -524,15 +524,6 @@ export default function CadView({
   }
 
 
-  const addThemeListener = () => {
-    colorMode.addThemeChangeListener((newMode, theme) => {
-      const intializedViewer = initViewer(pathPrefix, theme.palette.scene.background)
-      setViewer(intializedViewer)
-      setViewerStore(intializedViewer)
-    })
-  }
-
-
   return (
     <Box
       sx={{
@@ -559,7 +550,7 @@ export default function CadView({
       />
       <SnackBarMessage
         message={snackMessage ? snackMessage : loadingMessage}
-        type={'info'}
+        severity={'info'}
         open={isLoading || snackMessage !== null}
       />
       {showSearchBar && (

src/Share.jsx

@@ -7,9 +7,8 @@ import {ThemeProvider} from '@mui/material/styles'
 /* eslint-disable */
 import AccountCircle from '@mui/icons-material/AccountCircle'
 /* eslint-enable */
-import CadView, {searchIndex} from './Containers/CadView'
-import {ColorModeContext} from './Context/ColorMode'
 import Styles from './Styles'
+import CadView, {searchIndex} from './Containers/CadView'
 import WidgetApi from './WidgetApi/WidgetApi'
 import useStore from './store/useStore'
 import useShareTheme from './theme/Theme'
@@ -74,23 +73,20 @@ export default function Share({installPrefix, appPrefix, pathPrefix}) {
   }, [appPrefix, installPrefix, modelPath, pathPrefix, setRepository, urlParams, setModelPath])
 
 
-  const {theme, colorMode} = useShareTheme()
+  const theme = useShareTheme()
   // https://mui.com/material-ui/customization/how-to-customize/#4-global-css-override
-
   return (
     modelPath &&
       <CssBaseline enableColorScheme>
-        <ColorModeContext.Provider value={colorMode}>
-          <ThemeProvider theme={theme}>
-            <Styles theme={theme}/>
-            <CadView
-              installPrefix={installPrefix}
-              appPrefix={appPrefix}
-              pathPrefix={pathPrefix}
-              modelPath={modelPath}
-            />
-          </ThemeProvider>
-        </ColorModeContext.Provider>
+        <ThemeProvider theme={theme}>
+          <Styles theme={theme}/>
+          <CadView
+            installPrefix={installPrefix}
+            appPrefix={appPrefix}
+            pathPrefix={pathPrefix}
+            modelPath={modelPath}
+          />
+        </ThemeProvider>
       </CssBaseline>)
 }