diff options
| -rw-r--r-- | assets/js/themes.js | 34 | ||||
| -rw-r--r-- | src/invidious.cr | 11 | ||||
| -rw-r--r-- | src/invidious/views/template.ecr | 12 |
3 files changed, 49 insertions, 8 deletions
diff --git a/assets/js/themes.js b/assets/js/themes.js new file mode 100644 index 00000000..178ff112 --- /dev/null +++ b/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'); + } +} diff --git a/src/invidious.cr b/src/invidious.cr index 9ba9d869..2ef89ac3 100644 --- a/src/invidious.cr +++ b/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 - env.redirect referer + if redirect + env.redirect referer + else + env.response.content_type = "application/json" + "{}" + end end post "/watch_ajax" do |env| diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr index 6df0733f..247e36b4 100644 --- a/src/invidious/views/template.ecr +++ b/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 %>"> - <% else %> - <link rel="stylesheet" href="/css/lighttheme.css?v=<%= CURRENT_COMMIT %>"> - <% end %> + <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/lighttheme.css?v=<%= CURRENT_COMMIT %>" id="light_theme" <% if env.get("preferences").as(Preferences).dark_mode %>media="none"<% 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> |