Move theme into subdir and break into separate files.

src/Components/CutPlaneMenu.jsx

@@ -3,7 +3,7 @@ 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'
+import useTheme from '../theme/Theme'
 import useStore from '../store/useStore'
 import {addHashParams, getHashParams, getObjectParams, removeHashParams} from '../utils/location'
 import {TooltipIconButton} from './Buttons'

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 '../Theme'
 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'

src/Components/SearchBar.jsx

@@ -5,7 +5,7 @@ import InputBase from '@mui/material/InputBase'
 import Paper from '@mui/material/Paper'
 import debug from '../utils/debug'
 import {looksLikeLink, githubUrlOrPathToSharePath} from '../ShareRoutes'
-import useTheme from '../Theme'
+import useTheme from '../theme/Theme'
 import OpenModelControl from './OpenModelControl'
 import {TooltipIconButton} from './Buttons'
 import ClearIcon from '../assets/icons/Clear.svg'

src/Share.jsx

@@ -1,21 +1,20 @@
 import React, {useEffect, useMemo, useRef} from 'react'
-import CssBaseline from '@mui/material/CssBaseline'
 import {useNavigate, useParams} from 'react-router-dom'
+import CssBaseline from '@mui/material/CssBaseline'
 import {ThemeProvider} from '@mui/material/styles'
-import CadView from './Containers/CadView'
-import useStore from './store/useStore'
-import Styles from './Styles'
-import useShareTheme from './Theme'
-import debug from './utils/debug'
-import {ColorModeContext} from './Context/ColorMode'
-import {handleBeforeUnload} from './utils/event'
 // TODO: This isn't used.
 // If icons-material isn't imported somewhere, mui dies
 /* eslint-disable */
 import AccountCircle from '@mui/icons-material/AccountCircle'
-import WidgetApi from "./WidgetApi/WidgetApi";
-import {searchIndex} from './Containers/CadView';
 /* eslint-enable */
+import CadView, {searchIndex} from './Containers/CadView'
+import {ColorModeContext} from './Context/ColorMode'
+import Styles from './Styles'
+import WidgetApi from './WidgetApi/WidgetApi'
+import useStore from './store/useStore'
+import useShareTheme from './theme/Theme'
+import debug from './utils/debug'
+import {handleBeforeUnload} from './utils/event'
 
 
 /**

src/ShareMock.jsx

@@ -2,7 +2,7 @@ import React, {useEffect} from 'react'
 import {ThemeProvider} from '@mui/material/styles'
 import useStore from './store/useStore'
 import {ColorModeContext} from './Context/ColorMode'
-import useTheme from './Theme'
+import useTheme from './theme/Theme'
 import BaseRoutesMock from './BaseRoutesMock.test'
 
 

src/__mocks__/MockComponent.jsx

@@ -1,7 +1,8 @@
-import useTheme from '../Theme'
-import {ThemeProvider} from '@mui/material/styles'
 import React from 'react'
+import {ThemeProvider} from '@mui/material/styles'
 import {ColorModeContext} from '../Context/ColorMode'
+import useTheme from '../theme/Theme'
+
 
 /**
  * @param {object} children React component(s)

src/theme/Colors.js

@@ -0,0 +1,27 @@
+import {grey, green} from '@mui/material/colors'
+
+
+/**
+ * @return {object} Color definitions: {grey, green, lime, black}
+ * @see https://mui.com/customization/color/#color-palette
+ */
+export function getColors() {
+  return {
+    grey: {
+      lightest: grey[100],
+      light: grey[300],
+      medium: '#C1C1C1',
+      dark: '#444444',
+      darkest: grey[900],
+    },
+    green: {
+      lightest: '#CEE6CA',
+      light: green[300],
+      medium: green[500],
+      dark: green[800],
+      darkest: '#459A47',
+    },
+    lime: green[400],
+    black: '#101010',
+  }
+}