michal-sapka-me

commit 4d51ae1e73683f68a8268a6e2956bbe139879c38
parent 13c5e9ce54f45a921de69cb06f4410c4e5f7006e
Author: Michal Sapka <michal@sapka.me>
Date:   Tue,  6 Sep 2022 23:40:25 +0200

feat: dark mode colors

Diffstat:
M
lib/theme.tsx
 | 
26
++++++++++++++++++++++++--

1 file changed, 24 insertions(+), 2 deletions(-)
diff --git a/lib/theme.tsx b/lib/theme.tsx
@@ -2,12 +2,34 @@ import { extendTheme ,type ThemeConfig } from "@chakra-ui/react"
 import { mode } from '@chakra-ui/theme-tools'
 import type { StyleFunctionProps } from '@chakra-ui/styled-system'
 
+const styles = {
+  global: (props : StyleFunctionProps) => ({
+    body: {
+      bg: mode('#d5d6db', '#282a36')(props),
+      color: mode('#0f4b6e', '#f8f8f2')(props),
+    }
+  })
+}
+
+const components = {
+  Link: {
+    baseStyle: (props : StyleFunctionProps)  => ({
+      color: mode('#3d7aed', '#bd93f9')(props),
+      textUnderlineOffset: 3
+    })
+  },
+  Text: {
+    baseStyle: (_props : StyleFunctionProps)  => ({
+      textAlign: "justify",
+    })
+  }
+}
+
 const config: ThemeConfig = {
   initialColorMode: 'light',
   useSystemColorMode: false,
 }
 
-// 3. extend the theme
-const theme = extendTheme({ config })
+const theme = extendTheme({ config, styles, components })
 
 export default theme