From 6fb7c6af684907ffbe8aecf36e3c082e91e7fb01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20Schr=C3=B6ter?= <dev@felschr.com>
Date: Wed, 4 Jan 2023 19:43:22 +0100
Subject: [PATCH] fix: fix white footer in dark mode

---
 src/components/atoms/Footer.tsx     | 2 +-
 src/components/organisms/Layout.tsx | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/atoms/Footer.tsx b/src/components/atoms/Footer.tsx
index 221e924..c682cd8 100644
--- a/src/components/atoms/Footer.tsx
+++ b/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>
diff --git a/src/components/organisms/Layout.tsx b/src/components/organisms/Layout.tsx
index 310930b..93bcbee 100644
--- a/src/components/organisms/Layout.tsx
+++ b/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" },