upgrade to next Chakra RC
some regressions in here with global styles and color mode! I think we got it fixed though!
This commit is contained in:
parent
bebb8e2d11
commit
0c3d9443c2
4 changed files with 516 additions and 452 deletions
|
|
@ -6,9 +6,9 @@
|
||||||
"@apollo/client": "^3.1.1",
|
"@apollo/client": "^3.1.1",
|
||||||
"@apollographql/graphql-playground-html": "^1.6.24",
|
"@apollographql/graphql-playground-html": "^1.6.24",
|
||||||
"@auth0/auth0-react": "^1.0.0",
|
"@auth0/auth0-react": "^1.0.0",
|
||||||
"@chakra-ui/core": "^1.0.0-rc.0",
|
"@chakra-ui/core": "^1.0.0-rc.3",
|
||||||
"@chakra-ui/icons": "^1.0.0-rc.0",
|
"@chakra-ui/icons": "^1.0.0-rc.3",
|
||||||
"@chakra-ui/theme": "^1.0.0-rc.0",
|
"@chakra-ui/theme": "^1.0.0-rc.3",
|
||||||
"@loadable/component": "^5.12.0",
|
"@loadable/component": "^5.12.0",
|
||||||
"@testing-library/jest-dom": "^4.2.4",
|
"@testing-library/jest-dom": "^4.2.4",
|
||||||
"@testing-library/react": "^9.3.2",
|
"@testing-library/react": "^9.3.2",
|
||||||
|
|
|
||||||
|
|
@ -53,6 +53,40 @@
|
||||||
/>
|
/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<script>
|
||||||
|
// HACK: This is copy-pasted output from Chakra's <ColorModeScript />. It
|
||||||
|
// initializes our color mode to match the system color mode. The
|
||||||
|
// component is built for a special Document element like in
|
||||||
|
// Next.js, but in create-react-app this is the best we can do!
|
||||||
|
(function setColorModeVar(initialValue) {
|
||||||
|
var mql = window.matchMedia("(prefers-color-scheme: dark)");
|
||||||
|
var systemPreference = mql.matches ? "dark" : "light";
|
||||||
|
var persistedPreference;
|
||||||
|
|
||||||
|
try {
|
||||||
|
persistedPreference = localStorage.getItem("chakra-ui-color-mode");
|
||||||
|
} catch (error) {
|
||||||
|
console.log(
|
||||||
|
"Chakra UI: localStorage is not available. Color mode persistence might not work as expected"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
var isInStorage = typeof persistedPreference === "string";
|
||||||
|
var colorMode;
|
||||||
|
|
||||||
|
if (isInStorage) {
|
||||||
|
colorMode = persistedPreference;
|
||||||
|
} else {
|
||||||
|
colorMode =
|
||||||
|
initialValue === "system" ? systemPreference : initialValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (colorMode) {
|
||||||
|
var root = document.documentElement;
|
||||||
|
root.style.setProperty("--chakra-ui-color-mode", colorMode);
|
||||||
|
}
|
||||||
|
})("system");
|
||||||
|
</script>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<!--
|
<!--
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { ApolloProvider } from "@apollo/client";
|
import { ApolloProvider } from "@apollo/client";
|
||||||
import { Auth0Provider } from "@auth0/auth0-react";
|
import { Auth0Provider } from "@auth0/auth0-react";
|
||||||
import { CSSReset, ChakraProvider } from "@chakra-ui/core";
|
import { CSSReset, ChakraProvider, useColorMode } from "@chakra-ui/core";
|
||||||
import defaultTheme from "@chakra-ui/theme";
|
import defaultTheme from "@chakra-ui/theme";
|
||||||
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
|
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
|
||||||
import loadable from "@loadable/component";
|
import loadable from "@loadable/component";
|
||||||
|
|
@ -21,8 +21,17 @@ const theme = {
|
||||||
...defaultTheme.styles,
|
...defaultTheme.styles,
|
||||||
global: ({ colorMode, ...rest }) => ({
|
global: ({ colorMode, ...rest }) => ({
|
||||||
...defaultTheme.styles.global({ colorMode, ...rest }),
|
...defaultTheme.styles.global({ colorMode, ...rest }),
|
||||||
color: colorMode === "light" ? "green.800" : "green.50",
|
html: {
|
||||||
transition: "all 0.25s",
|
// 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",
|
||||||
|
},
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue