feat: update key views to use adaptive colors for dark mode

graycreate · claude · graycreate · commit ede47058fccd · 2025-07-12T19:50:41.000+08:00
Updated UserDetailPage, TagDetailPage, and Webview to use adaptive colors: - Replaced hardcoded .white with Color.primaryText/itemBackground - Replaced .black with Color.primaryText - Replaced .gray with Color.secondaryText - Updated CSS colors in Webview for proper dark mode support - Adjusted overlay opacity for better visibility in both themes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/V2er/View/Me/UserDetailPage.swift b/V2er/View/Me/UserDetailPage.swift
@@ -42,7 +42,7 @@ struct UserDetailPage: StateView {
     }
     
     var foreGroundColor: SwiftUI.Color {
-        return shouldHideNavbar ? .white.opacity(0.9) : .tintColor
+        return shouldHideNavbar ? Color.primaryText.opacity(0.9) : .tintColor
     }
     
     var body: some View {
@@ -77,7 +77,7 @@ struct UserDetailPage: StateView {
                         .fade(duration: 0.25)
                         .resizable()
                         .blur(radius: 80, opaque: true)
-                        .overlay(Color.black.opacity(withAnimation {shouldHideNavbar ? 0.3 : 0.1}))
+                        .overlay(Color.primaryText.opacity(withAnimation {shouldHideNavbar ? 0.6 : 0.2}))
                         .frame(maxWidth: .infinity, maxHeight: height)
                     Spacer().background(.clear)
                 }
@@ -172,7 +172,7 @@ struct UserDetailPage: StateView {
             AvatarView(url: model.avatar, size: heightOfNodeImage)
             HStack(alignment: .center,spacing: 4) {
                 Circle()
-                    .fill(state.model.isOnline ? .green : .gray)
+                    .fill(state.model.isOnline ? .green : Color.secondaryText)
                     .frame(width: 8, height: 8)
                 Text(model.userName)
                     .font(.headline.weight(.semibold))
@@ -203,7 +203,7 @@ struct UserDetailPage: StateView {
         .background(Color.lightGray, in: RoundedRectangle(cornerRadius: 10))
         .padding(.horizontal, 12)
         .padding(.vertical, 10)
-        .background(.white)
+        .background(Color.itemBackground)
         .clipCorner(12, corners: [.topLeft, .topRight])
     }
     
@@ -298,7 +298,7 @@ struct UserDetailPage: StateView {
                         NavigationLink(destination: TagDetailPage()) {
                             Text(data.tag)
                                 .font(.footnote)
-                                .foregroundColor(.black)
+                                .foregroundColor(Color.primaryText)
                                 .lineLimit(1)
                                 .padding(.horizontal, 14)
                                 .padding(.vertical, 8)
@@ -339,14 +339,14 @@ struct UserDetailPage: StateView {
             } label: {
                 Text(title)
                     .fontWeight(.bold)
-                    .foregroundColor(isSelected ? .white.opacity(0.9) : .tintColor)
+                    .foregroundColor(isSelected ? Color.itemBackground.opacity(0.9) : .tintColor)
                     .frame(maxWidth: .infinity)
                     .padding(.vertical, 8)
                     .background {
                         VStack {
                             if isSelected {
                                 RoundedRectangle(cornerRadius: 10)
-                                    .fill(.black)
+                                    .fill(Color.primaryText)
                                     .matchedGeometryEffect(id: "TAB", in: animation)
                             }
                         }
diff --git a/V2er/View/Tag/TagDetailPage.swift b/V2er/View/Tag/TagDetailPage.swift
@@ -40,7 +40,7 @@ struct TagDetailPage: StateView, InstanceIdentifiable {
     }
     
     private var foreGroundColor: Color {
-        shouldHideNavbar ? .white.opacity(0.9) : .tintColor
+        shouldHideNavbar ? Color.primaryText.opacity(0.9) : .tintColor
     }
 
     private var statusBarStyle: UIStatusBarStyle {
@@ -77,7 +77,7 @@ struct TagDetailPage: StateView, InstanceIdentifiable {
                         .fade(duration: 0.25)
                         .resizable()
                         .blur(radius: 80, opaque: true)
-                        .overlay(Color.black.opacity(withAnimation {shouldHideNavbar ? 0.3 : 0.1}))
+                        .overlay(Color.primaryText.opacity(withAnimation {shouldHideNavbar ? 0.6 : 0.2}))
                         .frame(height: bannerViewHeight * 1.2 + max(scrollY, 0))
                     Spacer()
                 }
@@ -206,7 +206,7 @@ struct TagDetailPage: StateView, InstanceIdentifiable {
                 }
             }
         }
-        .background(.white)
+        .background(Color.itemBackground)
         .clipCorner(12, corners: [.topLeft, .topRight])
     }
 
diff --git a/V2er/View/Widget/RichTextView/Webview.swift b/V2er/View/Widget/RichTextView/Webview.swift
@@ -111,7 +111,7 @@ struct Webview : UIViewRepresentable {
             return """
             <style type='text/css'>
                 img{max-height: 100%; min-height: 100%; height:auto; max-width: 100%; width:auto;margin-bottom:5px; border-radius: \(imageRadius)px;}
-            h1, h2, h3, h4, h5, h6, p, dl, ol, ul, pre, blockquote {text-align:left|right|center; line-height: \(lineHeight)%; font-family: '\(fontName(fontType: self.fontType))'; color: #000000 \(colorImportant == false ? "" : "!important"); }
+            h1, h2, h3, h4, h5, h6, p, dl, ol, ul, pre, blockquote {text-align:left|right|center; line-height: \(lineHeight)%; font-family: '\(fontName(fontType: self.fontType))'; color: #1C1C1E \(colorImportant == false ? "" : "!important"); }
                 iframe{width:100%; height:250px;}
             
             </style>
@@ -121,7 +121,7 @@ struct Webview : UIViewRepresentable {
             return """
             <style type='text/css'>
                 img{max-height: 100%; min-height: 100%; height:auto; max-width: 100%; width:auto;margin-bottom:5px; border-radius: \(imageRadius)px;}
-            h1, h2, h3, h4, h5, h6, p, dl, ol, ul, pre, blockquote {text-align:left|right|center; line-height: \(lineHeight)%; font-family: '\(fontName(fontType: self.fontType))'; color: #F2F2F2 \(colorImportant == false ? "" : "!important"); }
+            h1, h2, h3, h4, h5, h6, p, dl, ol, ul, pre, blockquote {text-align:left|right|center; line-height: \(lineHeight)%; font-family: '\(fontName(fontType: self.fontType))'; color: #F2F2F7 \(colorImportant == false ? "" : "!important"); }
                 iframe{width:100%; height:250px;}
             
             </style>
@@ -132,12 +132,12 @@ struct Webview : UIViewRepresentable {
             <style type='text/css'>
             @media (prefers-color-scheme: light) {
                 img{max-height: 100%; min-height: 100%; height:auto; max-width: 100%; width:auto;margin-bottom:5px; border-radius: \(imageRadius)px;}
-            h1, h2, h3, h4, h5, h6, p, dl, ol, ul, pre, blockquote {text-align:left|right|center; line-height: \(lineHeight)%; font-family: '\(fontName(fontType: self.fontType))'; color: #000000 \(colorImportant == false ? "" : "!important"); }
+            h1, h2, h3, h4, h5, h6, p, dl, ol, ul, pre, blockquote {text-align:left|right|center; line-height: \(lineHeight)%; font-family: '\(fontName(fontType: self.fontType))'; color: #1C1C1E \(colorImportant == false ? "" : "!important"); }
                 iframe{width:100%; height:250px;}
             }
             @media (prefers-color-scheme: dark) {
                 img{max-height: 100%; min-height: 100%; height:auto; max-width: 100%; width:auto;margin-bottom:5px; border-radius: \(imageRadius)px;}
-            h1, h2, h3, h4, h5, h6, p, dl, ol, ul, pre, blockquote {text-align:left|right|center; line-height: \(lineHeight)%; font-family: '\(fontName(fontType: self.fontType))'; color: #F2F2F2 \(colorImportant == false ? "" : "!important"); }
+            h1, h2, h3, h4, h5, h6, p, dl, ol, ul, pre, blockquote {text-align:left|right|center; line-height: \(lineHeight)%; font-family: '\(fontName(fontType: self.fontType))'; color: #F2F2F7 \(colorImportant == false ? "" : "!important"); }
                 iframe{width:100%; height:250px;}
             }
             </style>

Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ struct TagDetailPage: StateView, InstanceIdentifiable {`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`private var foreGroundColor: Color {`
`43`		`- shouldHideNavbar ? .white.opacity(0.9) : .tintColor`
	`43`	`+ shouldHideNavbar ? Color.primaryText.opacity(0.9) : .tintColor`
`44`	`44`	`}`
`45`	`45`
`46`	`46`	`private var statusBarStyle: UIStatusBarStyle {`
`@@ -77,7 +77,7 @@ struct TagDetailPage: StateView, InstanceIdentifiable {`
`77`	`77`	`.fade(duration: 0.25)`
`78`	`78`	`.resizable()`
`79`	`79`	`.blur(radius: 80, opaque: true)`
`80`		`- .overlay(Color.black.opacity(withAnimation {shouldHideNavbar ? 0.3 : 0.1}))`
	`80`	`+ .overlay(Color.primaryText.opacity(withAnimation {shouldHideNavbar ? 0.6 : 0.2}))`
`81`	`81`	`.frame(height: bannerViewHeight * 1.2 + max(scrollY, 0))`
`82`	`82`	`Spacer()`
`83`	`83`	`}`
`@@ -206,7 +206,7 @@ struct TagDetailPage: StateView, InstanceIdentifiable {`
`206`	`206`	`}`
`207`	`207`	`}`
`208`	`208`	`}`
`209`		`- .background(.white)`
	`209`	`+ .background(Color.itemBackground)`
`210`	`210`	`.clipCorner(12, corners: [.topLeft, .topRight])`
`211`	`211`	`}`
`212`	`212`