From e29e86c0bdd5ae779116420fabaf48916a02d0d8 Mon Sep 17 00:00:00 2001
From: Massimo Melina <a@rejetto.com>
Date: Tue, 9 Jun 2020 00:06:42 +0200
Subject: [PATCH] tpl: defaults to dark theme if the OS says so

---
 default.tpl | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/default.tpl b/default.tpl
index 17d7d0e..b7731ac 100644
--- a/default.tpl
+++ b/default.tpl
@@ -160,12 +160,17 @@ COMMENT with the ones above you can disable some features of the template. They
 <i class="fa fa-globe"></i> {.!title.}
 <i class="fa fa-lightbulb" id="switch-theme"></i>
 <script>
-$('body').addClass(getCookie('theme'))
+var themes = ['light','dark']
+var themePostfix = '-theme'
+var darkOs = window.matchMedia('(prefers-color-scheme:dark)').matches
+var curTheme = getCookie('theme')
+if (!themes.includes(curTheme))
+	curTheme = themes[+darkOs]
+$('body').addClass(curTheme+themePostfix)
 $(function(){
 
     var titleBar = $('#title-bar')
 	var h = titleBar.height()
-	var on = true
 	var k = 'shrink'
     window.onscroll = function(){
         if (window.scrollY > h)
@@ -174,10 +179,11 @@ $(function(){
             titleBar.removeClass(k)
     }
 
-    $('#switch-theme').click(function(ev) {
-        var k = 'dark-theme';
-        $('body').toggleClass(k);
-        setCookie('theme', $('body').hasClass(k) ? k : '');
+    $('#switch-theme').click(()=>{
+        $('body').toggleClass(curTheme+themePostfix);
+		curTheme = themes[themes.indexOf(curTheme) ^1]
+        $('body').toggleClass(curTheme+themePostfix);
+        setCookie('theme', curTheme);
     });
 });
 </script>