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

oops, fix bug in Chakra globals

Browse source 
ahh, right, I was overriding their html/body styles! stop doing that 😅
This commit is contained in:
Emi Matchu 2020-09-07 21:11:10 -07:00
parent 901a6b14f0
commit 75ffd813e9
1 changed files with 19 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/app/App.js
View file

@ -1,7 +1,7 @@
import React from "react";
import { ApolloProvider } from "@apollo/client";
import { Auth0Provider } from "@auth0/auth0-react";
import { CSSReset, ChakraProvider, useColorMode } from "@chakra-ui/core";
import { CSSReset, ChakraProvider } from "@chakra-ui/core";
import defaultTheme from "@chakra-ui/theme";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import loadable from "@loadable/component";
@ -19,20 +19,24 @@ const theme = {
...defaultTheme,
styles: {
...defaultTheme.styles,
global: ({ colorMode, ...rest }) => ({
...defaultTheme.styles.global({ colorMode, ...rest }),
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: {
background: colorMode === "light" ? "white" : "gray.800",
color: colorMode === "light" ? "green.800" : "green.50",
transition: "all 0.25s",
},
}),
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",
},
};
},
},
};