OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

upgrade to new Chakra extendTheme API

Browse source
This commit is contained in:
Emi Matchu 2020-12-25 09:20:18 -08:00
parent 91982c60d9
commit 131ff9d4c2
3 changed files with 18 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -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",

40
src/app/App.js
View file

@ -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,
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",
transition: "all 0.25s",
},
};
},
global: (props) => ({
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: {
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

2
yarn.lock
View file

@ -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==