diff --git a/apps/web-clipper/entrypoints/options/index.html b/apps/web-clipper/entrypoints/options/index.html
index abe09d44581..07168de3cfb 100644
--- a/apps/web-clipper/entrypoints/options/index.html
+++ b/apps/web-clipper/entrypoints/options/index.html
@@ -4,10 +4,16 @@
+
+
+
diff --git a/apps/web-clipper/entrypoints/options/index.ts b/apps/web-clipper/entrypoints/options/index.ts
index f230ab574da..2880d1ab3d7 100644
--- a/apps/web-clipper/entrypoints/options/index.ts
+++ b/apps/web-clipper/entrypoints/options/index.ts
@@ -62,7 +62,7 @@ async function saveTriliumServerSetup(e) {
$triliumServerPassword.val('');
browser.storage.sync.set({
- triliumServerUrl: triliumServerUrl,
+ triliumServerUrl,
authToken: json.token
});
@@ -136,4 +136,26 @@ async function restoreOptions() {
$triliumDesktopPort.val(triliumDesktopPort);
}
-$(restoreOptions);
+const $darkModeButton = $("#dark-mode-button");
+
+async function loadDarkModePreference() {
+ const {darkMode} = await browser.storage.sync.get<{ darkMode: boolean }>("darkMode");
+ if (darkMode) {
+ document.body.classList.add('dark-mode');
+ $darkModeButton.text('Light mode');
+ } else {
+ document.body.classList.remove('dark-mode');
+ $darkModeButton.text('Dark mode');
+ }
+}
+
+$darkModeButton.on("click", async () => {
+ const isDarkMode = document.body.classList.toggle('dark-mode');
+ await browser.storage.sync.set({darkMode: isDarkMode});
+ $darkModeButton.text(isDarkMode ? 'Light mode' : 'Dark mode');
+});
+
+$(async () => {
+ await loadDarkModePreference();
+ await restoreOptions();
+});
diff --git a/apps/web-clipper/entrypoints/options/options.css b/apps/web-clipper/entrypoints/options/options.css
new file mode 100644
index 00000000000..187dc22cc2e
--- /dev/null
+++ b/apps/web-clipper/entrypoints/options/options.css
@@ -0,0 +1,103 @@
+:root {
+ --bg-color: #ffffff;
+ --text-color: #000000;
+ --input-bg: #ffffff;
+ --input-text: #000000;
+ --input-border: #cccccc;
+ --link-color: #0066cc;
+ --button-bg: #f0f0f0;
+ --button-text: #000000;
+ --table-border: #cccccc;
+}
+
+body.dark-mode {
+ --bg-color: #1e1e1e;
+ --text-color: #e0e0e0;
+ --input-bg: #2d2d2d;
+ --input-text: #e0e0e0;
+ --input-border: #555555;
+ --link-color: #66b3ff;
+ --button-bg: #333333;
+ --button-text: #e0e0e0;
+ --table-border: #555555;
+}
+
+body {
+ font-family: sans-serif;
+ background-color: var(--bg-color);
+ color: var(--text-color);
+ padding: 20px;
+ transition: background-color 0.3s, color 0.3s;
+}
+
+.options-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+}
+
+h1, h2 {
+ color: var(--text-color);
+}
+
+p {
+ color: var(--text-color);
+}
+
+input[type="text"],
+input[type="password"] {
+ background-color: var(--input-bg);
+ color: var(--input-text);
+ border: 1px solid var(--input-border);
+ padding: 4px;
+ border-radius: 3px;
+ font-family: sans-serif;
+}
+
+input[type="submit"],
+.dark-mode-btn {
+ background-color: var(--button-bg);
+ color: var(--button-text);
+ border: 1px solid var(--input-border);
+ padding: 4px 8px;
+ border-radius: 3px;
+ cursor: pointer;
+ font-family: sans-serif;
+}
+
+input[type="submit"]:hover,
+.dark-mode-btn:hover {
+ opacity: 0.8;
+}
+
+.dark-mode-btn {
+ white-space: nowrap;
+}
+
+a {
+ color: var(--link-color);
+}
+
+table {
+ border-collapse: collapse;
+}
+
+table tr th,
+table tr td {
+ text-align: left;
+ padding: 8px;
+ color: var(--text-color);
+ border-bottom: 1px solid var(--table-border);
+}
+
+table tr th {
+ font-weight: bold;
+}
+
+#error-message,
+#success-message {
+ padding: 10px;
+ border-radius: 3px;
+ margin-bottom: 10px;
+}
diff --git a/apps/web-clipper/entrypoints/popup/index.html b/apps/web-clipper/entrypoints/popup/index.html
index 207d6433cbd..d5fa88e7a4e 100644
--- a/apps/web-clipper/entrypoints/popup/index.html
+++ b/apps/web-clipper/entrypoints/popup/index.html
@@ -13,6 +13,8 @@ Trilium Web Clipper
+
+
diff --git a/apps/web-clipper/entrypoints/popup/popup.css b/apps/web-clipper/entrypoints/popup/popup.css
index 7d1258a1cef..61c03cfabe9 100644
--- a/apps/web-clipper/entrypoints/popup/popup.css
+++ b/apps/web-clipper/entrypoints/popup/popup.css
@@ -1,18 +1,40 @@
+:root {
+ --bg-color: #ffffff;
+ --text-color: #000000;
+ --button-bg: #eee;
+ --button-border: #ccc;
+ --textarea-bg: #ffffff;
+ --textarea-text: #000000;
+}
+
+body.dark-mode {
+ --bg-color: #1e1e1e;
+ --text-color: #e0e0e0;
+ --button-bg: #333333;
+ --button-border: #555555;
+ --textarea-bg: #2d2d2d;
+ --textarea-text: #e0e0e0;
+}
+
body {
- width: 300px;
+ width: 335px;
font-size: 12px;
font-family: sans-serif;
+ background-color: var(--bg-color);
+ color: var(--text-color);
+ transition: background-color 0.3s, color 0.3s;
+
}
.button {
margin: 3% auto;
padding: 4px;
text-align: center;
- border: 1px solid #ccc;
+ border: 1px solid var(--button-border);
border-radius: 3px;
- background-color: #eee;
+ background-color: var(--button-bg);
cursor: pointer;
- color: black;
+ color: var(--text-color);
}
.wide {
@@ -30,6 +52,11 @@ body {
#save-link-with-note-textarea {
width: 100%;
+ background-color: var(--textarea-bg);
+ color: var(--textarea-text);
+ border: 1px solid var(--button-border);
+ padding: 4px;
+ border-radius: 3px;
}
#save-button {
diff --git a/apps/web-clipper/entrypoints/popup/popup.ts b/apps/web-clipper/entrypoints/popup/popup.ts
index c68e7e6af9f..ef1ec1ecfd4 100644
--- a/apps/web-clipper/entrypoints/popup/popup.ts
+++ b/apps/web-clipper/entrypoints/popup/popup.ts
@@ -181,4 +181,26 @@ $checkConnectionButton.on("click", () => {
});
});
-$(() => browser.runtime.sendMessage({name: "send-trilium-search-status"}));
+const $darkModeButton = $("#dark-mode-button");
+
+async function loadDarkModePreference() {
+ const {darkMode} = await browser.storage.sync.get<{ darkMode: boolean }>("darkMode");
+ if (darkMode) {
+ document.body.classList.add('dark-mode');
+ $darkModeButton.text('Light mode');
+ } else {
+ document.body.classList.remove('dark-mode');
+ $darkModeButton.text('Dark mode');
+ }
+}
+
+$darkModeButton.on("click", async () => {
+ const isDarkMode = document.body.classList.toggle('dark-mode');
+ await browser.storage.sync.set({darkMode: isDarkMode});
+ $darkModeButton.text(isDarkMode ? 'Light mode' : 'Dark mode');
+});
+
+$(async () => {
+ await loadDarkModePreference();
+ browser.runtime.sendMessage({name: "send-trilium-search-status"});
+});