Hook in to RTD theme to set react theme

scripts/settings/src/App.tsx

@@ -154,7 +154,7 @@ function ModuleTypes({ stepType, setEnabledModules, enabledModules, configValues
           {stepType}
         </Typography>
         <Typography variant="body1" >
-          Select the {stepType} you wish to enable. Drag to re-order.
+          Select the {stepType} you wish to enable. Drag to.
           Learn more about {stepType} <a href={`https://auto-archiver.readthedocs.io/en/latest/modules/${stepType.slice(0,-1)}.html`} target="_blank">here</a>.
         </Typography>
       </Box>

scripts/settings/src/StepCard.tsx

@@ -64,6 +64,7 @@ const StepCard = ({
 
 
     const style = {
+        ...Card.style,
         transform: CSS.Transform.toString(transform),
         transition,
         zIndex: isDragging ? "100" : "auto",

scripts/settings/src/main.tsx

@@ -2,14 +2,43 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { ThemeProvider } from '@mui/material/styles';
 import { CssBaseline } from '@mui/material';
-import theme from './theme';
 import App from './App';
+import { createTheme } from '@mui/material/styles';
+import { red } from '@mui/material/colors';
+import { useState, useEffect } from 'react';
+
+function RootApp() {
+  const [mode, setMode] = useState('light');
+
+useEffect(() => {
+    setMode(window.localStorage.getItem('theme') || 'light');
+}, []);
+
+var observer = new MutationObserver(function(mutations) {
+  setMode(window.localStorage.getItem('theme') || 'light');
+  
+})
+observer.observe(document.documentElement, {attributes: true, attributeFilter: ['data-theme']});
+
+// A custom theme for this app
+const theme = createTheme({
+  palette: {
+    mode: mode == 'light' ? 'light' : 'dark',
+  },
+  cssVariables: true
+});
+
+  return (
+    <ThemeProvider theme={theme}>
+    <CssBaseline />
+    <App  />
+  </ThemeProvider>
+  );
+}
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <App />
-    </ThemeProvider>
+    <RootApp />
   </React.StrictMode>,
 );
+

scripts/settings/src/theme.tsx

@@ -1,20 +0,0 @@
-import { createTheme } from '@mui/material/styles';
-import { red } from '@mui/material/colors';
-
-// A custom theme for this app
-const theme = createTheme({
-  cssVariables: true,
-  palette: {
-    primary: {
-      main: '#556cd6',
-    },
-    secondary: {
-      main: '#19857b',
-    },
-    error: {
-      main: red.A400,
-    },
-  },
-});
-
-export default theme;