From 0a38621a3a2476d515f1f3b231c36b36af81f013 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Sun, 6 Mar 2022 09:16:14 -0800 Subject: [PATCH 1/2] Set root color scheme CSS for iOS to determine system colour --- packages/web/styles/articleInnerStyling.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/web/styles/articleInnerStyling.css b/packages/web/styles/articleInnerStyling.css index b702b6e69..eda68ae22 100644 --- a/packages/web/styles/articleInnerStyling.css +++ b/packages/web/styles/articleInnerStyling.css @@ -2,6 +2,10 @@ max-width: 100%; } +:root { + color-scheme: light dark; +} + .highlight { color: var(--colors-highlightText); background-color: var(--colors-highlightBackground); From e6b4d80de2e84fcc0aa5750fbea09569408edd30 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Sun, 6 Mar 2022 09:16:38 -0800 Subject: [PATCH 2/2] After load set webview to opaque During the initial load we need the clear + !opaque settings so the webview does not flash a white background in dark mode. But after load we want to use the systemBackground colour and an opaque background, so in dark mode the scrollbars are displayed correctly. Without this iOS will display a dark scrollbar ontop of the dark background. Note that due to a bug in Webkit setting the scrollbar inset colours doesn't seem to work in current iOS: https://developer.apple.com/forums/thread/689654 --- apple/OmnivoreKit/Sources/Views/Article/WebAppView.swift | 2 +- .../Sources/Views/Article/WebAppViewCoordinator.swift | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/apple/OmnivoreKit/Sources/Views/Article/WebAppView.swift b/apple/OmnivoreKit/Sources/Views/Article/WebAppView.swift index 2ab5680ef..f493a9e8f 100644 --- a/apple/OmnivoreKit/Sources/Views/Article/WebAppView.swift +++ b/apple/OmnivoreKit/Sources/Views/Article/WebAppView.swift @@ -33,7 +33,7 @@ public let readerViewNavBarHeight = 50.0 webView.navigationDelegate = context.coordinator webView.isOpaque = false - webView.backgroundColor = UIColor.clear + webView.backgroundColor = .clear webView.configuration.userContentController = contentController webView.scrollView.delegate = context.coordinator webView.scrollView.contentInset.top = readerViewNavBarHeight diff --git a/apple/OmnivoreKit/Sources/Views/Article/WebAppViewCoordinator.swift b/apple/OmnivoreKit/Sources/Views/Article/WebAppViewCoordinator.swift index 7d58582bc..09305f8c3 100644 --- a/apple/OmnivoreKit/Sources/Views/Article/WebAppViewCoordinator.swift +++ b/apple/OmnivoreKit/Sources/Views/Article/WebAppViewCoordinator.swift @@ -42,6 +42,11 @@ extension WebAppViewCoordinator: WKNavigationDelegate { decisionHandler(.allow) } } + + func webView(_ webView: WKWebView, didFinish _: WKNavigation!) { + webView.isOpaque = true + webView.backgroundColor = .systemBackground + } } #if os(iOS)