You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

155 lines
3.1 KiB

/**
* 主题工具函数
*
* 提供主题相关的辅助函数
*/
import Colors from '@/constants/Colors';
import { ThemeEnum } from '@/constants/theme';
/**
* 根据主题获取颜色
*
* @param theme - 主题类型 ThemeEnum
* @param colorName - 颜色名称
* @returns 颜色值
*/
export function getThemeColor(
theme: ThemeEnum,
colorName: keyof typeof Colors.light & keyof typeof Colors.dark & keyof typeof Colors.orange
): string {
return Colors[theme][colorName];
}
/**
* 根据主题获取所有颜色
*
* @param theme - 主题类型 ThemeEnum
* @returns 颜色对象
*/
export function getThemeColors(theme: ThemeEnum) {
return Colors[theme];
}
/**
* 创建主题感知的样式
*
* @param lightStyle - 浅色主题样式
* @param darkStyle - 深色主题样式
* @param orangeStyle - 橙色主题样式
* @param theme - 当前主题
* @returns 合并后的样式
*
* @example
* ```tsx
* const style = createThemedStyle(
* { backgroundColor: '#fff' },
* { backgroundColor: '#000' },
* theme
* );
* ```
*/
export function createThemedStyle<T>(
lightStyle: T,
darkStyle: T,
orangeStyle: T,
theme: ThemeEnum
): T {
switch (theme) {
case ThemeEnum.LIGHT:
return lightStyle;
case ThemeEnum.DARK:
return darkStyle;
case ThemeEnum.ORANGE:
return orangeStyle;
default:
return lightStyle;
}
}
/**
* 根据主题选择值
*
* @param lightValue - 浅色主题值
* @param darkValue - 深色主题值
* @param orangeValue - 深色主题值
* @param theme - 当前主题
* @returns 选中的值
*
* @example
* ```tsx
* const fontSize = selectByTheme(14, 16, theme);
* ```
*/
export function selectByTheme<T>(
lightValue: T,
darkValue: T,
orangeValue: T,
theme: ThemeEnum
): T {
switch (theme) {
case ThemeEnum.LIGHT:
return lightValue;
case ThemeEnum.DARK:
return darkValue;
case ThemeEnum.ORANGE:
return orangeValue;
default:
return lightValue;
}
}
/**
* 颜色透明度调整
*
* @param color - 十六进制颜色值
* @param opacity - 透明度 0-1
* @returns 带透明度的颜色值
*
* @example
* ```tsx
* const color = withOpacity('#000000', 0.5); // rgba(0, 0, 0, 0.5)
* ```
*/
export function withOpacity(color: string, opacity: number): string {
// 移除 # 号
const hex = color.replace('#', '');
// 转换为 RGB
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
}
/**
* 判断是否为深色主题
*
* @param theme - 主题类型
* @returns 是否为深色主题
*/
export function isDarkTheme(theme: ThemeEnum): boolean {
return theme === ThemeEnum.DARK;
}
/**
* 判断是否为浅色主题
*
* @param theme - 主题类型
* @returns 是否为浅色主题
*/
export function isLightTheme(theme: ThemeEnum): boolean {
return theme === ThemeEnum.LIGHT;
}
/**
* 判断是否为橙色主题
*
* @param theme - 主题类型
* @returns 是否为橙色主题
*/
export function isOrangeTheme(theme: ThemeEnum): boolean {
return theme === ThemeEnum.ORANGE;
}