From 8404f0896c043179a8fe567558eae27468d6ba39 Mon Sep 17 00:00:00 2001
From: Michael Demetriou <accounts@qzx.gr>
Date: Tue, 25 Jun 2019 22:33:58 +0300
Subject: [PATCH] Handle default pad color mode according to
 `prefers-color-scheme`

This just queries the browser whether `prefers-color-scheme` is set
and chooses dark mode if needed, and only if the user hasn't manually
set a scheme by pushing the button.
---
 templates/pad.tmpl | 42 +++++++++++++++++++++++++++++++-----------
 1 file changed, 31 insertions(+), 11 deletions(-)

diff --git a/templates/pad.tmpl b/templates/pad.tmpl
index 914d921..0b04e6e 100644
--- a/templates/pad.tmpl
+++ b/templates/pad.tmpl
@@ -66,26 +66,46 @@
 		<script src="/js/h.js"></script>
 		<script>
 		function toggleTheme() {
-			var btns = Array.prototype.slice.call(document.getElementById('tools').querySelectorAll('a img'));
-			var newTheme = '';
 			if (document.body.classList.contains('light')) {
-				newTheme = 'dark';
-				document.body.className = document.body.className.replace(/(?:^|\s)light(?!\S)/g, newTheme);
-				for (var i=0; i<btns.length; i++) {
-					btns[i].src = btns[i].src.replace('_dark@2x.png', '@2x.png');
+				setTheme('dark');
+			} else {
+				setTheme('light');
+			}
+			H.set('padTheme', newTheme);
+			console.log('here');
+
+		}
+		function setTheme(newTheme){
+			document.body.classList.remove('light');
+			document.body.classList.remove('dark');
+			document.body.classList.add(newTheme);
+			var btns = Array.prototype.slice.call(document.getElementById('tools').querySelectorAll('a img'));
+			if (newTheme == 'light'){
+				// check if current theme is dark otherwise we'll get `_dark_dark@2x.png`
+				if (H.get('padTheme', 'auto') == 'dark'){
+					for (var i=0; i<btns.length; i++) {
+						btns[i].src = btns[i].src.replace('@2x.png', '_dark@2x.png');
+					}
 				}
 			} else {
-				newTheme = 'light';
-				document.body.className = document.body.className.replace(/(?:^|\s)dark(?!\S)/g, newTheme);
 				for (var i=0; i<btns.length; i++) {
-					btns[i].src = btns[i].src.replace('@2x.png', '_dark@2x.png');
+					btns[i].src = btns[i].src.replace('_dark@2x.png', '@2x.png');
 				}
 			}
 			H.set('padTheme', newTheme);
 		}
-		if (H.get('padTheme', 'light') != 'light') {
-			toggleTheme();
+
+		if (H.get('padTheme', 'auto') == 'light') {
+			setTheme('light');
+		} else if (H.get('padTheme', 'auto') == 'dark'){
+			setTheme('dark');
+		} else {
+			const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
+			if (isDarkMode) setTheme('dark');
+			else setTheme('light');
 		}
+
+
 		var $writer = H.getEl('writer');
 		var $btnPublish = H.getEl('publish');
 		var $wc = H.getEl("wc");