commit 0c1973d84c3aa86e7ea6004e6e0845f123f49f2a
parent 462c437667ac750cc0fd765dfd551adfce2b2d91
Author: Michal Sapka <michal@sapka.me>
Date: Thu, 11 Aug 2022 22:44:46 +0200
feat: theming spike
Diffstat:
3 files changed, 44 insertions(+), 2 deletions(-)
diff --git a/lib/theme.tsx b/lib/theme.tsx
@@ -0,0 +1,37 @@
+import { extendTheme } from "@chakra-ui/react"
+import { mode } from '@chakra-ui/theme-tools'
+
+const styles = {
+ global: props => ({
+ body: {
+ bg: mode('#d5d6db', '#24283b')(props),
+ color: mode('#0f4b6e', '#7dcfff')(props),
+ }
+ })
+}
+
+const components = {
+ Link: {
+ baseStyle: props => ({
+ color: mode('#34548a', '##34548a')(props),
+ textUnderlineOffset: 3
+ })
+ }
+}
+
+const config = {
+ initialColorMode: 'dark',
+ useSystemColorMode: false,
+}
+
+const theme = extendTheme({
+ config,
+ styles,
+ components
+})
+
+
+console.log(theme)
+
+
+export default theme
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,9 +1,11 @@
import { ChakraProvider } from '@chakra-ui/react'
+import theme from '../lib/theme.tsx'
import type { AppProps } from 'next/app'
+
function MyApp({ Component, pageProps }: AppProps) {
return (
- <ChakraProvider>
+ <ChakraProvider theme={theme}>
<Component {...pageProps} />
</ChakraProvider>
)
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -1,10 +1,13 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { ColorModeScript } from '@chakra-ui/react'
+import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
+import theme from '../lib/theme'
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
+ <ColorModeScript initialColorMode={theme.config.initialColorMode} />
<Main />
<NextScript />
</body>
