1import {Theme, useTheme} from '@react-navigation/native'; 2import Color from 'color'; 3import {useMemo} from 'react'; 4 5type IColors = Theme['colors']; 6 7export interface CustomizedColors extends IColors { 8 /** 普通文字 */ 9 text: string; 10 /** 副标题文字颜色 */ 11 textSecondary?: string; 12 /** 高亮文本颜色，也就是主色调 */ 13 textHighlight?: string; 14 /** 页面背景 */ 15 pageBackground?: string; 16 /** 阴影 */ 17 shadow?: string; 18 /** 标题栏颜色 */ 19 appBar?: string; 20 /** 标题栏字体颜色 */ 21 appBarText?: string; 22 /** 音乐栏颜色 */ 23 musicBar?: string; 24 /** 音乐栏字体颜色 */ 25 musicBarText?: string; 26 /** 分割线 */ 27 divider?: string; 28 /** 高亮颜色 */ 29 listActive?: string; 30 /** 输入框背景色 */ 31 placeholder?: string; 32 /** 弹窗、浮层、菜单背景色 */ 33 backdrop?: string; 34 /** 卡片背景色 */ 35 card: string; 36 /** paneltabbar 背景色 */ 37 tabBar?: string; 38} 39 40export default function useColors() { 41 const {colors} = useTheme(); 42 43 const cColors: CustomizedColors = useMemo(() => { 44 return { 45 ...colors, 46 textSecondary: Color(colors.text).alpha(0.7).toString(), 47 // @ts-ignore 48 background: colors.pageBackground ?? colors.background, 49 }; 50 }, [colors]); 51 52 return cColors; 53} 54