feat: update color scheme and styles across components for improved UI consistency

2026-02-16 05:04:42 +08:00 · 2025-07-18 22:21:33 +08:00
parent 2fd30c8fd7
commit 4c633febdc
13 changed files with 71 additions and 63 deletions
--- a/components/PlayerControls.tsx
+++ b/components/PlayerControls.tsx
@@ -168,7 +168,7 @@ const styles = StyleSheet.create({
    position: "absolute",
    left: 0,
    height: 8,
-    backgroundColor: "#ff0000",
+    backgroundColor: "#fff",
    borderRadius: 4,
  },
  progressBarTouchable: {
--- a/components/SeekingBar.tsx
+++ b/components/SeekingBar.tsx
@@ -80,7 +80,7 @@ const styles = StyleSheet.create({
  },
  seekingBarFilled: {
    height: "100%",
-    backgroundColor: "#ff0000",
+    backgroundColor: "#fff",
    borderRadius: 2.5,
  },
 });
--- a/components/SourceSelectionModal.tsx
+++ b/components/SourceSelectionModal.tsx
@@ -72,7 +72,9 @@ const styles = StyleSheet.create({
  sourceItem: {
    paddingVertical: 2,
    margin: 4,
-    width: "31%",
+    marginLeft: 10,
+    marginRight: 8,
+    width: "30%",
  },
  sourceItemText: {
    fontSize: 14,
--- a/components/StyledButton.tsx
+++ b/components/StyledButton.tsx
@@ -29,11 +29,10 @@ export const StyledButton = forwardRef<View, StyledButtonProps>(
          color: colors.text,
        },
        selectedButton: {
-          backgroundColor: colors.tint,
+          backgroundColor: colors.primary,
        },
        focusedButton: {
-          backgroundColor: colors.link,
-          borderColor: colors.background,
+          borderColor: colors.primary,
        },
        selectedText: {
          color: Colors.dark.text,
@@ -47,11 +46,11 @@ export const StyledButton = forwardRef<View, StyledButtonProps>(
          color: colors.text,
        },
        focusedButton: {
-          backgroundColor: colors.link,
+          backgroundColor: colors.primary,
          borderColor: colors.background,
        },
        selectedButton: {
-          backgroundColor: "rgba(0, 122, 255, 0.3)",
+          backgroundColor: colors.primary,
        },
        selectedText: {
          color: colors.link,
@@ -65,7 +64,8 @@ export const StyledButton = forwardRef<View, StyledButtonProps>(
          color: colors.text,
        },
        focusedButton: {
-          backgroundColor: "rgba(119, 119, 119, 0.9)",
+          backgroundColor: "rgba(119, 119, 119, 0.2)",
+          borderColor: colors.primary,
        },
        selectedButton: {},
        selectedText: {},
--- a/components/VideoCard.tv.tsx
+++ b/components/VideoCard.tv.tsx
@@ -6,6 +6,7 @@ import { Heart, Star, Play, Trash2 } from "lucide-react-native";
 import { FavoriteManager, PlayRecordManager } from "@/services/storage";
 import { API, api } from "@/services/api";
 import { ThemedText } from "@/components/ThemedText";
+import { Colors } from "@/constants/Colors";

 interface VideoCardProps {
  id: string;
@@ -209,6 +210,9 @@ const styles = StyleSheet.create({
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: "rgba(0,0,0,0.3)",
+    borderColor: Colors.dark.border,
+    borderWidth: 2,
+    borderRadius: 8,
    justifyContent: "center",
    alignItems: "center",
  },
--- a/components/VideoLoadingAnimation.tsx
+++ b/components/VideoLoadingAnimation.tsx
@@ -199,17 +199,17 @@ const VideoLoadingAnimation: React.FC<VideoLoadingAnimationProps> = ({ showProgr
          </View>
        </Animated.View>

-        <View style={styles.loadingDots}>
+        {/* <View style={styles.loadingDots}>
          <Animated.View style={[styles.dot, animatedStyles.bounce[0]]} />
          <Animated.View style={[styles.dot, animatedStyles.bounce[1]]} />
          <Animated.View style={[styles.dot, animatedStyles.bounce[2]]} />
-        </View>
+        </View> */}

        {showProgressBar && (
          <View style={styles.progressBar}>
            <Animated.View style={[styles.progressFill, animatedStyles.progress]}>
              <LinearGradient
-                colors={["#4fd1c7", "#06b6d4", "#3b82f6", "#8b5cf6"]}
+                colors={["#00bb5e", "#feff5f"]}
                style={StyleSheet.absoluteFill}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 0 }}
--- a/components/settings/APIConfigSection.tsx
+++ b/components/settings/APIConfigSection.tsx
@@ -6,6 +6,7 @@ import { SettingsSection } from "./SettingsSection";
 import { useSettingsStore } from "@/stores/settingsStore";
 import { useRemoteControlStore } from "@/stores/remoteControlStore";
 import { useButtonAnimation } from "@/hooks/useAnimation";
+import { Colors } from "@/constants/Colors";

 interface APIConfigSectionProps {
  onChanged: () => void;
@@ -126,8 +127,8 @@ const styles = StyleSheet.create({
    borderColor: "transparent",
  },
  inputFocused: {
-    borderColor: "#007AFF",
-    shadowColor: "#007AFF",
+    borderColor: Colors.dark.primary,
+    shadowColor: Colors.dark.primary,
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.8,
    shadowRadius: 10,
--- a/components/settings/LiveStreamSection.tsx
+++ b/components/settings/LiveStreamSection.tsx
@@ -6,6 +6,7 @@ import { SettingsSection } from "./SettingsSection";
 import { useSettingsStore } from "@/stores/settingsStore";
 import { useRemoteControlStore } from "@/stores/remoteControlStore";
 import { useButtonAnimation } from "@/hooks/useAnimation";
+import { Colors } from "@/constants/Colors";

 interface LiveStreamSectionProps {
  onChanged: () => void;
@@ -120,8 +121,8 @@ const styles = StyleSheet.create({
    borderColor: "transparent",
  },
  inputFocused: {
-    borderColor: "#007AFF",
-    shadowColor: "#007AFF",
+    borderColor: Colors.dark.primary,
+    shadowColor: Colors.dark.primary,
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.8,
    shadowRadius: 10,
--- a/components/settings/RemoteInputSection.tsx
+++ b/components/settings/RemoteInputSection.tsx
@@ -6,6 +6,7 @@ import { SettingsSection } from "./SettingsSection";
 import { useSettingsStore } from "@/stores/settingsStore";
 import { useRemoteControlStore } from "@/stores/remoteControlStore";
 import { useButtonAnimation } from "@/hooks/useAnimation";
+import { Colors } from "@/constants/Colors";

 interface RemoteInputSectionProps {
  onChanged: () => void;
@@ -59,7 +60,7 @@ export const RemoteInputSection: React.FC<RemoteInputSectionProps> = ({ onChange
          <Switch
            value={remoteInputEnabled}
            onValueChange={() => {}} // 禁用Switch的直接交互
-            trackColor={{ false: "#767577", true: "#007AFF" }}
+            trackColor={{ false: "#767577", true: Colors.dark.primary }}
            thumbColor={remoteInputEnabled ? "#ffffff" : "#f4f3f4"}
            pointerEvents="none"
          />
@@ -70,7 +71,7 @@ export const RemoteInputSection: React.FC<RemoteInputSectionProps> = ({ onChange
        <View style={styles.statusContainer}>
          <View style={styles.statusItem}>
            <ThemedText style={styles.statusLabel}>服务状态：</ThemedText>
-            <ThemedText style={[styles.statusValue, { color: isServerRunning ? "#00FF00" : "#FF6B6B" }]}>
+            <ThemedText style={[styles.statusValue, { color: isServerRunning ? Colors.dark.primary : "#FF6B6B" }]}>
              {isServerRunning ? "运行中" : "已停止"}
            </ThemedText>
          </View>
--- a/components/settings/SettingsSection.tsx
+++ b/components/settings/SettingsSection.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { StyleSheet, Pressable } from "react-native";
 import { ThemedView } from "@/components/ThemedView";
+import { Colors } from "@/constants/Colors";

 interface SettingsSectionProps {
  children: React.ReactNode;
@@ -9,12 +10,7 @@ interface SettingsSectionProps {
  focusable?: boolean;
 }

-export const SettingsSection: React.FC<SettingsSectionProps> = ({ 
-  children, 
-  onFocus, 
-  onBlur, 
-  focusable = false 
-}) => {
+export const SettingsSection: React.FC<SettingsSectionProps> = ({ children, onFocus, onBlur, focusable = false }) => {
  const [isFocused, setIsFocused] = useState(false);

  const handleFocus = () => {
@@ -28,20 +24,12 @@ export const SettingsSection: React.FC<SettingsSectionProps> = ({
  };

  if (!focusable) {
-    return (
-      <ThemedView style={styles.section}>
-        {children}
-      </ThemedView>
-    );
+    return <ThemedView style={styles.section}>{children}</ThemedView>;
  }

  return (
    <ThemedView style={[styles.section, isFocused && styles.sectionFocused]}>
-      <Pressable
-        style={styles.sectionPressable}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-      >
+      <Pressable style={styles.sectionPressable} onFocus={handleFocus} onBlur={handleBlur}>
        {children}
      </Pressable>
    </ThemedView>
@@ -57,10 +45,10 @@ const styles = StyleSheet.create({
    borderColor: "#333",
  },
  sectionFocused: {
-    borderColor: "#007AFF",
+    borderColor: Colors.dark.primary,
    backgroundColor: "#007AFF10",
  },
  sectionPressable: {
    width: "100%",
  },
-});
+});