From f8dab77bf261c591b69e76cd7c18d16304bab78c Mon Sep 17 00:00:00 2001
From: varjolintu <sami.vanttinen@protonmail.com>
Date: Sat, 18 Apr 2020 13:06:14 +0300
Subject: [PATCH] Try to simplify the options CSS

---
 keepassxc-browser/options/options.css   | 196 ++++++++++++------------
 keepassxc-browser/options/shortcuts.css |  35 ++---
 keepassxc-browser/options/shortcuts.js  |  19 ++-
 3 files changed, 126 insertions(+), 124 deletions(-)

diff --git a/keepassxc-browser/options/options.css b/keepassxc-browser/options/options.css
index a6aba82..30a43c4 100644
--- a/keepassxc-browser/options/options.css
+++ b/keepassxc-browser/options/options.css
@@ -1,12 +1,39 @@
 body {
+    background-color: var(--kpxc-background-color);
+    color: var(--kpxc-text-color);
     font-size: 14px;
     max-width: 1440px;
 }
 
 a {
+    color: var(--kpxc-link-color);
     text-decoration: none !important;
 }
 
+a:hover {
+    color: var(--kpxc-link-hover-color);
+}
+
+pre {
+    background-color: var(--kpxc-background-color);
+    color: var(--kpxc-text-color);
+}
+
+main {
+    background: var(--kpxc-background-color);
+}
+
+input,
+input[type="checkbox"] {
+    background-color: var(--kpxc-background-color) !important;
+    border-color: var(--kpxc-input-main-border-color) !important;
+    color: var(--kpxc-text-color) !important;
+}
+
+input:active {
+    border-color: var(--kpxc-input-active-border-color);
+}
+
 input:invalid {
     border: 2px solid red;
 }
@@ -19,6 +46,38 @@ footer {
     bottom: 1rem;
 }
 
+select {
+    background-color: var(--kpxc-input-background-color) !important;
+    color: var(--kpxc-text-color) !important;
+}
+
+select option {
+    background-color: var(--kpxc-input-background-color);
+    color: var(--kpxc-text-color);
+}
+
+.table,
+tbody,
+thead,
+tr,
+th,
+td {
+    border-color: var(--kpxc-table-border-color) !important;
+}
+
+.table > caption {
+    color: var(--kpxc-text-color);
+}
+
+.table > thead,
+tbody {
+    color: var(--kpxc-text-color);
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) {
+    background-color: var(--kpxc-table-odd-color);
+}
+
 .table tbody td {
     vertical-align: middle;
 }
@@ -33,11 +92,39 @@ table td:last-of-type {
     width: 1px;
 }
 
+.close {
+    color: var(--kpxc-text-color);
+}
+
+.card {
+    background-color: var(--kpxc-card-background-color);
+    border-color: var(--kpxc-card-border-color);
+}
+
+.card-header {
+    background-color: var(--kpxc-card-header-color);
+    color: var(--kpxc-text-color);
+}
+
+.card-body {
+    background-color: var(--kpxc-card-background-color);
+    color: var(--kpxc-text-color);
+}
+
+.invalid-feedback {
+    color: var(--kpxc-link-color);
+}
+
+.invalid-feedback code {
+    color: var(--kpxc-link-hover-color) !important;
+}
+
 .fa {
     margin-right: 0.2rem;
 }
 
 .sidebar {
+    background-color: var(--kpxc-sidebar-background-color) !important;
     height: 50px;
     bottom: 0;
     position: fixed;
@@ -49,6 +136,10 @@ table td:last-of-type {
     border: 1px solid transparent;
 }
 
+#sidebar {
+    background-color: var(--kpxc-sidebar-background-color) !important;
+}
+
 h1,
 .nav-item,
 .sidebar-heading {
@@ -68,6 +159,11 @@ h1,
     font-size: 95% !important;
 }
 
+.modal-content {
+    background: var(--kpxc-background-color);
+    color: var(--kpxc-text-color);
+}
+
 @media (min-width: 768px) {
     .sidebar {
         height: auto;
@@ -79,103 +175,3 @@ h1,
         width: 240px;
     }
 }
-
-@media (prefers-color-scheme: dark), (prefers-color-scheme: light) {
-    a {
-        color: var(--kpxc-link-color);
-    }
-
-    a:hover {
-        color: var(--kpxc-link-hover-color);
-    }
-
-    body,
-    pre {
-        background-color: var(--kpxc-background-color);
-        color: var(--kpxc-text-color);
-    }
-
-    main {
-        background: var(--kpxc-background-color);
-    }
-
-    #sidebar,
-    .sidebar {
-        background-color: var(--kpxc-sidebar-background-color) !important;
-    }
-
-    input,
-    input[type="checkbox"] {
-        background-color: var(--kpxc-background-color) !important;
-        border-color: var(--kpxc-input-main-border-color) !important;
-        color: var(--kpxc-text-color) !important;
-    }
-
-    input:active {
-        border-color: var(--kpxc-input-active-border-color);
-    }
-
-    .modal-content {
-        background: var(--kpxc-background-color);
-        color: var(--kpxc-text-color);
-    }
-
-    select {
-        background-color: var(--kpxc-input-background-color) !important;
-        color: var(--kpxc-text-color) !important;
-    }
-
-    select option {
-        background-color: var(--kpxc-input-background-color);
-        color: var(--kpxc-text-color);
-    }
-
-    .table,
-    tbody,
-    thead,
-    tr,
-    th,
-    td {
-        border-color: var(--kpxc-table-border-color) !important;
-    }
-
-    .table > caption {
-        color: var(--kpxc-text-color);
-    }
-
-    .table > thead,
-    tbody {
-        color: var(--kpxc-text-color);
-    }
-
-    .table-striped > tbody > tr:nth-of-type(odd) {
-        background-color: var(--kpxc-table-odd-color);
-    }
-
-    .close {
-        color: var(--kpxc-text-color);
-    }
-
-    .card {
-        background-color: var(--kpxc-card-background-color);
-        border-color: var(--kpxc-card-border-color);
-    }
-
-    .card-header {
-        background-color: var(--kpxc-card-header-color);
-        color: var(--kpxc-text-color);
-    }
-
-    .card-body {
-        background-color: var(--kpxc-card-background-color);
-        color: var(--kpxc-text-color);
-    }
-
-    .invalid-feedback code {
-        color: var(--kpxc-link-hover-color) !important;
-    }
-
-    .invalid-feedback {
-        color: var(--kpxc-link-color);
-    }
-}
diff --git a/keepassxc-browser/options/shortcuts.css b/keepassxc-browser/options/shortcuts.css
index 0613180..d042001 100644
--- a/keepassxc-browser/options/shortcuts.css
+++ b/keepassxc-browser/options/shortcuts.css
@@ -1,8 +1,21 @@
 body {
+    background: var(--kpxc-input-background-color) !important;
+    color: var(--kpxc-text-color);
     font-size: .875rem;
     padding-top: 20px;
 }
 
+input {
+    background-color: var(--kpxc-input-background-color);
+    border: var(--kpxc-input-border);
+    border-color: var(--kpxc-input-border-color);
+    color: var(--kpxc-text-color);
+}
+
+input:active {
+    border-color: var(--kpxc-input-active-border-color);
+}
+
 .conf-container {
     margin: 0 auto;
     width: 680px;
@@ -11,6 +24,7 @@ body {
     border: var(--kpxc-container-border);
     border-radius: 4px;
     box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+    color: var(--kpxc-text-color);
 }
 
 .conf-container .conf-title {
@@ -57,25 +71,4 @@ body {
     .bg-danger {
         color: #000;
     }
-
-    body {
-        background: var(--kpxc-input-background-color) !important;
-        color: var(--kpxc-text-color);
-    }
-
-    input {
-        background-color: var(--kpxc-input-background-color);
-        border: var(--kpxc-input-border);
-        border-color: var(--kpxc-input-border-color);
-    }
-
-    input:active {
-        border-color: var(--kpxc-input-active-border-color);
-    }
-
-    .conf-container {
-        background: var(--kpxc-background-color);
-        border: var(--kpxc-container-border);
-        color: var(--kpxc-text-color);
-    }
 }
diff --git a/keepassxc-browser/options/shortcuts.js b/keepassxc-browser/options/shortcuts.js
index 15719ad..97da206 100644
--- a/keepassxc-browser/options/shortcuts.js
+++ b/keepassxc-browser/options/shortcuts.js
@@ -3,9 +3,22 @@
 const tempArray = [];
 let keyArray = [];
 
-document.querySelectorAll('input').forEach((b) => {
-    b.addEventListener('keydown', e => handleKeyDown(e));
-    b.addEventListener('keyup', e => handleKeyUp(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']);
+        }
+
+        document.querySelectorAll('input').forEach((b) => {
+            b.addEventListener('keydown', e => handleKeyDown(e));
+            b.addEventListener('keyup', e => handleKeyUp(e));
+        });
+    } catch (err) {
+        console.log('Error loading options page: ' + err);
+    }
 });
 
 const saveButtons = document.querySelectorAll('.btn-primary');