Add option to toggle theme without reload

assets/js/themes.js

@@ -0,0 +1,34 @@
+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 url = '/toggle_theme?redirect=false';
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = 'json';
+    xhr.timeout = 20000;
+    xhr.open('GET', url, true);
+    xhr.send();
+
+    set_mode(dark_mode);
+    localStorage.setItem('dark_mode', dark_mode);
+});
+
+window.addEventListener('storage', function (e) {
+    if (e.key == 'dark_mode') {
+        var dark_mode = e.newValue === 'true';
+        set_mode(dark_mode);
+    }
+});
+
+function set_mode(bool) {
+    document.getElementById('dark_theme').media = !bool ? 'none' : '';
+    document.getElementById('light_theme').media = bool ? 'none' : '';
+
+    if (bool) {
+        toggle_theme.children[0].setAttribute('class', 'icon ion-ios-sunny');
+    } else {
+        toggle_theme.children[0].setAttribute('class', 'icon ion-ios-moon');
+    }
+}

src/invidious.cr

@@ -1437,6 +1437,10 @@ get "/toggle_theme" do |env|
   locale = LOCALES[env.get("preferences").as(Preferences).locale]?
   referer = get_referer(env)
 
+  redirect = env.params.query["redirect"]?
+  redirect ||= "true"
+  redirect = redirect == "true"
+
   if user = env.get? "user"
     user = user.as(User)
     preferences = user.preferences
@@ -1463,7 +1467,12 @@ get "/toggle_theme" do |env|
     end
   end
 
+  if redirect
     env.redirect referer
+  else
+    env.response.content_type = "application/json"
+    "{}"
+  end
 end
 
 post "/watch_ajax" do |env|

src/invidious/views/template.ecr

@@ -18,11 +18,8 @@
     <link rel="stylesheet" href="/css/grids-responsive-min.css?v=<%= CURRENT_COMMIT %>">
     <link rel="stylesheet" href="/css/ionicons.min.css?v=<%= CURRENT_COMMIT %>">
     <link rel="stylesheet" href="/css/default.css?v=<%= CURRENT_COMMIT %>">
-    <% if env.get("preferences").as(Preferences).dark_mode %>
+    <link rel="stylesheet" href="/css/darktheme.css?v=<%= CURRENT_COMMIT %>"  id="dark_theme" <% if !env.get("preferences").as(Preferences).dark_mode %>media="none"<% end %>>
-    <link rel="stylesheet" href="/css/darktheme.css?v=<%= CURRENT_COMMIT %>">
+    <link rel="stylesheet" href="/css/lighttheme.css?v=<%= CURRENT_COMMIT %>" id="light_theme" <% if env.get("preferences").as(Preferences).dark_mode %>media="none"<% end %>>
-    <% else %>
-    <link rel="stylesheet" href="/css/lighttheme.css?v=<%= CURRENT_COMMIT %>">
-    <% end %>
 </head>
 
 <% locale = LOCALES[env.get("preferences").as(Preferences).locale]? %>
@@ -45,7 +42,7 @@
                 <div class="pure-u-1 pure-u-md-8-24 user-field">
                     <% if env.get? "user" %>
                         <div class="pure-u-1-4">
-                            <a href="/toggle_theme?referer=<%= env.get?("current_page") %>" class="pure-menu-heading">
+                            <a id="toggle_theme" href="/toggle_theme?referer=<%= env.get?("current_page") %>" class="pure-menu-heading">
                                 <% if env.get("preferences").as(Preferences).dark_mode %>
                                     <i class="icon ion-ios-sunny"></i>
                                 <% else %>
@@ -78,7 +75,7 @@
                         </div>
                     <% else %>
                         <div class="pure-u-1-3">
-                            <a href="/toggle_theme?referer=<%= env.get?("current_page") %>" class="pure-menu-heading">
+                            <a id="toggle_theme" href="/toggle_theme?referer=<%= env.get?("current_page") %>" class="pure-menu-heading">
                                 <% if env.get("preferences").as(Preferences).dark_mode %>
                                     <i class="icon ion-ios-sunny"></i>
                                 <% else %>
@@ -153,6 +150,7 @@
         </div>
         <div class="pure-u-1 pure-u-md-2-24"></div>
     </div>
+    <script src="/js/themes.js?v=<%= CURRENT_COMMIT %>"></script>
 </body>
 
 </html>