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]? %>
+ <%= env.get("preferences").as(Preferences).dark_mode %>