|
|
|
|
/**
|
|
|
|
|
* 主题工具函数
|
|
|
|
|
*
|
|
|
|
|
* 提供主题相关的辅助函数
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
import { Colors } from '@/theme';
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|