Skip to content

Instantly share code, notes, and snippets.

@TheEskhaton
Created October 12, 2020 18:15
Show Gist options
  • Save TheEskhaton/b7d71e95ac3b2e306d1598f3891aacb5 to your computer and use it in GitHub Desktop.
Save TheEskhaton/b7d71e95ac3b2e306d1598f3891aacb5 to your computer and use it in GitHub Desktop.
import { ChakraProvider, theme } from "@chakra-ui/core";
import { merge } from "@chakra-ui/utils";
import Head from "next/head";
// 2. Extend the theme to include custom colors, fonts, etc.
const stackpalTheme = merge(theme, {
colors: {
brand: {
50: "#d8ffff",
100: "#acffff",
200: "#7dffff",
300: "#4dffff",
400: "#28ffff",
500: "#18e5e6",
600: "#00b2b3",
700: "#007f80",
800: "#004d4e",
900: "#001b1d",
},
},
fonts: {
body: "Inter",
heading: "Inter",
},
});
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider resetCSS theme={stackpalTheme}>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&display=swap"
rel="stylesheet"
></link>
<link rel="icon" href="/favicon.png" />
</Head>
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment