2616c4f440
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>
90 lines
3.9 KiB
Swift
90 lines
3.9 KiB
Swift
import Foundation
|
|
import WebKit
|
|
|
|
/// User-Scripts, die in jeden `WKWebView` injiziert werden.
|
|
///
|
|
/// `WKUserScript` ist MainActor-isolated; deshalb sind die Factory-
|
|
/// Methoden hier ebenfalls MainActor. Aufrufer leben sowieso auf Main
|
|
/// (SwiftUI `makeUIView`/`makeNSView` sind MainActor).
|
|
@MainActor
|
|
enum WebShellScripts {
|
|
/// Versteckt den zitare-Web-Header (`<header>` mit `<a class="brand">`),
|
|
/// weil die native TabBar bereits global navigiert. Footer und
|
|
/// Hauptinhalt bleiben sichtbar.
|
|
///
|
|
/// 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:
|
|
///
|
|
/// 1. `header[data-app-nav]` — explizit gesetztes Attribut, falls
|
|
/// zitare-web es irgendwann markieren will (heute nicht da).
|
|
/// 2. `body header:has(a.brand)` — strukturell: ein `<header>`,
|
|
/// der einen `a.brand`-Link enthält. Matched die heutige
|
|
/// SvelteKit-Komponente (Brand „Zitare" links oben).
|
|
/// 3. `body > * > header:first-of-type` — positionell: erster
|
|
/// `<header>` direkt unter dem Top-Level-Wrapper. Greift wenn
|
|
/// `a.brand` mal verschwindet.
|
|
///
|
|
/// `body > * > header:first-of-type` ist absichtlich konservativ
|
|
/// (matcht nur einen `<header>` pro `<body>`-Direktkind), damit
|
|
/// nicht ungewollt nested Article-Header gehidet werden.
|
|
static let hideWebHeader: WKUserScript = .init(
|
|
source: """
|
|
(function() {
|
|
var css = [
|
|
'header[data-app-nav],',
|
|
'body header:has(a.brand),',
|
|
'body > header:first-of-type,',
|
|
'body > div > header:first-of-type {',
|
|
' display: none !important;',
|
|
'}'
|
|
].join('\\n');
|
|
var style = document.createElement('style');
|
|
style.setAttribute('data-zitare-native', 'hide-web-header');
|
|
style.textContent = css;
|
|
(document.head || document.documentElement).appendChild(style);
|
|
})();
|
|
""",
|
|
injectionTime: .atDocumentStart,
|
|
forMainFrameOnly: true
|
|
)
|
|
}
|