Hook in to RTD theme to set react theme

bellingcat · Mar 3, 2025 · a88a37d · a88a37d
1 parent 9845804
commit a88a37d
Show file tree

Hide file tree

Showing 7 changed files with 48,378 additions and 332 deletions.
diff --git a/docs/source/installation/settings.html b/docs/source/installation/settings.html
diff --git a/scripts/settings/index.html b/scripts/settings/index.html
@@ -1,8 +1,9 @@
-<!-- <!doctype html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="initial-scale=1, width=device-width" />
+    <!-- Fonts to support Material Design -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
@@ -11,13 +12,8 @@
     />
     <title>Auto Archiver Settings</title>
   </head>
-  <body> -->
-
-    <!-- No need for html/head markup, this page is designed to be included in a RTD page.
-     See `settings_page.md` for where this is included. -->
-
+  <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
-
-  <!-- </body>
-</html> -->
+  </body>
+</html>
diff --git a/scripts/settings/src/App.tsx b/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>

diff --git a/scripts/settings/src/StepCard.tsx b/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",

diff --git a/scripts/settings/src/main.tsx b/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>,
 );
+
diff --git a/scripts/settings/src/theme.tsx b/scripts/settings/src/theme.tsx
diff --git a/scripts/settings/vite.config.ts b/scripts/settings/vite.config.ts
@@ -5,4 +5,8 @@ import { viteSingleFile } from "vite-plugin-singlefile"
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react(), viteSingleFile()],
+  build: {
+    minify: false,
+    sourcemap: true,
+  }
 });