fix: improve Toast and add InAppBrowser dark mode for V2EX (#134)

graycreate · claude · web-flow · commit 6f78e0f7a29d · 2025-12-29T08:47:58.000+08:00
Toast improvements: - Reduce shadow opacity from 0.3 to 0.12 for softer appearance - Add version tracking to fix consecutive toast not clearing issue - Reset dismiss timer when new toast content arrives InAppBrowser improvements: - Add dark mode CSS injection for V2EX pages when app is in dark mode - Auto-detect app's appearance setting and apply matching theme - Comprehensive styling: boxes, cells, tags, links, code blocks, buttons, etc. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
diff --git a/V2er/General/RootView.swift b/V2er/General/RootView.swift
@@ -150,7 +150,7 @@ struct RootHostView: View {
         ZStack {
             MainPage()
                 .buttonStyle(.plain)
-                .toast(isPresented: toast.isPresented) {
+                .toast(isPresented: toast.isPresented, version: toast.version.raw) {
                     DefaultToastView(title: toast.title.raw, icon: toast.icon.raw)
                 }
                 .sheet(isPresented: loginState.showLoginView) {
diff --git a/V2er/State/DataFlow/Actions/GlobalActions.swift b/V2er/State/DataFlow/Actions/GlobalActions.swift
@@ -52,6 +52,7 @@ func globalStateReducer(_ state: GlobalState, _ action: Action?) -> (GlobalState
         case let action as ShowToastAction:
             state.toast.title = action.title
             state.toast.icon = action.icon
+            state.toast.version += 1
             state.toast.isPresented = true
             break
         case _ as LaunchFinishedAction:
diff --git a/V2er/View/InAppBrowserView.swift b/V2er/View/InAppBrowserView.swift
@@ -310,6 +310,136 @@ class WebViewHostController: UIViewController, WKNavigationDelegate, WKUIDelegat
         DispatchQueue.main.async {
             self.state.isLoading = false
         }
+        // Inject dark mode CSS for V2EX pages if app is in dark mode
+        injectDarkModeIfNeeded(for: webView)
+    }
+
+    private func injectDarkModeIfNeeded(for webView: WKWebView) {
+        guard let host = webView.url?.host,
+              host.contains("v2ex.com") else {
+            return
+        }
+
+        // Check if app is in dark mode
+        let isDarkMode: Bool
+        if let rootStyle = V2erApp.rootViewController?.overrideUserInterfaceStyle {
+            switch rootStyle {
+            case .dark:
+                isDarkMode = true
+            case .light:
+                isDarkMode = false
+            case .unspecified:
+                // Follow system
+                isDarkMode = traitCollection.userInterfaceStyle == .dark
+            @unknown default:
+                isDarkMode = traitCollection.userInterfaceStyle == .dark
+            }
+        } else {
+            isDarkMode = traitCollection.userInterfaceStyle == .dark
+        }
+
+        guard isDarkMode else { return }
+
+        // Inject V2EX night mode CSS
+        let darkModeCSS = """
+            :root { color-scheme: dark; }
+            body, html {
+                background-color: #1a1a1a !important;
+                color: #e0e0e0 !important;
+            }
+            #Wrapper, #Main, #Rightbar {
+                background-color: #1a1a1a !important;
+            }
+            .box, .cell, .cell_ops {
+                background-color: #262626 !important;
+                border-color: #3a3a3a !important;
+            }
+            .header, .inner {
+                background-color: #262626 !important;
+            }
+            /* Tags */
+            .node, a.node, .tag, a.tag {
+                background-color: #3a3a3a !important;
+                color: #ccc !important;
+            }
+            .topic_info, .votes {
+                background-color: transparent !important;
+            }
+            /* Topic content */
+            .topic-link, .item_title a, h1 {
+                color: #e0e0e0 !important;
+            }
+            .topic_content, .reply_content, .markdown_body {
+                color: #e0e0e0 !important;
+            }
+            /* Links */
+            a {
+                color: #4a9eff !important;
+            }
+            a.node:hover, a.tag:hover {
+                background-color: #4a4a4a !important;
+            }
+            /* Meta text */
+            .gray, .fade, .small, .ago, .no {
+                color: #888 !important;
+            }
+            .snow {
+                background-color: #333 !important;
+            }
+            /* Code blocks */
+            pre, code {
+                background-color: #333 !important;
+                color: #e0e0e0 !important;
+            }
+            /* Forms */
+            input, textarea, select {
+                background-color: #333 !important;
+                color: #e0e0e0 !important;
+                border-color: #555 !important;
+            }
+            /* Tabs */
+            .tab, .tab_current {
+                background-color: #333 !important;
+                color: #ccc !important;
+            }
+            .tab:hover {
+                background-color: #444 !important;
+            }
+            /* Buttons */
+            .super.button, .normal.button, input[type=submit] {
+                background-color: #444 !important;
+                color: #e0e0e0 !important;
+                border-color: #555 !important;
+            }
+            /* Subtle backgrounds */
+            .subtle {
+                background-color: #2a2a2a !important;
+            }
+            /* Thank area */
+            .thank_area {
+                background-color: transparent !important;
+            }
+            /* Member info */
+            .member-info, .balance_area {
+                background-color: #262626 !important;
+            }
+            /* Separator */
+            hr, .sep {
+                border-color: #3a3a3a !important;
+                background-color: #3a3a3a !important;
+            }
+            /* Page title */
+            #page-title {
+                background-color: #1a1a1a !important;
+            }
+            /* Embedded */
+            .embedded {
+                background-color: #2a2a2a !important;
+                border-color: #3a3a3a !important;
+            }
+            """
+        let js = "var style = document.createElement('style'); style.innerHTML = `\(darkModeCSS)`; document.head.appendChild(style);"
+        webView.evaluateJavaScript(js, completionHandler: nil)
     }
 
     func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
diff --git a/V2er/View/Login/LoginPage.swift b/V2er/View/Login/LoginPage.swift
@@ -32,7 +32,7 @@ struct LoginPage: StateView {
                     dismiss()
                 }
             }
-            .toast(isPresented: toast.isPresented, paddingTop: 40) {
+            .toast(isPresented: toast.isPresented, paddingTop: 40, version: toast.version.raw) {
                 DefaultToastView(title: toast.title.raw, icon: toast.icon.raw)
             }
             .alert(isPresented: bindingState.showAlert) {
diff --git a/V2er/View/Widget/Toast.swift b/V2er/View/Widget/Toast.swift
@@ -21,6 +21,7 @@ final class Toast {
     var isPresented: Bool = false
     var title: String = ""
     var icon: String = ""
+    var version: Int = 0 // Incremented on each new toast to trigger timer reset
 
     static func show(_ title: String, icon: String = .empty, target: Reducer = .global) {
         guard title.notEmpty() || icon.notEmpty() else { return }
@@ -71,6 +72,7 @@ struct DefaultToastView: View {
 private struct ToastContainerView<Content: View>: View {
     @Binding var isPresented: Bool
     let paddingTop: CGFloat
+    let version: Int
     let content: Content
 
     @State private var dismissTask: Task<Void, Never>?
@@ -81,7 +83,7 @@ private struct ToastContainerView<Content: View>: View {
         content
             .background(Color.secondaryBackground.opacity(0.98))
             .cornerRadius(99)
-            .shadow(color: Color.primaryText.opacity(0.3), radius: 3)
+            .shadow(color: Color.primaryText.opacity(0.12), radius: 4, y: 2)
             .padding(.top, paddingTop)
             .transition(.move(edge: .top).combined(with: .opacity))
             .zIndex(1)
@@ -101,6 +103,11 @@ private struct ToastContainerView<Content: View>: View {
                     scheduleDismiss()
                 }
             }
+            .onChange(of: version) { _ in
+                // New toast content: reset timer
+                toastId = UUID()
+                scheduleDismiss()
+            }
     }
 
     private func scheduleDismiss() {
@@ -133,13 +140,15 @@ private struct ToastContainerView<Content: View>: View {
 extension View {
     func toast<Content: View>(isPresented: Binding<Bool>,
                               paddingTop: CGFloat = 0,
+                              version: Int = 0,
                               @ViewBuilder content: () -> Content?) -> some View {
         ZStack(alignment: .top) {
             self
             if isPresented.wrappedValue, let toastContent = content() {
                 ToastContainerView(
                     isPresented: isPresented,
                     paddingTop: paddingTop,
+                    version: version,
                     content: toastContent
                 )
             }

Original file line number	Diff line number	Diff line change
`@@ -150,7 +150,7 @@ struct RootHostView: View {`
`150`	`150`	`ZStack {`
`151`	`151`	`MainPage()`
`152`	`152`	`.buttonStyle(.plain)`
`153`		`- .toast(isPresented: toast.isPresented) {`
	`153`	`+ .toast(isPresented: toast.isPresented, version: toast.version.raw) {`
`154`	`154`	`DefaultToastView(title: toast.title.raw, icon: toast.icon.raw)`
`155`	`155`	`}`
`156`	`156`	`.sheet(isPresented: loginState.showLoginView) {`
Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ struct LoginPage: StateView {`
`32`	`32`	`dismiss()`
`33`	`33`	`}`
`34`	`34`	`}`
`35`		`- .toast(isPresented: toast.isPresented, paddingTop: 40) {`
	`35`	`+ .toast(isPresented: toast.isPresented, paddingTop: 40, version: toast.version.raw) {`
`36`	`36`	`DefaultToastView(title: toast.title.raw, icon: toast.icon.raw)`
`37`	`37`	`}`
`38`	`38`	`.alert(isPresented: bindingState.showAlert) {`