Skip to content

Commit

Permalink
Rollup merge of rust-lang#93253 - jsha:theme-on-show, r=GuillaumeGomez
Browse files Browse the repository at this point in the history
Update theme on pageshow event

When a user goes forward or back, the page may be rendered from the back/forward cache (https://web.dev/bfcache/) rather than from scratch. If they have changed theme in the meantime, that means seeing an incorrect theme on the page they went forward or back to. The `pageshow` event fires on such navigations, so we can update the theme based on that event.

Demo: https://rustdoc.crud.net/jsha/theme-on-show/std/string/trait.ToString.html

r? `@GuillaumeGomez`
  • Loading branch information
matthiaskrgr authored Jan 24, 2022
2 parents d1aa2f7 + b30725e commit ee35ed3
Showing 1 changed file with 25 additions and 6 deletions.
31 changes: 25 additions & 6 deletions src/librustdoc/html/static/js/storage.js
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,15 @@ var updateSystemTheme = (function() {
};
})();

function switchToSavedTheme() {
switchTheme(
window.currentTheme,
window.mainTheme,
getSettingValue("theme") || "light",
false
);
}

if (getSettingValue("use-system-theme") !== "false" && window.matchMedia) {
// update the preferred dark theme if the user is already using a dark theme
// See https://github.com/rust-lang/rust/pull/77809#issuecomment-707875732
Expand All @@ -228,10 +237,20 @@ if (getSettingValue("use-system-theme") !== "false" && window.matchMedia) {
// call the function to initialize the theme at least once!
updateSystemTheme();
} else {
switchTheme(
window.currentTheme,
window.mainTheme,
getSettingValue("theme") || "light",
false
);
switchToSavedTheme();
}

// If we navigate away (for example to a settings page), and then use the back or
// forward button to get back to a page, the theme may have changed in the meantime.
// But scripts may not be re-loaded in such a case due to the bfcache
// (https://web.dev/bfcache/). The "pageshow" event triggers on such navigations.
// Use that opportunity to update the theme.
// We use a setTimeout with a 0 timeout here to put the change on the event queue.
// For some reason, if we try to change the theme while the `pageshow` event is
// running, it sometimes fails to take effect. The problem manifests on Chrome,
// specifically when talking to a remote website with no caching.
window.addEventListener("pageshow", function(ev) {
if (ev.persisted) {
setTimeout(switchToSavedTheme, 0);
}
});

0 comments on commit ee35ed3

Please sign in to comment.