From eaefa4540c821e415b506423a2833a1ef18e565d Mon Sep 17 00:00:00 2001 From: Matt Meissner Date: Mon, 1 Apr 2019 09:44:43 -0500 Subject: [PATCH 1/2] Remove Javascript class twiddling for darkmode As of 10.14.4, WKWebView supports the `@media(prefers-color-scheme:dark)` CSS query to handle darkmode transitions. --- .../MainWindow/Detail/DetailWebView.swift | 5 - NetNewsWire/MainWindow/Detail/styleSheet.css | 97 ++++++++----------- 2 files changed, 43 insertions(+), 59 deletions(-) diff --git a/NetNewsWire/MainWindow/Detail/DetailWebView.swift b/NetNewsWire/MainWindow/Detail/DetailWebView.swift index 72644e582..b31e7307f 100644 --- a/NetNewsWire/MainWindow/Detail/DetailWebView.swift +++ b/NetNewsWire/MainWindow/Detail/DetailWebView.swift @@ -40,11 +40,6 @@ final class DetailWebView: WKWebView { super.willOpenMenu(menu, with: event) } - override func viewDidChangeEffectiveAppearance() { - let bodyClass = effectiveAppearance.isDarkMode ? "dark" : "light" - evaluateJavaScript("document.getElementById('bodyId').className = '\(bodyClass)'") - } - override func viewWillStartLiveResize() { super.viewWillStartLiveResize() evaluateJavaScript("document.body.style.overflow = 'hidden';", completionHandler: nil) diff --git a/NetNewsWire/MainWindow/Detail/styleSheet.css b/NetNewsWire/MainWindow/Detail/styleSheet.css index d315bb69b..231f6035a 100644 --- a/NetNewsWire/MainWindow/Detail/styleSheet.css +++ b/NetNewsWire/MainWindow/Detail/styleSheet.css @@ -28,73 +28,62 @@ a:hover { transform: translateX(-55%) translateY(-50%); } -/* Light mode */ - -body.light { - color: #444; - background-color: -apple-system-text-background; +:root { + --body-color: #444; + --body-background-color: -apple-system-text-background; + --link-color: hsla(215, 99%, 43%, 1); + --header-table-border-color: rgba(0, 0, 0, 0.1); + --header-color: rgba(0, 0, 0, 0.3); + --header-link-color: rgba(0, 0, 0, 0.3); + --body-code-color: #666; + --system-message-color: #cbcbcb; + --feedlink-color: rgba(0, 0, 0, 0.6); } -body.light a, body.light a:link, body.light a:visited { - color: hsla(215, 99%, 43%, 1); -} -body.light .headerTable { - border-bottom: 1px solid rgba(0, 0, 0, 0.1); -} -body.light .header { - color: rgba(0, 0, 0, 0.3); -} -body.light .header a:link, body.light .header a:visited { - color: rgba(0, 0, 0, 0.3); -} -body.light .articleDateline, body.light .articleDateLine.a:link, body.light .articleDateline a:visited { - color: rgba(0, 0, 0, 0.3); +@media(prefers-color-scheme: dark) { + :root { + --body-color: #d2d2d2; + --body-background-color: #2d2d2d; + --link-color: #4490e2; + --header-table-border-color: rgba(255, 255, 255, 0.1); + --header-color: #d2d2d2; + --header-link-color: #4490e2; + --body-code-color: #b2b2b2; + --system-message-color: #5f5f5f + } } -body.light code, body.light pre { - color: #666; +body { + color: var(--body-color); + background-color: var(--body-background-color); } -.light > .systemMessage { - color: #cbcbcb; +body a, body a:link, body a:visited { + color: var(--link-color); +} +body .headerTable { + border-bottom: 1px solid var(--header-table-border-color); +} +body .header { + color: var(--header-color); +} +body .header a:link, body .header a:visited { + color: var(--header-link-color); +} +body .articleDateline, body .articleDateLine.a:link, body .articleDateline a:visited { + color: var(--header-color); } -/* Dark mode */ - -body.dark { - color: #d2d2d2; - background-color: #2d2d2d; -} -body.dark a, body.dark a:link, body.dark a:visited { - color: #4490e2; -} -body.dark .headerTable { - border-bottom: 1px solid rgba(255, 255, 255, 0.1); +body code, body pre { + color: var(--body-code-color); } -body.dark .header a:link, body.dark .header a:visited { - color: #4490e2; -} -body.dark .header { - color: #d2d2d2; -} -body.dark .articleDateline { - color: #d2d2d2; -} -body.dark .articleDateline, body.dark .articleDateLine.a:link, body.dark .articleDateline a:visited { - color: #d2d2d2; -} - -body.dark code, body.dark pre { - color: #b2b2b2; -} - -.dark > .systemMessage { - color: #5f5f5f; +body > .systemMessage { + color: var(--system-message-color); } .feedlink a:link, .feedlink a:visited { - color: rgba(0, 0, 0, 0.6); + color: var(--feed-link-color); } .avatar img { border-radius: 4px; From b65d563c7c364232c2b4d6a30e5270a9ff0ed674 Mon Sep 17 00:00:00 2001 From: Brent Simmons Date: Tue, 2 Apr 2019 21:57:34 -0700 Subject: [PATCH 2/2] Remove no-longer needed appearance code, now that WKWebView supports @media(prefers-color-scheme: dark). --- .../MainWindow/Detail/ArticleRenderer.swift | 19 ++++++++----------- .../Detail/DetailWebViewController.swift | 15 +++++---------- .../Timeline/ArticlePasteboardWriter.swift | 2 +- 3 files changed, 14 insertions(+), 22 deletions(-) diff --git a/NetNewsWire/MainWindow/Detail/ArticleRenderer.swift b/NetNewsWire/MainWindow/Detail/ArticleRenderer.swift index bd47c9a5a..7cf213835 100644 --- a/NetNewsWire/MainWindow/Detail/ArticleRenderer.swift +++ b/NetNewsWire/MainWindow/Detail/ArticleRenderer.swift @@ -15,30 +15,28 @@ struct ArticleRenderer { private let article: Article? private let articleStyle: ArticleStyle - private let appearance: NSAppearance? private let title: String - private init(article: Article?, style: ArticleStyle, appearance: NSAppearance?) { + private init(article: Article?, style: ArticleStyle) { self.article = article self.articleStyle = style - self.appearance = appearance self.title = article?.title ?? "" } // MARK: - API - static func articleHTML(article: Article, style: ArticleStyle, appearance: NSAppearance?) -> String { - let renderer = ArticleRenderer(article: article, style: style, appearance: appearance) + static func articleHTML(article: Article, style: ArticleStyle) -> String { + let renderer = ArticleRenderer(article: article, style: style) return renderer.articleHTML } - static func multipleSelectionHTML(style: ArticleStyle, appearance: NSAppearance?) -> String { - let renderer = ArticleRenderer(article: nil, style: style, appearance: appearance) + static func multipleSelectionHTML(style: ArticleStyle) -> String { + let renderer = ArticleRenderer(article: nil, style: style) return renderer.multipleSelectionHTML } - static func noSelectionHTML(style: ArticleStyle, appearance: NSAppearance?) -> String { - let renderer = ArticleRenderer(article: nil, style: style, appearance: appearance) + static func noSelectionHTML(style: ArticleStyle) -> String { + let renderer = ArticleRenderer(article: nil, style: style) return renderer.noSelectionHTML } } @@ -338,8 +336,7 @@ private extension ArticleRenderer { """ - let appearanceClass = appearance?.isDarkMode ?? false ? "dark" : "light" - s += "\n\n\n\n" + s += "\n\n\n\n" s += body s += "\n\n" diff --git a/NetNewsWire/MainWindow/Detail/DetailWebViewController.swift b/NetNewsWire/MainWindow/Detail/DetailWebViewController.swift index a30058998..25a35e97a 100644 --- a/NetNewsWire/MainWindow/Detail/DetailWebViewController.swift +++ b/NetNewsWire/MainWindow/Detail/DetailWebViewController.swift @@ -61,12 +61,8 @@ final class DetailWebViewController: NSViewController, WKUIDelegate { } view = webview - - DispatchQueue.main.async { - // Must do this async, because reloadHTML references view.effectiveAppearance, - // which causes loadView to get called. Infinite loop. - self.reloadHTML() - } + + self.reloadHTML() } // MARK: Scrolling @@ -119,17 +115,16 @@ private extension DetailWebViewController { func reloadHTML() { let style = ArticleStylesManager.shared.currentStyle - let appearance = view.effectiveAppearance let html: String var baseURL: URL? = nil switch state { case .noSelection: - html = ArticleRenderer.noSelectionHTML(style: style, appearance: appearance) + html = ArticleRenderer.noSelectionHTML(style: style) case .multipleSelection: - html = ArticleRenderer.multipleSelectionHTML(style: style, appearance: appearance) + html = ArticleRenderer.multipleSelectionHTML(style: style) case .article(let article): - html = ArticleRenderer.articleHTML(article: article, style: style, appearance: appearance) + html = ArticleRenderer.articleHTML(article: article, style: style) baseURL = article.baseURL } diff --git a/NetNewsWire/MainWindow/Timeline/ArticlePasteboardWriter.swift b/NetNewsWire/MainWindow/Timeline/ArticlePasteboardWriter.swift index aa05fa45d..4f55cd110 100644 --- a/NetNewsWire/MainWindow/Timeline/ArticlePasteboardWriter.swift +++ b/NetNewsWire/MainWindow/Timeline/ArticlePasteboardWriter.swift @@ -20,7 +20,7 @@ import RSCore static let articleUTIInternalType = NSPasteboard.PasteboardType(rawValue: articleUTIInternal) private lazy var renderedHTML: String = { - return ArticleRenderer.articleHTML(article: article, style: ArticleStylesManager.shared.currentStyle, appearance: nil) + return ArticleRenderer.articleHTML(article: article, style: ArticleStylesManager.shared.currentStyle) }() init(article: Article) {