From faadb3e9de35f6901400697f8741f47221b163c5 Mon Sep 17 00:00:00 2001 From: Lorinc936 Date: Fri, 10 Apr 2026 18:43:08 +0200 Subject: [PATCH 1/8] feat: add dark mode to popup --- apps/web-clipper/entrypoints/popup/index.html | 2 ++ apps/web-clipper/entrypoints/popup/popup.css | 33 ++++++++++++++++--- apps/web-clipper/entrypoints/popup/popup.ts | 21 +++++++++++- 3 files changed, 51 insertions(+), 5 deletions(-) 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..da4ee7f7f54 100644 --- a/apps/web-clipper/entrypoints/popup/popup.css +++ b/apps/web-clipper/entrypoints/popup/popup.css @@ -1,18 +1,38 @@ +: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); } .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 +50,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..6ba7ae17d73 100644 --- a/apps/web-clipper/entrypoints/popup/popup.ts +++ b/apps/web-clipper/entrypoints/popup/popup.ts @@ -181,4 +181,23 @@ $checkConnectionButton.on("click", () => { }); }); -$(() => browser.runtime.sendMessage({name: "send-trilium-search-status"})); +const $darkModeButton = $("#dark-mode-button"); + +function loadDarkModePreference() { + const isDarkMode = localStorage.getItem('darkMode') === 'true'; + if (isDarkMode) { + document.body.classList.add('dark-mode'); + $darkModeButton.text('Light mode'); + } +} + +$darkModeButton.on("click", () => { + const isDarkMode = document.body.classList.toggle('dark-mode'); + localStorage.setItem('darkMode', isDarkMode.toString()); + $darkModeButton.text(isDarkMode ? 'Light mode' : 'Dark mode'); +}); + +$(() => { + loadDarkModePreference(); + browser.runtime.sendMessage({name: "send-trilium-search-status"}); +}); From de39225bda166f4e5e7422acff3961d8cb3d2e62 Mon Sep 17 00:00:00 2001 From: Lorinc936 Date: Fri, 10 Apr 2026 18:47:47 +0200 Subject: [PATCH 2/8] feat: add dark mode and css to options --- .../entrypoints/options/index.html | 6 + apps/web-clipper/entrypoints/options/index.ts | 21 +++- .../entrypoints/options/options.css | 105 ++++++++++++++++++ 3 files changed, 131 insertions(+), 1 deletion(-) create mode 100644 apps/web-clipper/entrypoints/options/options.css diff --git a/apps/web-clipper/entrypoints/options/index.html b/apps/web-clipper/entrypoints/options/index.html index abe09d44581..6fb839e2995 100644 --- a/apps/web-clipper/entrypoints/options/index.html +++ b/apps/web-clipper/entrypoints/options/index.html @@ -4,10 +4,16 @@ + +
+

Trilium Web Clipper Options

+ +
+ diff --git a/apps/web-clipper/entrypoints/options/index.ts b/apps/web-clipper/entrypoints/options/index.ts index b4050c977b6..880ae6c233a 100644 --- a/apps/web-clipper/entrypoints/options/index.ts +++ b/apps/web-clipper/entrypoints/options/index.ts @@ -134,4 +134,23 @@ async function restoreOptions() { $triliumDesktopPort.val(triliumDesktopPort); } -$(restoreOptions); +const $darkModeButton = $("#dark-mode-button"); + +function loadDarkModePreference() { + const isDarkMode = localStorage.getItem('darkMode') === 'true'; + if (isDarkMode) { + document.body.classList.add('dark-mode'); + $darkModeButton.text('Light mode'); + } +} + +$darkModeButton.on("click", () => { + const isDarkMode = document.body.classList.toggle('dark-mode'); + localStorage.setItem('darkMode', isDarkMode.toString()); + $darkModeButton.text(isDarkMode ? 'Light mode' : 'Dark mode'); +}); + +$(async () => { + 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..288ec545842 --- /dev/null +++ b/apps/web-clipper/entrypoints/options/options.css @@ -0,0 +1,105 @@ +: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; +} + +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"] { + 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 { + opacity: 0.8; +} + +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; +} + +.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; + white-space: nowrap; +} + +.dark-mode-btn:hover { + opacity: 0.8; +} + +#error-message, +#success-message { + padding: 10px; + border-radius: 3px; + margin-bottom: 10px; +} From b18c37905cc6ec80715d37046b96dbcc682d8ee7 Mon Sep 17 00:00:00 2001 From: Lorinc936 Date: Sat, 11 Apr 2026 15:31:57 +0200 Subject: [PATCH 3/8] feat: add transition to popup --- apps/web-clipper/entrypoints/popup/popup.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/web-clipper/entrypoints/popup/popup.css b/apps/web-clipper/entrypoints/popup/popup.css index da4ee7f7f54..61c03cfabe9 100644 --- a/apps/web-clipper/entrypoints/popup/popup.css +++ b/apps/web-clipper/entrypoints/popup/popup.css @@ -22,6 +22,8 @@ body { font-family: sans-serif; background-color: var(--bg-color); color: var(--text-color); + transition: background-color 0.3s, color 0.3s; + } .button { From 2b9a93eed3b7bb2a9a5d3365d38a29c0c31d5f5c Mon Sep 17 00:00:00 2001 From: Lorinc936 Date: Sat, 11 Apr 2026 15:38:24 +0200 Subject: [PATCH 4/8] Update apps/web-clipper/entrypoints/options/index.html --- apps/web-clipper/entrypoints/options/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web-clipper/entrypoints/options/index.html b/apps/web-clipper/entrypoints/options/index.html index 6fb839e2995..07168de3cfb 100644 --- a/apps/web-clipper/entrypoints/options/index.html +++ b/apps/web-clipper/entrypoints/options/index.html @@ -9,7 +9,7 @@ -
+

Trilium Web Clipper Options

From c3d21b2c186f3cfe6491288bedd6e8b0b3f35f59 Mon Sep 17 00:00:00 2001 From: Lorinc936 Date: Sat, 11 Apr 2026 16:01:46 +0200 Subject: [PATCH 5/8] use browser.storage.sync --- apps/web-clipper/entrypoints/options/index.ts | 12 ++++++------ apps/web-clipper/entrypoints/popup/popup.ts | 10 +++++----- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/apps/web-clipper/entrypoints/options/index.ts b/apps/web-clipper/entrypoints/options/index.ts index eb255f1ba04..814ec96f35f 100644 --- a/apps/web-clipper/entrypoints/options/index.ts +++ b/apps/web-clipper/entrypoints/options/index.ts @@ -138,21 +138,21 @@ async function restoreOptions() { const $darkModeButton = $("#dark-mode-button"); -function loadDarkModePreference() { - const isDarkMode = localStorage.getItem('darkMode') === 'true'; - if (isDarkMode) { +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'); } } -$darkModeButton.on("click", () => { +$darkModeButton.on("click", async () => { const isDarkMode = document.body.classList.toggle('dark-mode'); - localStorage.setItem('darkMode', isDarkMode.toString()); + await browser.storage.sync.set({darkMode: isDarkMode}); $darkModeButton.text(isDarkMode ? 'Light mode' : 'Dark mode'); }); $(async () => { - loadDarkModePreference(); + await loadDarkModePreference(); await restoreOptions(); }); diff --git a/apps/web-clipper/entrypoints/popup/popup.ts b/apps/web-clipper/entrypoints/popup/popup.ts index 6ba7ae17d73..cde9762d897 100644 --- a/apps/web-clipper/entrypoints/popup/popup.ts +++ b/apps/web-clipper/entrypoints/popup/popup.ts @@ -183,17 +183,17 @@ $checkConnectionButton.on("click", () => { const $darkModeButton = $("#dark-mode-button"); -function loadDarkModePreference() { - const isDarkMode = localStorage.getItem('darkMode') === 'true'; - if (isDarkMode) { +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'); } } -$darkModeButton.on("click", () => { +$darkModeButton.on("click", async () => { const isDarkMode = document.body.classList.toggle('dark-mode'); - localStorage.setItem('darkMode', isDarkMode.toString()); + await browser.storage.sync.set({darkMode: isDarkMode}); $darkModeButton.text(isDarkMode ? 'Light mode' : 'Dark mode'); }); From d784daca3cb818ac2f12226658f3c435a0b4c025 Mon Sep 17 00:00:00 2001 From: Lorinc936 Date: Sat, 11 Apr 2026 16:02:45 +0200 Subject: [PATCH 6/8] add class for the options header --- apps/web-clipper/entrypoints/options/options.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/apps/web-clipper/entrypoints/options/options.css b/apps/web-clipper/entrypoints/options/options.css index 288ec545842..b395b7f7e18 100644 --- a/apps/web-clipper/entrypoints/options/options.css +++ b/apps/web-clipper/entrypoints/options/options.css @@ -30,6 +30,13 @@ body { 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); } From 67f5ec1594fe2d99ce7ed525d43b124263a36077 Mon Sep 17 00:00:00 2001 From: Lorinc936 Date: Sat, 11 Apr 2026 16:16:26 +0200 Subject: [PATCH 7/8] await loadDarkModePreference --- apps/web-clipper/entrypoints/options/index.ts | 5 ++++- apps/web-clipper/entrypoints/popup/popup.ts | 7 +++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/apps/web-clipper/entrypoints/options/index.ts b/apps/web-clipper/entrypoints/options/index.ts index 814ec96f35f..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 }); @@ -143,6 +143,9 @@ async function loadDarkModePreference() { if (darkMode) { document.body.classList.add('dark-mode'); $darkModeButton.text('Light mode'); + } else { + document.body.classList.remove('dark-mode'); + $darkModeButton.text('Dark mode'); } } diff --git a/apps/web-clipper/entrypoints/popup/popup.ts b/apps/web-clipper/entrypoints/popup/popup.ts index cde9762d897..ef1ec1ecfd4 100644 --- a/apps/web-clipper/entrypoints/popup/popup.ts +++ b/apps/web-clipper/entrypoints/popup/popup.ts @@ -188,6 +188,9 @@ async function loadDarkModePreference() { if (darkMode) { document.body.classList.add('dark-mode'); $darkModeButton.text('Light mode'); + } else { + document.body.classList.remove('dark-mode'); + $darkModeButton.text('Dark mode'); } } @@ -197,7 +200,7 @@ $darkModeButton.on("click", async () => { $darkModeButton.text(isDarkMode ? 'Light mode' : 'Dark mode'); }); -$(() => { - loadDarkModePreference(); +$(async () => { + await loadDarkModePreference(); browser.runtime.sendMessage({name: "send-trilium-search-status"}); }); From 939a3b0a8bc28798cddd2ace62ee2a36b77e0c9d Mon Sep 17 00:00:00 2001 From: Lorinc936 Date: Sat, 11 Apr 2026 16:39:05 +0200 Subject: [PATCH 8/8] refactor(css): deduplicate button styles and unify shared rules --- .../entrypoints/options/options.css | 25 ++++++------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/apps/web-clipper/entrypoints/options/options.css b/apps/web-clipper/entrypoints/options/options.css index b395b7f7e18..187dc22cc2e 100644 --- a/apps/web-clipper/entrypoints/options/options.css +++ b/apps/web-clipper/entrypoints/options/options.css @@ -55,7 +55,8 @@ input[type="password"] { font-family: sans-serif; } -input[type="submit"] { +input[type="submit"], +.dark-mode-btn { background-color: var(--button-bg); color: var(--button-text); border: 1px solid var(--input-border); @@ -65,10 +66,15 @@ input[type="submit"] { font-family: sans-serif; } -input[type="submit"]:hover { +input[type="submit"]:hover, +.dark-mode-btn:hover { opacity: 0.8; } +.dark-mode-btn { + white-space: nowrap; +} + a { color: var(--link-color); } @@ -89,21 +95,6 @@ table tr th { font-weight: bold; } -.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; - white-space: nowrap; -} - -.dark-mode-btn:hover { - opacity: 0.8; -} - #error-message, #success-message { padding: 10px;