Merge pull request #1440 from stefansundin/prevent-white-flash

Settings page: load the theme earlier to prevent a white flash
This commit is contained in:
Sami Vänttinen 2021-11-08 19:42:47 +02:00 committed by GitHub
commit 4f6e2f1a8a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 0 deletions

View file

@ -146,6 +146,7 @@
"http://*/*",
"https://api.github.com/"
],
"content_security_policy": "script-src 'self' 'sha256-UD5WN2QEhRDEZ6vkLdHKFlkHwzbemzW2ppJiOLooI8o='; object-src 'none'",
"applications": {
"gecko": {
"id": "keepassxc-browser@keepassxc.org",

View file

@ -20,6 +20,13 @@
<script src="../common/translate.js" defer></script>
</head>
<body class="pt-3 pb-5">
<script>
// We eagerly load the theme here to avoid a white flash
let colorTheme = localStorage.getItem('colorTheme');
if (colorTheme) {
document.body.setAttribute('data-color-theme', colorTheme);
}
</script>
<div class="container-fluid">
<div class="row">
<nav class="col-md-3 col-lg-2 sidebar">

View file

@ -75,6 +75,8 @@ options.initGeneralSettings = function() {
$('#tab-general-settings select#colorTheme').change(async function() {
options.settings['colorTheme'] = $(this).val();
// The theme is also stored in localStorage to prevent a white flash when the settings are first opened
localStorage.setItem('colorTheme', options.settings['colorTheme']);
await options.saveSettings();
location.reload();
});
@ -608,6 +610,11 @@ options.initTheme = function() {
} else {
document.body.setAttribute('data-color-theme', options.settings['colorTheme']);
}
// Sync localStorage setting
let localStorageTheme = localStorage.getItem('colorTheme');
if (localStorageTheme !== options.settings['colorTheme']) {
localStorage.setItem('colorTheme', options.settings['colorTheme']);
}
};
options.createWarning = function(elem, text) {