diff --git a/Mac/MainWindow/Detail/DetailWebViewController.swift b/Mac/MainWindow/Detail/DetailWebViewController.swift index 362c3de81..8b4cdfc08 100644 --- a/Mac/MainWindow/Detail/DetailWebViewController.swift +++ b/Mac/MainWindow/Detail/DetailWebViewController.swift @@ -12,6 +12,11 @@ import RSCore import RSWeb import Articles +extension Notification.Name { + static let appleColorPreferencesChangedNotification = Notification.Name("AppleColorPreferencesChangedNotification") + static let appleInterfaceThemeChangedNotification = Notification.Name("AppleInterfaceThemeChangedNotification") +} + protocol DetailWebViewControllerDelegate: class { func mouseDidEnter(_: DetailWebViewController, link: String) func mouseDidExit(_: DetailWebViewController, link: String) @@ -118,6 +123,10 @@ final class DetailWebViewController: NSViewController, WKUIDelegate { NotificationCenter.default.addObserver(self, selector: #selector(webFeedIconDidBecomeAvailable(_:)), name: .WebFeedIconDidBecomeAvailable, object: nil) NotificationCenter.default.addObserver(self, selector: #selector(avatarDidBecomeAvailable(_:)), name: .AvatarDidBecomeAvailable, object: nil) NotificationCenter.default.addObserver(self, selector: #selector(faviconDidBecomeAvailable(_:)), name: .FaviconDidBecomeAvailable, object: nil) + NotificationCenter.default.addObserver(self, selector: #selector(faviconDidBecomeAvailable(_:)), name: .FaviconDidBecomeAvailable, object: nil) + + DistributedNotificationCenter.default().addObserver(self, selector: #selector(appleColorPreferencesChanged(_:)), name: .appleColorPreferencesChangedNotification, object: nil) + DistributedNotificationCenter.default().addObserver(self, selector: #selector(appleInterfaceThemeChanged(_:)), name: .appleInterfaceThemeChangedNotification, object: nil) webView.loadFileURL(ArticleRenderer.blank.url, allowingReadAccessTo: ArticleRenderer.blank.baseURL) } @@ -136,6 +145,14 @@ final class DetailWebViewController: NSViewController, WKUIDelegate { reloadArticleImage() } + @objc func appleColorPreferencesChanged(_ note: Notification) { + reloadHTML() + } + + @objc func appleInterfaceThemeChanged(_ note: Notification) { + reloadHTML() + } + // MARK: Media Functions func stopMediaPlayback() { diff --git a/Mac/MainWindow/Detail/styleSheet.css b/Mac/MainWindow/Detail/styleSheet.css index 735e5abdb..ea9723bb9 100644 --- a/Mac/MainWindow/Detail/styleSheet.css +++ b/Mac/MainWindow/Detail/styleSheet.css @@ -35,14 +35,14 @@ a:hover { :root { --body-color: #444; --body-background-color: -apple-system-text-background; - --accent-color: hsla(215, 99%, 43%, 1); - --block-quote-border-color: hsla(215, 99%, 43%, 0.75); + --accent-color: rgba([[accent-r]], [[accent-g]], [[accent-b]], .75); + --block-quote-border-color: rgba([[accent-r]], [[accent-g]], [[accent-b]], .50); --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); + --article-title-color: #333; --table-cell-border-color: lightgray; } @@ -50,13 +50,13 @@ a:hover { :root { --body-color: #d2d2d2; --body-background-color: #2d2d2d; - --accent-color: #4490e2; - --block-quote-border-color: rgba(68, 144, 226, 0.75); + --accent-color: rgba([[accent-r]], [[accent-g]], [[accent-b]], .75); + --block-quote-border-color: rgba([[accent-r]], [[accent-g]], [[accent-b]], .50); --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; + --article-title-color: #e0e0e0; --table-cell-border-color: dimgray; } } @@ -76,7 +76,7 @@ body .header { color: var(--header-color); } body .header a:link, body .header a:visited { - color: var(--header-link-color); + color: var(--accent-color); } body .articleDateline, body .articleDateLine.a:link, body .articleDateline a:visited { color: var(--header-color); @@ -106,7 +106,8 @@ body > .systemMessage { text-align: left; } -.articleTitle { +.articleTitle a:link, .articleTitle a:visited { + color: var(--article-title-color); margin-top: 26px; } diff --git a/Shared/Article Rendering/ArticleRenderer.swift b/Shared/Article Rendering/ArticleRenderer.swift index 09c73889d..ef7a25a52 100644 --- a/Shared/Article Rendering/ArticleRenderer.swift +++ b/Shared/Article Rendering/ArticleRenderer.swift @@ -112,12 +112,7 @@ private extension ArticleRenderer { } private var articleCSS: String { - #if os(iOS) - let style = try! MacroProcessor.renderedText(withTemplate: styleString(), substitutions: styleSubstitutions()) - return style - #else - return styleString() - #endif + return try! MacroProcessor.renderedText(withTemplate: styleString(), substitutions: styleSubstitutions()) } static var defaultStyleSheet: String = { @@ -260,6 +255,37 @@ private extension ArticleRenderer { d["font-size"] = String(describing: bodyFont.pointSize) return d } + #else + func styleSubstitutions() -> [String: String] { + var d = [String: String]() + guard let linkColor = NSColor.controlAccentColor.usingColorSpace(.deviceRGB) else { + return d + } + + let red: Int + let green: Int + let blue: Int + + if NSApplication.shared.effectiveAppearance.isDarkMode { + let brighten = CGFloat(0.25) + let baseRed = linkColor.redComponent * 0xFF + red = Int(round(((255 - baseRed) * brighten)) + round(baseRed)) + let baseGreen = linkColor.greenComponent * 0xFF + green = Int(round(((255 - baseGreen) * brighten)) + round(baseGreen)) + let baseBlue = linkColor.blueComponent * 0xFF + blue = Int(round(((255 - baseBlue) * brighten)) + round(baseBlue)) + } else { + let darken = CGFloat(0.75) + red = Int(round(linkColor.redComponent * 0xFF * darken)) + green = Int(round(linkColor.greenComponent * 0xFF * darken)) + blue = Int(round(linkColor.blueComponent * 0xFF * darken)) + } + + d["accent-r"] = String(red) + d["accent-g"] = String(green) + d["accent-b"] = String(blue) + return d + } #endif }