upgrade to new Chakra extendTheme API

package.json

@@ -8,6 +8,7 @@
     "@auth0/auth0-react": "^1.0.0",
     "@chakra-ui/icons": "^1.0.2",
     "@chakra-ui/react": "^1.0.4",
+    "@chakra-ui/theme-tools": "^1.0.2",
     "@emotion/css": "^11.1.3",
     "@emotion/react": "^11.1.4",
     "@emotion/styled": "^11.0.0",

src/app/App.js

@@ -1,8 +1,8 @@
 import React from "react";
 import { ApolloProvider } from "@apollo/client";
 import { Auth0Provider } from "@auth0/auth0-react";
-import { CSSReset, ChakraProvider } from "@chakra-ui/react";
-import defaultTheme from "@chakra-ui/theme";
+import { CSSReset, ChakraProvider, extendTheme } from "@chakra-ui/react";
+import { mode } from "@chakra-ui/theme-tools";
 import {
   BrowserRouter as Router,
   Switch,
@@ -31,30 +31,22 @@ const WardrobePage = loadable(() => import("./WardrobePage"), {
   fallback: <WardrobePageLayout />,
 });
 
-const theme = {
-  ...defaultTheme,
+const theme = extendTheme({
   styles: {
-    ...defaultTheme.styles,
-    global: ({ colorMode, ...rest }) => {
-      const defaultGlobals = defaultTheme.styles.global({ colorMode, ...rest });
-      return {
-        ...defaultGlobals,
+    global: (props) => ({
       html: {
-          ...defaultGlobals.html,
         // HACK: Chakra sets body as the relative position element, which is
         //       fine, except its `min-height: 100%` doesn't actually work
         //       unless paired with height on the root element too!
         height: "100%",
       },
       body: {
-          ...defaultGlobals.body,
-          color: colorMode === "light" ? "green.800" : "green.50",
+        color: mode("green.800", "green.50")(props),
         transition: "all 0.25s",
       },
-      };
+    }),
   },
-  },
-};
+});
 
 /**
  * App is the entry point of our application. There's not a ton of exciting

yarn.lock

@@ -2441,7 +2441,7 @@
     "@chakra-ui/form-control" "1.1.0"
     "@chakra-ui/utils" "1.0.2"
 
-"@chakra-ui/theme-tools@1.0.2":
+"@chakra-ui/theme-tools@1.0.2", "@chakra-ui/theme-tools@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@chakra-ui/theme-tools/-/theme-tools-1.0.2.tgz#d4c36f3f4e60295e9f98d418182a98c76ff15393"
   integrity sha512-wmjz5wPtjfslvvVMoHKyD8pnOQC0Facf93fKZupaxtXaol2eZZ/tYIiA6JUwe5mtk75WvLKAihpqaM8XxeXFWw==