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

Upgrade bootstrap for improved dark mode support (#1987)

Browse source 
Upgrade bootstrap for improved dark mode support
This commit is contained in:
Stefan Sundin 2023-11-19 21:33:42 -08:00 committed by GitHub
parent 4090b07e06
commit 82261569e9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 50 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -31,7 +31,7 @@ KeePassXC-Browser extension requests the following permissions:
| `clipboardWrite` | Allows password to be copied from password generator to clipboard |
| `nativeMessaging` | Allows communication with KeePassXC application |
| `notifications` | To show browser notifications |
| `storage` | For storing extension settings to localStorage |
| `storage` | For storing extension settings (always stored locally in the browser, they are never synced) |
| `tabs` | To request tab URL's and other info |
| `webNavigation` | To show browser notifications on install or update |
| `webRequest` | For handling HTTP Basic Auth |

7
keepassxc-browser/bootstrap/bootstrap.min.css vendored
View file

File diff suppressed because one or more lines are too long

6
keepassxc-browser/bootstrap/bootstrap.min.js vendored
View file

File diff suppressed because one or more lines are too long

13
keepassxc-browser/content/ui.js
View file

@ -324,16 +324,11 @@ const DOMRectToArray = function(domRect) {
};
const initColorTheme = function(elem) {
const colorTheme = kpxc.settings['colorTheme'];
if (colorTheme === undefined) {
elem.removeAttribute('data-color-theme');
} else if (colorTheme === 'system') {
const theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
elem.setAttribute('data-color-theme', theme);
} else {
elem.setAttribute('data-color-theme', colorTheme);
let theme = kpxc.settings['colorTheme'];
if (theme === 'system') {
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
elem.setAttribute('data-bs-theme', theme);
};
const createStylesheet = function(file) {

8
keepassxc-browser/css/colors.css
View file

@ -40,13 +40,13 @@
--kpxc-link-hover-color: #429f14;
--kpxc-table-border-color: #a0a0a0;
--kpxc-table-hover-color: #474948;
--kpxc-table-odd-color: #3b3d3c;
--kpxc-table-odd-color: #383a39;
--kpxc-text-color: #cbcfcb;
}
}
/* Same colors for manual switching */
[data-color-theme='dark'] {
[data-bs-theme='dark'] {
--kpxc-autocomplete-menu-border: 1px solid #3b3b3d;
--kpxc-background-color: #3b3b3d;
--kpxc-card-background-color: #2b2a2a;
@ -64,11 +64,11 @@
--kpxc-link-hover-color: #429f14;
--kpxc-table-border-color: #a0a0a0;
--kpxc-table-hover-color: #474948;
--kpxc-table-odd-color: #3b3b3d;
--kpxc-table-odd-color: #383a39;
--kpxc-text-color: #cbcfcb;
}
[data-color-theme='light'] {
[data-bs-theme='light'] {
--kpxc-autocomplete-menu-border: 1px solid #ddd;
--kpxc-background-color: #fff;
--kpxc-card-background-color: #fff;

2
keepassxc-browser/manifest.json
View file

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

5
keepassxc-browser/options/options.css
View file

@ -92,7 +92,12 @@ tbody {
color: var(--kpxc-text-color);
}
.table>:not(caption)>*>* {
color: var(--kpxc-text-color);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
--bs-table-bg-type: var(--kpxc-table-odd-color);
background-color: var(--kpxc-table-odd-color);
color: var(--kpxc-text-color);
}

10
keepassxc-browser/options/options.html
View file

@ -21,10 +21,11 @@
<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);
let theme = localStorage.getItem('colorTheme') || 'system';
if (theme === 'system') {
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
document.documentElement.setAttribute('data-bs-theme', theme);
</script>
<div class="container-fluid">
<div class="row">
@ -857,8 +858,7 @@
<pre>
The MIT License (MIT)
Copyright (c) 2011-2022 Twitter, Inc.
Copyright (c) 2011-2022 The Bootstrap Authors
Copyright (c) 2011-2023 The Bootstrap Authors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal

31
keepassxc-browser/options/options.js
View file

@ -84,11 +84,7 @@ options.initGeneralSettings = function() {
options.saveSettings();
};
if (options.settings['colorTheme'] === undefined) {
$('#tab-general-settings select#colorTheme').value = 'system';
} else {
$('#tab-general-settings select#colorTheme').value = options.settings['colorTheme'];
}
$('#tab-general-settings select#colorTheme').value = options.settings['colorTheme'];
const generalSettingsCheckboxes = document.querySelectorAll('#tab-general-settings input[type=checkbox]');
for (const checkbox of generalSettingsCheckboxes) {
@ -132,7 +128,13 @@ options.initGeneralSettings = function() {
// 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();
options.updateTheme();
});
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
if (options.settings['colorTheme'] === 'system') {
options.updateTheme();
}
});
$('#tab-general-settings select#credentialSorting').addEventListener('change', async function(e) {
@ -664,17 +666,13 @@ options.initAbout = function() {
$('#tab-about span.kpxcbrBrowser').textContent = getBrowserId();
};
options.initTheme = function() {
if (options.settings['colorTheme'] === undefined) {
document.body.removeAttribute('data-color-theme');
} else {
document.body.setAttribute('data-color-theme', options.settings['colorTheme']);
}
// Sync localStorage setting
const localStorageTheme = localStorage.getItem('colorTheme');
if (localStorageTheme !== options.settings['colorTheme']) {
localStorage.setItem('colorTheme', options.settings['colorTheme']);
options.updateTheme = function() {
let theme = options.settings['colorTheme'];
if (theme === 'system') {
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
document.documentElement.setAttribute('data-bs-theme', theme);
browser.runtime.sendMessage({ action: 'update_popup' });
};
options.createWarning = function(elem, text) {
@ -724,7 +722,6 @@ const getBrowserId = function() {
options.initCustomLoginFields();
options.initSitePreferences();
options.initAbout();
options.initTheme();
} catch (err) {
console.log('Error loading options page: ' + err);
}

8
keepassxc-browser/options/shortcuts.js
View file

@ -116,11 +116,11 @@ function shortCutChanged(e) {
(async function() {
try {
const settings = await browser.runtime.sendMessage({ action: 'load_settings' });
if (settings['colorTheme'] === undefined) {
document.body.removeAttribute('data-color-theme');
} else {
document.body.setAttribute('data-color-theme', settings['colorTheme']);
let theme = settings['colorTheme'];
if (theme === 'system') {
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
document.documentElement.setAttribute('data-bs-theme', theme);
document.querySelectorAll('input').forEach((b) => {
b.addEventListener('keydown', e => shortCutChanged(e));

3
keepassxc-browser/popups/popup.css
View file

@ -11,6 +11,7 @@ body {
}
code {
color: var(--bs-danger) !important;
font-size: 14px !important;
}
@ -61,7 +62,7 @@ code {
justify-content: space-between;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #333;
border-bottom: 1px solid rgb(203, 207, 203, 0.25);
font-size: 90%;
text-align: left;
}

10
keepassxc-browser/popups/popup_functions.js
View file

@ -36,15 +36,13 @@ async function initSettings() {
}
async function initColorTheme() {
const colorTheme = await browser.runtime.sendMessage({
let theme = await browser.runtime.sendMessage({
action: 'get_color_theme'
});
if (colorTheme === undefined || colorTheme === 'system') {
document.body.removeAttribute('data-color-theme');
} else {
document.body.setAttribute('data-color-theme', colorTheme);
if (theme === 'system') {
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
document.documentElement.setAttribute('data-bs-theme', theme);
}
async function getLoginData() {