From 365a261af3299d86b8499376b05ae330df2603b1 Mon Sep 17 00:00:00 2001
From: psvenk <45520974+psvenk@users.noreply.github.com>
Date: Tue, 18 Jun 2019 15:20:53 -0400
Subject: [PATCH] Add prefers-color-scheme support

This should fix <https://github.com/omarroth/invidious/issues/559>.
The cookie storage format has been changed from boolean
("true"/"false") to tri-state ("dark"/"light"/""), so that users
without a cookie set will get dark mode if they have enabled the dark
theme in their operating system. The code for handling the cookie
state, along with the user's operating system theme, has been factored
out into a new function `update_mode`, which is called both at window
load and at the "storage" event listener, because the "storage" event
listener is only trigerred when a change is made to the localStorage
from another tab/window (for more info - see
<https://stackoverflow.com/a/4679754>).
---
 assets/js/themes.js | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/assets/js/themes.js b/assets/js/themes.js
index 683aea39..587a1434 100644
--- a/assets/js/themes.js
+++ b/assets/js/themes.js
@@ -11,19 +11,22 @@ toggle_theme.addEventListener('click', function () {
     xhr.open('GET', url, true);
 
     set_mode(dark_mode);
-    localStorage.setItem('dark_mode', dark_mode);
+    localStorage.setItem('dark_mode', dark_mode ? 'dark' : 'light');
 
     xhr.send();
 });
 
 window.addEventListener('storage', function (e) {
     if (e.key == 'dark_mode') {
-        var dark_mode = e.newValue === 'true';
-        set_mode(dark_mode);
+        update_mode(e.newValue);
     }
 });
 
-function set_mode(bool) {
+window.addEventListener('load', function () {
+    update_mode(window.localStorage.dark_mode);
+});
+
+function set_mode (bool) {
     document.getElementById('dark_theme').media = !bool ? 'none' : '';
     document.getElementById('light_theme').media = bool ? 'none' : '';
 
@@ -33,3 +36,14 @@ function set_mode(bool) {
         toggle_theme.children[0].setAttribute('class', 'icon ion-ios-moon');
     }
 }
+
+function update_mode (mode) {
+    set_mode(
+           mode == 'true' // for backwards compatibility
+        || mode == 'dark'
+        || (mode != 'light'
+            && window.matchMedia('(prefers-color-scheme: dark)').matches)
+    );
+}
+
+