prehistoric-systems/keepassxc-browser
1
0
Fork 0
mirror of https://github.com/keepassxreboot/keepassxc-browser.git synced 2026-03-11 08:54:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Load the colorTheme earlier to prevent a white flash when the Settings page is opened. This requires storing the theme somewhere where we can load it immediately before the first render (I picked localStorage for simplicity).

Browse source
This commit is contained in:
Stefan Sundin 2021-11-07 13:37:06 -08:00
parent 1c3538f316
commit fc9c612840
3 changed files with 15 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
keepassxc-browser/manifest.json
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",

7
keepassxc-browser/options/options.html
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">

7
keepassxc-browser/options/options.js
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) {