diff options
| author | Michal Sapka <michal@sapka.me> | 2022-08-11 22:44:46 +0200 |
|---|---|---|
| committer | Michal Sapka <michal@sapka.me> | 2022-08-11 22:44:46 +0200 |
| commit | 0c1973d84c3aa86e7ea6004e6e0845f123f49f2a (patch) | |
| tree | e232984c01c75b471d1756ae87bf036a913832f6 | |
| parent | 462c437667ac750cc0fd765dfd551adfce2b2d91 (diff) | |
feat: theming spike
| -rw-r--r-- | lib/theme.tsx | 37 | ||||
| -rw-r--r-- | pages/_app.tsx | 4 | ||||
| -rw-r--r-- | pages/_document.tsx | 5 |
3 files changed, 44 insertions, 2 deletions
diff --git a/lib/theme.tsx b/lib/theme.tsx new file mode 100644 index 0000000..ecc30d4 --- /dev/null +++ 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 index 5d682c5..3dcf9aa 100644 --- 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 index e2f593f..ef9fcd3 100644 --- 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> |