1import {useTheme, Theme} 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 secondary?: string; 10 /** 普通文字 */ 11 text: string; 12 /** 副标题文字颜色 */ 13 textSecondary?: string; 14 /** 高亮文本颜色 */ 15 textHighlight?: string; 16 /** 背景高亮颜色 */ 17 backgroundHighlight?: string; 18 /** 页面背景 */ 19 pageBackground?: string; 20 /** 阴影 */ 21 shadow?: string; 22 /** 标题栏颜色 */ 23 appBar?: string; 24 /** 音乐栏颜色 */ 25 musicBar?: string; 26 /** 分割线 */ 27 divider?: string; 28 /** 标题字体，和primary对比的字体 */ 29 headerText?: string; 30 /** 高亮颜色 */ 31 listActive?: string; 32 /** 输入框背景色 */ 33 placeholder?: string; 34 /** 菜单背景色 */ 35 backdrop?: string; 36 // 真正的背景色 37 _background?: string; 38} 39 40export default function useColors() { 41 const {colors} = useTheme(); 42 43 const cColors: CustomizedColors = useMemo(() => { 44 return { 45 ...colors, 46 textSecondary: 47 // @ts-ignore 48 colors.textSecondary ?? 49 Color(colors.text).alpha(0.6).toString(), 50 // @ts-ignore 51 background: colors._background ?? colors.background, 52 }; 53 }, [colors]); 54 55 return cColors; 56} 57