feat(主题适配): 添加暗黑模式支持，调整UI组件颜色以适配不同主题

本次提交主要针对UI组件进行了颜色调整，使其能够根据系统主题自动切换颜色。具体修改包括按钮、背景、文本、边框等组件的颜色适配，确保在暗黑模式下也能有良好的视觉效果。这一改进提升了用户体验，并增强了应用的视觉一致性。
1 year ago · 35abbbdbc5
2 changed files with 80 additions and 30 deletions
--- a/lib/modules/agent/views/agent_view.dart
+++ b/lib/modules/agent/views/agent_view.dart
@ -290,12 +290,16 @@ class AgentView extends StatelessWidget {
                          width: 44,
                          height: 44,
                          decoration: BoxDecoration(
-                            color: Colors.grey[200],
+                            color: isDarkMode
+                                ? Colors.grey[800]
+                                : Colors.grey[200],
                            borderRadius: BorderRadius.circular(22),
                          ),
                          child: Icon(
                            isTextMode ? Icons.mic_none : Icons.keyboard,
-                            color: Colors.grey[700],
+                            color: isDarkMode
+                                ? Colors.grey[300]
+                                : Colors.grey[700],
                            size: 22,
                          ),
                        ),
@ -315,10 +319,15 @@ class AgentView extends StatelessWidget {
                            //height: 44,
                            padding: const EdgeInsets.symmetric(horizontal: 16),
                            decoration: BoxDecoration(
-                              color: Colors.grey[200],
+                              color: isDarkMode
+                                  ? Colors.grey[800]
+                                  : Colors.grey[200],
                              borderRadius: BorderRadius.circular(22),
                              border: Border.all(
-                                color: Colors.grey.withOpacity(0.1),
+                                color: isDarkMode
+                                    ? Colors.grey[
+                                        800]! // 修改: 从 Colors.grey[700] 改为 Colors.grey[800]
+                                    : Colors.grey.withOpacity(0.1),
                                width: 1.0,
                              ),
                            ),
@ -338,7 +347,7 @@ class AgentView extends StatelessWidget {
                                        fontSize: 15,
                                        color: isDarkMode
                                            ? Colors.white
-                                            : Colors.black87,
+                                            : Colors.grey[800],
                                      ),
                                      decoration: InputDecoration(
                                        hintText: isImageActive
@ -386,10 +395,14 @@ class AgentView extends StatelessWidget {
                              padding:
                                  const EdgeInsets.symmetric(horizontal: 16),
                              decoration: BoxDecoration(
-                                color: Colors.grey[200],
+                                color: isDarkMode
+                                    ? Colors.grey[800]
+                                    : Colors.grey[200],
                                borderRadius: BorderRadius.circular(22),
                                border: Border.all(
-                                  color: Colors.grey.withOpacity(0.1),
+                                  color: isDarkMode
+                                      ? Colors.grey[800]!
+                                      : Colors.grey.withOpacity(0.1),
                                  width: 1.0,
                                ),
                              ),
@ -450,13 +463,14 @@ class AgentView extends StatelessWidget {
                      width: 44,
                      height: 44,
                      decoration: BoxDecoration(
-                        color: Colors.grey[200],
+                        color: isDarkMode ? Colors.grey[800] : Colors.grey[200],
                        borderRadius: BorderRadius.circular(22),
                      ),
                      child: PopupMenuButton<String>(
                        icon: Icon(
                          Icons.add_photo_alternate_outlined,
-                          color: Colors.grey[700],
+                          color:
+                              isDarkMode ? Colors.grey[300] : Colors.grey[700],
                          size: 22,
                        ),
                        padding: EdgeInsets.zero,
--- a/lib/modules/agent/views/message_bubble.dart
+++ b/lib/modules/agent/views/message_bubble.dart
@ -87,7 +87,9 @@ class MessageBubble extends GetView<AgentController> {
                    timeFormat.format(timestamp),
                    style: TextStyle(
                      fontSize: 10,
-                      color: Colors.grey[500],
+                      color: Theme.of(context).brightness == Brightness.dark
+                          ? Colors.grey[400]
+                          : Colors.grey[500],
                      fontWeight: FontWeight.w400,
                    ),
                  ),
@ -103,12 +105,16 @@ class MessageBubble extends GetView<AgentController> {

  /// 获取气泡颜色
  Color _getBubbleColor(BuildContext context) {
+    final isDarkMode = Theme.of(context).brightness == Brightness.dark;
+
    if (isUser) {
      return isRecognizing
          ? Color(0xFF3B82F6).withOpacity(0.8) // 识别中的用户消息使用半透明的蓝色
          : Color(0xFF3B82F6); // 使用更明亮的蓝色
    } else {
-      return Color(0xFFF1F5F9); // 更淡的灰色背景
+      return isDarkMode
+          ? Color(0xFF2A2A2A)
+          : Color(0xFFF1F5F9); // 根据主题调整AI消息背景色
    }
  }

@ -285,7 +291,11 @@ class MessageBubble extends GetView<AgentController> {
    return Text(
      message,
      style: TextStyle(
-        color: isUser ? Colors.white : Colors.black87,
+        color: isUser
+            ? Colors.white
+            : (Theme.of(context).brightness == Brightness.dark
+                ? Colors.white.withOpacity(0.9)
+                : Colors.black87),
        fontSize: 14,
        height: 1.4,
        fontWeight: FontWeight.w400,
@ -317,13 +327,15 @@ class MessageBubble extends GetView<AgentController> {
  /// 构建音乐内容卡片
  Widget _buildMusicContent(
      BuildContext context, List<Map<String, dynamic>> playlist) {
+    final isDarkMode = Theme.of(context).brightness == Brightness.dark;
+
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
-        const Text(
+        Text(
          '以下是一些推荐的音乐:',
          style: TextStyle(
-            color: Colors.black87,
+            color: isDarkMode ? Colors.white.withOpacity(0.9) : Colors.black87,
            fontSize: 14,
            height: 1.4,
            fontWeight: FontWeight.w400,
@ -361,7 +373,9 @@ class MessageBubble extends GetView<AgentController> {
                  style: TextStyle(
                    fontSize: 13,
                    fontWeight: FontWeight.w600,
-                    color: Colors.grey[700],
+                    color: Theme.of(context).brightness == Brightness.dark
+                        ? Colors.grey[300]
+                        : Colors.grey[700],
                  ),
                ),
              ],
@ -381,7 +395,13 @@ class MessageBubble extends GetView<AgentController> {
                children: [
                  _buildMusicItem(context, id, name, url, singer, image),
                  if (index != playlist.length - 1)
-                    Divider(height: 1, thickness: 1, color: Colors.grey[100]),
+                    Divider(
+                      height: 1,
+                      thickness: 1,
+                      color: Theme.of(context).brightness == Brightness.dark
+                          ? Colors.grey[800]
+                          : Colors.grey[100],
+                    ),
                ],
              );
            }).toList(),
@ -580,6 +600,8 @@ class MessageBubble extends GetView<AgentController> {
  Widget _buildMusicItem(BuildContext context, String id, String name,
      String url, String singer, String image) {
    final controller = Get.find<AgentController>(); // 获取控制器
+    final isDarkMode = Theme.of(context).brightness == Brightness.dark;
+
    Map<String, String> song = {
      'id': id,
      'url': url,
@ -591,11 +613,11 @@ class MessageBubble extends GetView<AgentController> {
    return Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
-        color: Colors.white,
+        color: isDarkMode ? Color(0xFF1E1E1E) : Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
-            color: Colors.black.withOpacity(0.03),
+            color: Colors.black.withOpacity(isDarkMode ? 0.2 : 0.03),
            blurRadius: 3,
            spreadRadius: 1,
            offset: const Offset(0, 1),
@ -691,6 +713,8 @@ class MessageBubble extends GetView<AgentController> {
  /// 构建地点项目
  Widget _buildLocationItem(
      String name, String description, BuildContext context) {
+    final isDarkMode = Theme.of(context).brightness == Brightness.dark;
+
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8),
      child: Row(
@ -699,7 +723,7 @@ class MessageBubble extends GetView<AgentController> {
            width: 38,
            height: 38,
            decoration: BoxDecoration(
-              color: Colors.blue[50],
+              color: isDarkMode ? Color(0xFF1A365D) : Colors.blue[50],
              borderRadius: BorderRadius.circular(8),
            ),
            child: Icon(
@ -718,7 +742,9 @@ class MessageBubble extends GetView<AgentController> {
                  style: TextStyle(
                    fontSize: 13,
                    fontWeight: FontWeight.w500,
-                    color: Colors.grey[800],
+                    color: isDarkMode
+                        ? Colors.white.withOpacity(0.9)
+                        : Colors.grey[800],
                  ),
                  overflow: TextOverflow.ellipsis,
                ),
@ -727,7 +753,7 @@ class MessageBubble extends GetView<AgentController> {
                  description,
                  style: TextStyle(
                    fontSize: 12,
-                    color: Colors.grey[600],
+                    color: isDarkMode ? Colors.grey[400] : Colors.grey[600],
                  ),
                  overflow: TextOverflow.ellipsis,
                ),
@ -749,13 +775,15 @@ class MessageBubble extends GetView<AgentController> {
  /// 构建天气内容卡片
  Widget _buildWeatherContent(BuildContext context, String city,
      Map<String, dynamic> now, List<Map<String, dynamic>> days) {
+    final isDarkMode = Theme.of(context).brightness == Brightness.dark;
+
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '查询天气情况:',
          style: TextStyle(
-            color: Colors.black87,
+            color: isDarkMode ? Colors.white.withOpacity(0.9) : Colors.black87,
            fontSize: 14,
            height: 1.4,
            fontWeight: FontWeight.w400,
@ -765,15 +793,21 @@ class MessageBubble extends GetView<AgentController> {
        Container(
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
-            gradient: LinearGradient(
-              begin: Alignment.topLeft,
-              end: Alignment.bottomRight,
-              colors: [Color(0xFF60A5FA), Color(0xFF3B82F6)],
-            ),
+            gradient: isDarkMode
+                ? LinearGradient(
+                    begin: Alignment.topLeft,
+                    end: Alignment.bottomRight,
+                    colors: [Color(0xFF1E40AF), Color(0xFF1E3A8A)],
+                  )
+                : LinearGradient(
+                    begin: Alignment.topLeft,
+                    end: Alignment.bottomRight,
+                    colors: [Color(0xFF60A5FA), Color(0xFF3B82F6)],
+                  ),
            borderRadius: BorderRadius.circular(12),
            boxShadow: [
              BoxShadow(
-                color: Colors.black.withOpacity(0.1),
+                color: Colors.black.withOpacity(isDarkMode ? 0.3 : 0.1),
                blurRadius: 8,
                offset: const Offset(0, 2),
              ),
@ -850,7 +884,7 @@ class MessageBubble extends GetView<AgentController> {
              SizedBox(height: 16),
              Container(
                height: 1,
-                color: Colors.white.withOpacity(0.2),
+                color: Colors.white.withOpacity(isDarkMode ? 0.15 : 0.2),
              ),
              SizedBox(height: 16),
              const Text(
@ -896,7 +930,9 @@ class MessageBubble extends GetView<AgentController> {
              Container(
                padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12),
                decoration: BoxDecoration(
-                  color: Colors.white.withOpacity(0.2),
+                  color: isDarkMode
+                      ? Colors.white.withOpacity(0.15)
+                      : Colors.white.withOpacity(0.2),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: const Row(