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 38export default function useColors() { 39 const {colors} = useTheme(); 40 41 const cColors: CustomizedColors = useMemo(() => { 42 return { 43 ...colors, 44 // @ts-ignore 45 textSecondary: 46 colors.textSecondary ?? 47 Color(colors.text).alpha(0.6).toString(), 48 // @ts-ignore 49 background: colors._background ?? colors.background, 50 }; 51 }, [colors]); 52 53 return cColors; 54} 55