From c5b6d7813a7f33c8ec96df3d955b77e68db9368d Mon Sep 17 00:00:00 2001 From: psvenk <45520974+psvenk@users.noreply.github.com> Date: Thu, 8 Aug 2019 13:35:33 -0400 Subject: [PATCH] Make frontend read dark mode pref from backend The JS frontend now reads from the preference stored in the Crystal backend to update the localStorage on page load, and checks the preference stored in the backend when updating the mode. This should fix the issues noted in PR #601 regarding the frontend and backend prefs not being synchronized properly. --- assets/js/themes.js | 18 ++++++++++++------ src/invidious/views/template.ecr | 1 + 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/assets/js/themes.js b/assets/js/themes.js index 0b6006c6..90a05c36 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.getElementById('dark_theme').media === 'none'; var url = '/toggle_theme?redirect=false'; var xhr = new XMLHttpRequest(); @@ -11,7 +11,7 @@ toggle_theme.addEventListener('click', function () { xhr.open('GET', url, true); set_mode(dark_mode); - localStorage.setItem('dark_mode', dark_mode ? 'dark' : 'light'); + window.localStorage.setItem('dark_mode', dark_mode ? 'dark' : 'light'); xhr.send(); }); @@ -23,6 +23,8 @@ window.addEventListener('storage', function (e) { }); window.addEventListener('load', 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); }); @@ -39,14 +41,18 @@ function set_mode (bool) { function update_mode (mode) { if (mode === 'true' /* for backwards compatibility */ || mode === 'dark') { - // If dark mode preference set + // If preference for dark mode indicated set_mode(true); } - else if (mode !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches) { - // If no preference set, but the browser tells us that the operating system has a dark theme + else if (mode === 'false' /* for backwards compaibility */ || mode === 'light') { + // If preference for light mode indicated + set_mode(false); + } + else if (document.getElementById('dark_mode_pref').textContent === '' && window.matchMedia('(prefers-color-scheme: dark)').matches) { + // If no preference indicated here and no preference indicated on the preferences page (backend), but the browser tells us that the operating system has a dark theme set_mode(true); } - else set_mode(false); + // else do nothing, falling back to the mode defined by the `dark_mode` preference on the preferences page (backend) } diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr index edc4c27b..8d8cec88 100644 --- a/src/invidious/views/template.ecr +++ b/src/invidious/views/template.ecr @@ -25,6 +25,7 @@ <% locale = LOCALES[env.get("preferences").as(Preferences).locale]? %> +