added hover & active w/ dark mode

dark mode works with buttons in hover, active, and inactive state! (and its not totally ugly!)

client/src/App.jsx

@@ -2,12 +2,14 @@ import { useState } from 'react'
 import Header from './components/header.jsx';
 import Sidebar from './components/sidebar.jsx';
 import Widget from './components/Widget.jsx'
-import { Grid, GridItem } from "@chakra-ui/react"
+import { Grid, GridItem, useRecipe } from "@chakra-ui/react"
 
 
 function App() {
+  const recipe = useRecipe({ key: "canvas" });
+  const styles = recipe();
   return (
-    <Grid
+    <Grid css={styles}
       templateRows="1fr 11fr"
       templateColumns="0.25fr 11.75fr"
       height="100vh"
@@ -25,7 +27,6 @@ function App() {
           templateColumns="repeat(4 1fr)"
           height="100%"
           width="100%"
-          bg="#121212"
           >
           <Widget />
         </Grid>