Apply dark theme immediately

Themes are now controlled with a class on the body element.

If a preference is set the body element will have either "dark-theme"
or "light-theme" class. If no preference is set or the preference is
empty the class will be "no-theme".

"dark-theme" and "light-theme" are handled by darktheme.css and
lighttheme.css respectively.

"no-theme" is handled by default.css where depending on the value of
"prefers-color-scheme" the styles corresponding to "dark-theme" or
"light-theme" are applied.

Unfortunately this means that both themes are duplicated, once in the
theme .css and once in default.css.

1 files changed, 10 insertions, 5 deletions

diff --git a/assets/js/themes.js b/assets/js/themes.js
index c600073d..543b849e 100644
--- a/assets/js/themes.js
+++ b/assets/js/themes.js
@@ -2,7 +2,7 @@ var toggle_theme = document.getElementById('toggle_theme');
 toggle_theme.href = 'javascript:void(0);';
 
 toggle_theme.addEventListener('click', function () {
-    var dark_mode = document.getElementById('dark_theme').media === 'none';
+    var dark_mode = document.body.classList.contains("light-theme");
 
     var url = '/toggle_theme?redirect=false';
     var xhr = new XMLHttpRequest();
@@ -22,7 +22,7 @@ window.addEventListener('storage', function (e) {
     }
 });
 
-window.addEventListener('load', function () {
+window.addEventListener('DOMContentLoaded', function () {
     window.localStorage.setItem('dark_mode', document.getElementById('dark_mode_pref').textContent);
     // Update localStorage if dark mode preference changed on preferences page
     update_mode(window.localStorage.dark_mode);
@@ -50,13 +50,18 @@ function scheme_switch (e) {
 }
 
 function set_mode (bool) {
-    document.getElementById('dark_theme').media = !bool ? 'none' : '';
-    document.getElementById('light_theme').media = bool ? 'none' : '';
-
     if (bool) {
+        // dark
         toggle_theme.children[0].setAttribute('class', 'icon ion-ios-sunny');
+        document.body.classList.remove('no-theme');
+        document.body.classList.remove('light-theme');
+        document.body.classList.add('dark-theme');
     } else {
+        // light
         toggle_theme.children[0].setAttribute('class', 'icon ion-ios-moon');
+        document.body.classList.remove('no-theme');
+        document.body.classList.remove('dark-theme');
+        document.body.classList.add('light-theme');
     }
 }