feat: 首页更新

theme/Colors/index.ts

@@ -5,8 +5,8 @@
  */
 
 const tintColorLight = '#10c8e3';
-const tintColorDark = '#ffd69f';
 const tintColorOrange = '#bd9534';
+const tintColorDark = '#ffd69f';
 
 export default {
   light: {
@@ -18,7 +18,7 @@ export default {
 
     // 背景颜色
     background: '#FFFFFF',
-    backgroundSecondary: '#F5F5F5',
+    backgroundSecondary: '#F4F4F4',
     backgroundTertiary: '#E5E5E5',
 
     // 主题色
@@ -31,8 +31,9 @@ export default {
     info: '#5AC8FA',
 
     // 边框颜色
-    border: '#E5E5E5',
-    borderSecondary: '#D1D1D6',
+    border: tintColorLight,
+    borderSecondary: '#E5E5E5',
+    borderTertiary: '#D1D1D6',
 
     // Tab 图标
     tabIconDefault: '#8E8E93',
@@ -48,7 +49,7 @@ export default {
     inputPlaceholder: '#C7C7CC',
 
     // 按钮
-    buttonPrimary: '#007AFF',
+    buttonPrimary: tintColorLight,
     buttonSecondary: '#5856D6',
     buttonDisabled: '#E5E5E5',
     buttonText: '#FFFFFF',
@@ -68,7 +69,7 @@ export default {
 
     // 背景颜色
     background: '#FFFFFF',
-    backgroundSecondary: '#F5F5F5',
+    backgroundSecondary: '#F4F4F4',
     backgroundTertiary: '#E5E5E5',
 
     // 主题色
@@ -81,8 +82,9 @@ export default {
     info: '#5AC8FA',
 
     // 边框颜色
-    border: '#E5E5E5',
-    borderSecondary: '#D1D1D6',
+    border: tintColorOrange,
+    borderSecondary: '#E5E5E5',
+    borderTertiary: '#D1D1D6',
 
     // Tab 图标
     tabIconDefault: '#8E8E93',
@@ -98,7 +100,7 @@ export default {
     inputPlaceholder: '#C7C7CC',
 
     // 按钮
-    buttonPrimary: '#007AFF',
+    buttonPrimary: tintColorOrange,
     buttonSecondary: '#5856D6',
     buttonDisabled: '#E5E5E5',
     buttonText: '#FFFFFF',
@@ -112,13 +114,15 @@ export default {
   dark: {
     // 文本颜色
     text: '#FFFFFF',
-    textSecondary: '#AEAEB2',
-    textTertiary: '#8E8E93',
+    textSecondary: '#E6E7EC',
+    textTertiary: '#AEB3CC',
+    textQuaternary: '#8B8EA1',
+    textQuinary: '#6A6C82',
     textInverse: '#000000',
 
     // 背景颜色
-    background: '#000000',
-    backgroundSecondary: '#1C1C1E',
+    background: '#171A25',
+    backgroundSecondary: '#171A25',
     backgroundTertiary: '#2C2C2E',
 
     // 主题色
@@ -131,8 +135,9 @@ export default {
     info: '#64D2FF',
 
     // 边框颜色
-    border: '#38383A',
-    borderSecondary: '#48484A',
+    border: '#F5F5F5',
+    borderSecondary: '#E5E5E5',
+    borderTertiary: '#D1D1D6',
 
     // Tab 图标
     tabIconDefault: '#8E8E93',
@@ -148,7 +153,8 @@ export default {
     inputPlaceholder: '#636366',
 
     // 按钮
-    buttonPrimary: '#0A84FF',
+    button: '#000',
+    buttonPrimary: tintColorDark,
     buttonSecondary: '#5E5CE6',
     buttonDisabled: '#38383A',
     buttonText: '#FFFFFF',

theme/index.ts

@@ -8,20 +8,10 @@
 export { default as Colors } from './Colors';
 
 // 导出主题 Hooks
-export {
-  useColorScheme,
-  useThemeColor,
-  useThemeColors,
-  useThemeInfo,
-} from '@/hooks/useTheme';
+export { useColorScheme, useThemeColor, useThemeColors, useThemeInfo } from '@/hooks/useTheme';
 
 // 导出主题组件
-export {
-  ThemedText,
-  ThemedView,
-  Text as ThemeText,
-  View as ThemeView,
-} from '@/components/Themed';
+export { ThemedText, ThemedView, Text as ThemeText, View as ThemeView } from '@/components/Themed';
 
 // 导出主题类型
 export { ThemeEnum } from '@/constants/theme';
@@ -36,4 +26,3 @@ export type {
 // 导出主题工具函数
 export * from './utils';
 export * from './styles';
-

theme/styles.ts

@@ -189,6 +189,22 @@ export const commonStyles = createThemeStyles((colors) => ({
     fontWeight: '600',
   } as TextStyle,
 
+  ghostButton: {
+    backgroundColor: 'transparent',
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: colors.border,
+  } as ViewStyle,
+  ghostButtonText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+  } as TextStyle,
+
   // 输入框样式
   input: {
     backgroundColor: colors.inputBackground,
@@ -264,4 +280,3 @@ export const commonStyles = createThemeStyles((colors) => ({
 export function getThemeStyle<T>(styles: ThemeStyles, theme: ThemeEnum): T {
   return styles[theme];
 }
-

theme/utils.ts

@@ -81,12 +81,7 @@ export function createThemedStyle<T>(
  * const fontSize = selectByTheme(14, 16, theme);
  * ```
  */
-export function selectByTheme<T>(
-  lightValue: T,
-  darkValue: T,
-  orangeValue: T,
-  theme: ThemeEnum
-): T {
+export function selectByTheme<T>(lightValue: T, darkValue: T, orangeValue: T, theme: ThemeEnum): T {
   switch (theme) {
     case ThemeEnum.LIGHT:
       return lightValue;
@@ -152,4 +147,3 @@ export function isLightTheme(theme: ThemeEnum): boolean {
 export function isOrangeTheme(theme: ThemeEnum): boolean {
   return theme === ThemeEnum.ORANGE;
 }
-