till/zitare-native
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(dark-mode): WebView folgt System statt eigener localStorage-Toggle

Browse source 
Symptom: in TestFlight-Build wirkte Account-Tab dunkel, aber
Lesen + Erkunden hell (oder umgekehrt, je nachdem was im Web-
localStorage stand). Inkonsistent, weil:
- AccountView (SwiftUI) nutzt ZitareTheme.dynamic() — folgt System
- WebView las localStorage['zitare-mode'], das nur über den
  Theme-Toggle-Button im Web-Header gesetzt wurde — den wir aber
  nativ ausgeblendet haben → kein User-Steuerpfad

Fix: neuer User-Script `syncDarkMode` injiziert at document.start:
- liest prefers-color-scheme via matchMedia
- schreibt localStorage['zitare-mode'] = 'dark' / removes
- togglet die `.dark`-Class auf <html>
- bleibt aktiv via matchMedia-change-Listener für Live-Switches

Reihenfolge in WebView-Config: syncDarkMode VOR hideWebHeader,
damit das Theme richtig ist bevor Header-CSS rendert.

Build 3 für nächsten TestFlight-Upload.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till 2026-05-14 21:45:25 +02:00
parent f65b949dec
commit 2616c4f440
3 changed files with 43 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

38
Sources/Features/WebShell/WebShellScripts.swift
View file

@ -14,6 +14,44 @@ enum WebShellScripts {
///
/// CSS wird at document.start als `<style>`-Tag injiziert — vor dem
/// First Paint, kein Flicker.
/// Synct den System-Dark-Mode in den WebView. Zitare-Web liest
/// `localStorage['zitare-mode']` beim First Paint (Inline-Script
/// in `app.html`) und togglet eine `.dark`-Klasse auf `<html>`.
///
/// In der nativen App wurde der Theme-Toggle-Button im Web-Header
/// ausgeblendet (`hideWebHeader`), deshalb kann der User
/// localStorage nicht selber setzen. Statt-dessen lauschen wir auf
/// `prefers-color-scheme` und schreiben das passende Value vor
/// jeder Page-Load und bei jedem System-Switch.
///
/// Greift sowohl bei Cold-Load (atDocumentStart, vor app.html-
/// Inline-Script) als auch bei nachträglichem System-Wechsel
/// (`matchMedia`-Listener auf der selben Page).
static let syncDarkMode: WKUserScript = .init(
source: """
(function() {
function apply(isDark) {
try {
if (isDark) localStorage.setItem('zitare-mode', 'dark');
else localStorage.removeItem('zitare-mode');
} catch (e) {}
var html = document.documentElement;
if (!html) return;
if (isDark) html.classList.add('dark');
else html.classList.remove('dark');
}
var mq = window.matchMedia('(prefers-color-scheme: dark)');
apply(mq.matches);
// Listener für Live-Switch während die Page offen ist.
if (mq.addEventListener) {
mq.addEventListener('change', function(e) { apply(e.matches); });
}
})();
""",
injectionTime: .atDocumentStart,
forMainFrameOnly: true
)
/// Mehrere Selektor-Strategien stapeln, damit ein Klassen-Rename
/// oder Markup-Refactor in zitare-web das Hide nicht still bricht:
///