added dark mode and typography

pages/fdo/show/[prefix]/sandbox.tsx

@@ -25,6 +25,7 @@ import VerifiedIcon from '@mui/icons-material/Verified'
 import ReportIcon from '@mui/icons-material/Report'
 import { styled, ThemeProvider } from '@mui/material/styles'
 import Details from '../../../../src/components/fdos/details'
+import { Padding } from '@mui/icons-material'
 
 const resolvePid = (pid: string) => `https://hdl.handle.net/${pid}`
 
@@ -74,19 +75,6 @@ const ShowFDO = () => {
         // divider={<Divider orientation="vertical" flexItem />}
         spacing={2}
         >
-
-          <ThemeProvider
-            theme={{
-              palette: {
-                primary: {
-                  main: '#ffffff',
-                  dark: '#ffffff'
-                }
-              }
-            }}
-          >
-          </ThemeProvider>
-
           <Item>
             <MenuList>
               <MenuItem>

src/components/fdos/details.tsx

@@ -16,17 +16,19 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({
   },
   [`&.${tableCellClasses.body}`]: {
     fontSize: 16,
-    backgroundColor: theme.palette.common.white
+    backgroundColor: theme.palette.common.white,
+    ...theme.applyStyles('dark', {
+      backgroundColor: '#262c32'
+    })
 
   }
 }))
 
 const StyledTableRow = styled(TableRow)(({ theme }) => ({
-  '&:nth-of-type(odd)': {
-    backgroundColor: theme.palette.action.hover  },
+  '&:nth-of-type(odd)': { backgroundColor: theme.palette.action.hover },
   // hide last border
   '&:last-child td, &:last-child th': {
-    border: 0 
+    border: 0
   }
 }))