fix: fix white footer in dark mode

src/components/atoms/Footer.tsx

@@ -17,7 +17,7 @@ export const Footer = ({ children }: FooterProps) => {
       padding={2}
       width="100%"
       gap={2}
-      sx={{ backgroundColor: theme.palette.background.default.toString(), boxShadow: 2 }}
+      sx={{ backgroundColor: theme.vars.palette.background.default, boxShadow: 2 }}
     >
       {children}
     </Box>

src/components/organisms/Layout.tsx

@@ -7,6 +7,9 @@ import { BsMastodon } from "react-icons/bs"
 import { Link as GatsbyLink } from "gatsby"
 import { Footer } from "../atoms/Footer"
 
+// this adds typings for using `theme.vars`
+import type {} from "@mui/material/themeCssVarsAugmentation"
+
 const pages = [
   { title: "Home", to: "/" },
   { title: "Blog", to: "/blog" },