From eaefa4540c821e415b506423a2833a1ef18e565d Mon Sep 17 00:00:00 2001
From: Matt Meissner <meissnem@gmail.com>
Date: Mon, 1 Apr 2019 09:44:43 -0500
Subject: [PATCH] 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;