background for sidebar, tabs and footer darker, inner container lighter

src/components/Panel.js

@@ -5,7 +5,7 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles(theme => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
@@ -17,7 +17,8 @@ const useStyles = makeStyles(() => ({
     display: 'flex',
     flexDirection: 'column',
     flex: 1,
-    overflow: 'hidden'
+    overflow: 'hidden',
+    backgroundColor: theme.palette.background.paper,
   }
 }));
 

src/theme.js

@@ -67,13 +67,14 @@ export const createTheme = (theme) =>
               main: "#A2A2FF",
             },
             background: {
-              default: "#18181A",
+              default: "#0F0F0F",
               secondary: "#18181A",
               paper: "#18181A",
             },
             text: {
               primary: "#FBFBFB",
               secondary: "#BDBCC3",
+              lineLabel: "#A2A2FF",
             },
           }
         : {