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",
|
||||
"@apollographql/graphql-playground-html": "^1.6.24",
|
||||
"@auth0/auth0-react": "^1.0.0",
|
||||
"@chakra-ui/core": "^1.0.0-rc.0",
|
||||
"@chakra-ui/icons": "^1.0.0-rc.0",
|
||||
"@chakra-ui/theme": "^1.0.0-rc.0",
|
||||
"@chakra-ui/core": "^1.0.0-rc.3",
|
||||
"@chakra-ui/icons": "^1.0.0-rc.3",
|
||||
"@chakra-ui/theme": "^1.0.0-rc.3",
|
||||
"@loadable/component": "^5.12.0",
|
||||
"@testing-library/jest-dom": "^4.2.4",
|
||||
"@testing-library/react": "^9.3.2",
|
||||
|
|
|
|||
|
|
@ -53,6 +53,40 @@
|
|||
/>
|
||||
</head>
|
||||
<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>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from "react";
|
||||
import { ApolloProvider } from "@apollo/client";
|
||||
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 { BrowserRouter as Router, Switch, Route } from "react-router-dom";
|
||||
import loadable from "@loadable/component";
|
||||
|
|
@ -21,8 +21,17 @@ const theme = {
|
|||
...defaultTheme.styles,
|
||||
global: ({ colorMode, ...rest }) => ({
|
||||
...defaultTheme.styles.global({ colorMode, ...rest }),
|
||||
color: colorMode === "light" ? "green.800" : "green.50",
|
||||
transition: "all 0.25s",
|
||||
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",
|
||||
},
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue