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
56
57
|
import {useMemo} from 'react'
import {TextStyle, ViewStyle} from 'react-native'
import {PaletteColor, PaletteColorName, useTheme} from '../ThemeContext'
export interface UsePaletteValue {
colors: PaletteColor
view: ViewStyle
viewLight: ViewStyle
btn: ViewStyle
border: ViewStyle
borderDark: ViewStyle
text: TextStyle
textLight: TextStyle
textInverted: TextStyle
link: TextStyle
icon: TextStyle
}
export function usePalette(color: PaletteColorName): UsePaletteValue {
const theme = useTheme()
return useMemo(() => {
const palette = theme.palette[color]
return {
colors: palette,
view: {
backgroundColor: palette.background,
},
viewLight: {
backgroundColor: palette.backgroundLight,
},
btn: {
backgroundColor: palette.backgroundLight,
},
border: {
borderColor: palette.border,
},
borderDark: {
borderColor: palette.borderDark,
},
text: {
color: palette.text,
},
textLight: {
color: palette.textLight,
},
textInverted: {
color: palette.textInverted,
},
link: {
color: palette.link,
},
icon: {
color: palette.icon,
},
}
}, [theme, color])
}
|
