1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
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('#f8f8f2', '#282a36')(props),
color: mode('#282a36', '#f8f8f2')(props),
}
})
}
const components = {
Link: {
baseStyle: (props : StyleFunctionProps) => ({
color: mode('#ff5555', '#bd93f9')(props),
textUnderlineOffset: 3
}),
variants: {
'topnav-link': (props : StyleFunctionProps) => ({
color: mode('#282a36', '#f8f8f2')(props),
textDecoration: "none"
}),
'list-link': (props : StyleFunctionProps) => ({
color: mode('#282a36', '#f8f8f2')(props),
textDecoration: "none"
})
}
},
Text: {
baseStyle: (_props : StyleFunctionProps) => ({
textAlign: "justify",
})
},
Heading: {
variants: {
"section-title": {
pt: "10px",
pb: "10px",
fontSize: "1.5rem"
}
}
}
}
const config: ThemeConfig = {
initialColorMode: 'light',
useSystemColorMode: false,
}
const theme = extendTheme({ config, styles, components })
export default theme
|
