change theme color amd set time to 3 decimal places

src/components/Menu.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { makeStyles } from "@material-ui/styles";
 import { Paper, Divider } from "@material-ui/core";
 
@@ -6,7 +6,7 @@ import { MenuSolverControls } from "./MenuSolverControls";
 import { MenuMetrics } from "./MenuMetrics";
 import { OtherControls } from "./OtherControls";
 import { MemoryUsage } from "./MemoryUsage";
-
+import { useThemeContext } from "../context";
 const useStyles = makeStyles(theme => ({
   wrapper: {
     overflowY: "auto",
@@ -32,6 +32,11 @@ export const Menu = ({
 
 }) => {
   const classes = useStyles();
+  const { muiTheme, colorMode } = useThemeContext();
+  const backgroundStyle = useMemo(() =>
+    colorMode === "dark" ? "#101010" : "#ffffff",
+    [colorMode]
+  );
 
   return (
     <Paper classes={{ root: classes.wrapper }} style={{
@@ -44,6 +49,7 @@ export const Menu = ({
       padding: "15px",
       borderRadius: "8px",
       boxShadow: "2px 2px 10px rgba(0, 0, 0, 0.3)",
+      backgroundColor: backgroundStyle,
     }}>
       <MenuMetrics />
       <Divider />

src/components/MenuMetrics.jsx

@@ -28,8 +28,8 @@ export const MenuMetrics = props => {
   useEffect(() => {
     if (startedRunningAt) {
       const interval = setInterval(() => {
-        setRunningFor(Math.floor((Date.now() - startedRunningAt) / 1000));
-      }, 1000);
+        setRunningFor(Number(((Date.now() - startedRunningAt) / 1000).toFixed(3)));
+      }, 50);
       return () => clearInterval(interval);
     }
   }, [startedRunningAt]);
@@ -105,7 +105,7 @@ export const MenuMetrics = props => {
             display="inline"
             variant="button"
           >
-            {runningFor || ""}
+            {runningFor.toFixed(3) || ""}
           </Typography>
           <Typography
             classes={{ root: classes.unit }}

src/components/Navbar.jsx

@@ -8,7 +8,7 @@ export const Navbar = () => {
         justifyContent: 'space-between',
         alignItems: 'center',
         padding: '10px 20px',
-        backgroundColor: '#333',
+        backgroundColor: '#101010',
         color: 'white',
         position: 'fixed',
         top: 0,

src/context/ThemeContext.jsx

@@ -8,7 +8,7 @@ import orange from "@material-ui/core/colors/orange";
 import { COLOR_MODE_KEY } from "../constants";
 import { usePersistentState } from "../hooks";
 
-export const ThemeContext = createContext();  
+export const ThemeContext = createContext();
 
 export const ThemeContextProvider = props => {
   const { children } = props;
@@ -17,12 +17,14 @@ export const ThemeContextProvider = props => {
 
   const muiTheme = useMemo(
     () =>
-    createTheme({
+      createTheme({
         palette: {
+          type: colorMode,
           primary: blue,
           secondary: orange,
-          type: colorMode
-        }
+          // backgroundColor: colorMode === "dark" ? "#101010" : "#ffffff",
+          // background: colorMode === "dark" ? "#ffffff" : "#ffffff",
+        },
       }),
     [colorMode]
   );