mirrors/invidious
1
0
Fork 0
mirror of https://github.com/iv-org/invidious.git synced 2025-08-03 19:28:29 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Make frontend read dark mode pref from backend

Browse Source 
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.
This commit is contained in:
psvenk 2019-08-08 13:35:33 -04:00 committed by Omar Roth
parent 21dcbab432
commit c5b6d7813a
No known key found for this signature in database
GPG Key ID: B8254FB7EC3D37F2
2 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
assets/js/themes.js
View File

@ -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)
}

1
src/invidious/views/template.ecr
View File

@ -25,6 +25,7 @@
<% locale = LOCALES[env.get("preferences").as(Preferences).locale]? %>
<body>
<span style="display:none" id="dark_mode_pref"><%= env.get("preferences").as(Preferences).dark_mode %></span>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-2-24"></div>
<div class="pure-u-1 pure-u-md-20-24">