iiitl / iiitl/CForge

[BUG]: Fix WKWebView problem description using white background instead of dark theme

Open
#11 0 comments 0 reactions 0 assignees View on GitHub
bug enhancement medium
Dominant language
Swift
Stars
0
Forks
4
PR merge metrics
No merged PRs in 30d

Description

### Description:

When viewing a problem's description tab, the `WKWebView` loads the Codeforces problem page with a **white background** (`#ffffff`), creating a jarring flash of white in an otherwise fully dark-themed app. The `CodeforcesContentSanitizer` explicitly sets `background-color: #ffffff`, which conflicts with the app's dark design.

Additionally, the sanitizer only hides page elements but doesn't adapt text colors, code block styling, or link colors for a dark theme — making the reading experience inconsistent.

### Current Behavior:

In `CodeforcesContentSanitizer.swift`:
```swift
body { padding-top: 0 !important; background-color: #ffffff !important; }
```
- Background is hardcoded white.
- Text remains default black.
- Code blocks use Codeforces' default light theme.
- No loading indicator — the WebView shows a blank area while content loads.
- MathJax formulas (common in CF problems) are not accounted for.

### Feature Requirements:

- Update the injected CSS to use a **dark background** matching the app (`#14141A` or similar, matching `Color.darkBackground`).
- Set **text color** to white/light gray to match `.textPrimary`.
- Style **code blocks** (`

`, ``) with a dark background and light text.

- Style **links** with the neon blue color (`#00F2FF`).
- Style **tables** and **bordered elements** to work on dark backgrounds.
- Add a **loading indicator** in the `WebView` while the page is being fetched (use `WKNavigationDelegate`).
- Ensure MathJax-rendered content is readable on dark backgrounds.

### Key Files:

| Action | File |
|--------|------|
| **MODIFY** | `CForge/Views/Problem/CodeforcesContentSanitizer.swift` |
| **MODIFY** | `CForge/Views/Problem/ProblemListView.swift` (WebView struct) |

### Expected Outcome:

- Problem description renders with a dark background matching the app theme.
- Text, code blocks, links, and tables are all readable on dark backgrounds.
- A loading indicator is shown while the page loads.
- No jarring white flash when switching to the Description tab.

Contributor guide

Open the contributing guide

Research direction

Start with CForge/Views/Problem/CodeforcesContentSanitizer.swift to review the injected CSS, then inspect the WebView struct in CForge/Views/Problem/ProblemListView.swift. Use WKNavigationDelegate for the loading state and verify the dark background, text, code, links, tables, borders, and MathJax content are readable without a white flash.

Written by the indexing model from the issue text.

Assessment

Tech stack
swift
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.