Fix: Dark mode support improvements #15

graycreate · 2025-09-13T14:05:35Z

Summary

Fixed hard-coded colors across multiple views that were not adapting to dark mode
Improved Two-Step Login dialog for better dark mode visibility
Fixed Toast notifications that were invisible in dark mode

Changes Made

Color Fixes

ReplyItemView: Changed owner badge border from hard-coded black to dynamic primaryText
AuthorInfoView: Updated node tag text color to use primaryText
CreateTopicPage: Replaced white/gray colors with dynamic theme colors
TwoStepLoginPage: Added proper text field styling and dynamic colors
Toast: Fixed text and background colors for dark mode visibility
SearchPage/SettingsPage/NodeChooserPage: Replaced gray colors with secondaryText

Testing

Built and tested on iOS Simulator with dark mode enabled
Verified all modified views display correctly in both light and dark modes
Screenshots taken to document the improvements

Related Issues

Fixes dark mode adaptation issues reported by users

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>

@retroactive

- Remove UIUserInterfaceStyle restriction from Info.plist to allow system theme - Create adaptive color system with light/dark variants for all UI elements - Add 15 new color sets with proper dark mode support - Implement appearance settings with light/dark/system options - Update main app to apply user's color scheme preference - Add appearance toggle in settings page with Chinese localization - Update key views to use adaptive colors instead of hardcoded values - Fix navigation bar appearance to adapt to dark mode - Add @retroactive attribute to fix UINavigationController extension warning - Make color properties public to fix accessibility issues This enables full dark mode support throughout the app, automatically adapting to system preferences or user's manual selection. 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

- Replace primaryText overlay with dynamic(light: .black, dark: .white) to maintain proper darkening effect in light mode and lightening in dark mode - Fixes build issues by moving SettingActions into SettingState temporarily - Restores original overlay opacity values (0.3/0.1)

@retroactive

The @retroactive attribute is only available in Swift 6, but the CI uses an older version of Swift. Removing this attribute to fix the build failure.

- Change NodeView text from hardcoded black to primaryText color - Add secondaryText color to comment count labels for better visibility - Add Appearance Settings option to Settings page menu

- Use dynamic colors for NodeView text (#666666 light, #CCCCCC dark) - Ensure proper contrast between text and background in both modes

- Changed from semi-transparent bodyText to fully opaque primaryText - Ensures proper contrast in both light and dark modes - Fixes issue where titles were invisible or hard to read

- Added colorScheme environment and store access to HtmlView - Calculate isDark based on app appearance setting (light/dark/system) - Pass correct dark mode state to JavaScript for HTML rendering - HTML now respects app's theme preferences

- Changed reply bar background from static Color.white to adaptive Color.itemBg - Ensures proper contrast in both light and dark themes - Reply input area now properly adapts to theme changes

- Added updateWindowInterfaceStyle method to force window-level theme updates - Set overrideUserInterfaceStyle on all windows when appearance changes - Call window update on app launch and appearance changes - This ensures immediate visual updates without requiring app restart

- Changed from AppSettings.Appearance to AppearanceMode - Fixes build error from incorrect type reference

- Access Store through @EnvironmentObject instead of passing parameters - Avoid type visibility issues with AppearanceMode - Follows established pattern used in other views

- Add LoadMockData action to FeedReducer for loading mock data - Create FeedInfo.mockData() extension with 10 sample feed items - Modify FeedPage to detect when user is not logged in and load mock data - Add visual debug banner indicating mock data is being shown - Mock data includes varied content focusing on UI/UX and dark mode topics This allows testing UI color contrast and layout without requiring actual API data. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

- Fixed hard-coded colors in ReplyItemView, AuthorInfoView, CreateTopicPage - Updated TwoStepLoginPage with proper text field styling and dynamic colors - Fixed Toast visibility issues in dark mode - Replaced gray/black/white colors with dynamic theme colors - Improved search page and settings page color adaptation

Copilot

Pull Request Overview

This PR fixes dark mode support across the V2er iOS app by replacing hard-coded colors with dynamic theme-aware colors and implementing a complete appearance management system.

Replaced hard-coded colors throughout the app with semantic color names that adapt to dark mode
Added appearance settings page allowing users to choose between light, dark, or system mode
Fixed invisible elements in dark mode including toasts, login dialogs, and text elements

Reviewed Changes

Copilot reviewed 45 out of 50 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
V2er/General/V2erApp.swift	Implements appearance mode switching and dynamic navigation bar styling
V2er/General/Color.swift	Adds semantic color system with dark mode variants
V2er/Info.plist	Removes forced light mode constraint to enable dark mode support
V2er/Assets.xcassets/Colors/	Defines color assets with light/dark variants for semantic colors
V2er/State/DataFlow/State/SettingState.swift	Adds appearance mode state management and persistence
V2er/View/Settings/AppearanceSettingView.swift	Creates appearance settings UI with mode selection
V2er/View/Widget/Toast.swift	Fixes toast visibility in dark mode
Multiple View files	Updates color references to use semantic colors

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-13T14:07:20Z

V2er/View/Widget/RichTextView/Webview.swift

            <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"); }


The CSS color values are hard-coded and duplicated across multiple color scheme functions. Consider extracting these hex values into constants or using the existing semantic color system to maintain consistency and reduce duplication.

Copilot · 2025-09-13T14:07:20Z

V2er/View/Widget/RichTextView/Webview.swift

            <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"); }


The CSS color values are hard-coded and duplicated across multiple color scheme functions. Consider extracting these hex values into constants or using the existing semantic color system to maintain consistency and reduce duplication.

Copilot · 2025-09-13T14:07:20Z

V2er/View/Widget/RichTextView/Webview.swift

            @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"); }


The CSS color values are hard-coded and duplicated across multiple color scheme functions. Consider extracting these hex values into constants or using the existing semantic color system to maintain consistency and reduce duplication.

Copilot · 2025-09-13T14:07:20Z

V2er/View/Widget/RichTextView/Webview.swift

            @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"); }


The CSS color values are hard-coded and duplicated across multiple color scheme functions. Consider extracting these hex values into constants or using the existing semantic color system to maintain consistency and reduce duplication.

Copilot · 2025-09-13T14:07:21Z

V2er/View/Widget/TabBar.swift

                Text(num.string)
                    .font(.system(size: 10))
-                    .foregroundColor(.white)
+                    .foregroundColor(Color.itemBackground)


Using Color.itemBackground as text color on a colored background may result in poor contrast. This should use a text color like Color.primaryText or Color.itemBackground should be replaced with a color specifically designed for text on colored backgrounds.

Suggested change

.foregroundColor(Color.itemBackground)

.foregroundColor(.white)

Copilot · 2025-09-13T14:07:21Z

V2er/State/DataFlow/Model/FeedInfo.swift

+                 title: "深色模式下的文字对比度优化讨论",
+                 avatar: "https://cdn.v2ex.com/avatar/2c60/19e1/1_mini.png",
+                 userName: "testuser1",
+                 replyUpdate: "12分钟前",
+                 nodeName: "分享创造",
+                 nodeId: "create",
+                 replyNum: "42"),
+
+            Item(id: "mock2",
+                 title: "SwiftUI 中实现自适应颜色系统的最佳实践，如何在保证视觉美观的同时确保可访问性",
+                 avatar: "https://cdn.v2ex.com/avatar/c4ca/4238/2_mini.png",
+                 userName: "swiftdev",
+                 replyUpdate: "25分钟前 designer 回复了",
+                 nodeName: "程序员",
+                 nodeId: "programmer",
+                 replyNum: "128"),
+
+            Item(id: "mock3",
+                 title: "iOS 15 新特性：Dynamic Color 深度解析",
+                 avatar: "https://cdn.v2ex.com/avatar/9b1b/00d4/3_mini.png",
+                 userName: "iosdev",
+                 replyUpdate: "1小时前",
+                 nodeName: "iPhone",
+                 nodeId: "iphone",
+                 replyNum: "15"),
+
+            Item(id: "mock4",
+                 title: "关于 V2EX 客户端的一些改进建议",
+                 avatar: "https://cdn.v2ex.com/avatar/e3db/1115/4_mini.png",
+                 userName: "feedback",
+                 replyUpdate: "2小时前",
+                 nodeName: "反馈",


The mock data contains hard-coded URLs and Chinese text that may not be appropriate for all testing environments. Consider using placeholder URLs and localizable strings to make the mock data more maintainable.

Suggested change

title: "深色模式下的文字对比度优化讨论",

avatar: "https://cdn.v2ex.com/avatar/2c60/19e1/1_mini.png",

userName: "testuser1",

replyUpdate: "12分钟前",

nodeName: "分享创造",

nodeId: "create",

replyNum: "42"),

Item(id: "mock2",

title: "SwiftUI 中实现自适应颜色系统的最佳实践，如何在保证视觉美观的同时确保可访问性",

avatar: "https://cdn.v2ex.com/avatar/c4ca/4238/2_mini.png",

userName: "swiftdev",

replyUpdate: "25分钟前 designer 回复了",

nodeName: "程序员",

nodeId: "programmer",

replyNum: "128"),

Item(id: "mock3",

title: "iOS 15 新特性：Dynamic Color 深度解析",

avatar: "https://cdn.v2ex.com/avatar/9b1b/00d4/3_mini.png",

userName: "iosdev",

replyUpdate: "1小时前",

nodeName: "iPhone",

nodeId: "iphone",

replyNum: "15"),

Item(id: "mock4",

title: "关于 V2EX 客户端的一些改进建议",

avatar: "https://cdn.v2ex.com/avatar/e3db/1115/4_mini.png",

userName: "feedback",

replyUpdate: "2小时前",

nodeName: "反馈",

title: NSLocalizedString("mock_title_1", comment: ""),

avatar: "https://example.com/avatar1.png",

userName: "testuser1",

replyUpdate: NSLocalizedString("mock_reply_update_1", comment: ""),

nodeName: NSLocalizedString("mock_node_name_1", comment: ""),

nodeId: "create",

replyNum: "42"),

Item(id: "mock2",

title: NSLocalizedString("mock_title_2", comment: ""),

avatar: "https://example.com/avatar2.png",

userName: "swiftdev",

replyUpdate: NSLocalizedString("mock_reply_update_2", comment: ""),

nodeName: NSLocalizedString("mock_node_name_2", comment: ""),

nodeId: "programmer",

replyNum: "128"),

Item(id: "mock3",

title: NSLocalizedString("mock_title_3", comment: ""),

avatar: "https://example.com/avatar3.png",

userName: "iosdev",

replyUpdate: NSLocalizedString("mock_reply_update_3", comment: ""),

nodeName: NSLocalizedString("mock_node_name_3", comment: ""),

nodeId: "iphone",

replyNum: "15"),

Item(id: "mock4",

title: NSLocalizedString("mock_title_4", comment: ""),

avatar: "https://example.com/avatar4.png",

userName: "feedback",

replyUpdate: NSLocalizedString("mock_reply_update_4", comment: ""),

nodeName: NSLocalizedString("mock_node_name_4", comment: ""),

- Fixed hard-coded black color in FlowStack preview component

- Extract hard-coded CSS colors into constants in Webview.swift - Fix text color contrast issue in TabBar badge (use white on red background) - Remove mock data implementation that was auto-reverted 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

- Removed mockData() extension from FeedInfo.swift - Removed LoadMockData action and handler from FeedReducer.swift - Removed mock data loading logic and debug banner from FeedPage.swift - Mock data for ExploreInfo was already removed by linter 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

- Removed all debug/development screenshots from screenshots/dark/ directory - These were used for tracking dark mode fixes during development - Not needed for production release 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

graycreate and others added 14 commits July 12, 2025 19:50

fix: remove @retroactive attribute for Swift 5 compatibility

a3ed3cc

The @retroactive attribute is only available in Swift 6, but the CI uses an older version of Swift. Removing this attribute to fix the build failure.

fix: improve text color contrast in dark mode

49a66c1

- Change NodeView text from hardcoded black to primaryText color - Add secondaryText color to comment count labels for better visibility - Add Appearance Settings option to Settings page menu

fix: improve node tag contrast in dark mode

7634d23

- Use dynamic colors for NodeView text (#666666 light, #CCCCCC dark) - Ensure proper contrast between text and background in both modes

fix: use primaryText color for feed item titles to improve visibility

9504d50

- Changed from semi-transparent bodyText to fully opaque primaryText - Ensures proper contrast in both light and dark modes - Fixes issue where titles were invisible or hard to read

fix: use adaptive color for reply bar background in dark mode

3a27e36

- Changed reply bar background from static Color.white to adaptive Color.itemBg - Ensures proper contrast in both light and dark themes - Reply input area now properly adapts to theme changes

fix: correct appearance type name in HtmlView

521be43

- Changed from AppSettings.Appearance to AppearanceMode - Fixes build error from incorrect type reference

fix: use environment object pattern for accessing appearance in HtmlView

2d01837

- Access Store through @EnvironmentObject instead of passing parameters - Avoid type visibility issues with AppearanceMode - Follows established pattern used in other views

Copilot AI review requested due to automatic review settings September 13, 2025 14:05

github-actions bot added the size/XXL label Sep 13, 2025

Copilot AI reviewed Sep 13, 2025

View reviewed changes

fix: additional dark mode fix for FlowStack preview

6c4465f

- Fixed hard-coded black color in FlowStack preview component

github-actions bot added size/XXL and removed size/XXL labels Sep 13, 2025

graycreate merged commit 492a66e into main Sep 13, 2025
4 of 6 checks passed

graycreate deleted the feature/mock-feed-debug branch September 13, 2025 15:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Fix: Dark mode support improvements #15

Fix: Dark mode support improvements #15

Uh oh!

graycreate commented Sep 13, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Sep 13, 2025

Uh oh!

Copilot AI Sep 13, 2025

Uh oh!

Copilot AI Sep 13, 2025

Uh oh!

Copilot AI Sep 13, 2025

Uh oh!

Copilot AI Sep 13, 2025

Uh oh!

Copilot AI Sep 13, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	.foregroundColor(Color.itemBackground)
	.foregroundColor(.white)

Uh oh!

Fix: Dark mode support improvements #15

Fix: Dark mode support improvements #15

Uh oh!

Conversation

graycreate commented Sep 13, 2025

Summary

Changes Made

Color Fixes

Testing

Related Issues

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants