Skip to content

feat: web clipper dark mode #9378

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Lorinc936 wants to merge 13 commits into
base: main
Choose a base branch
from
Open

feat: web clipper dark mode #9378

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
faadb3e
feat: add dark mode to popup
Lorinc936 Apr 10, 2026
de39225
feat: add dark mode and css to options
Lorinc936 Apr 10, 2026
0ce4dea
Merge branch 'TriliumNext:main' into feature/web-clipper-dark-mode
Lorinc936 Apr 11, 2026
b18c379
feat: add transition to popup
Lorinc936 Apr 11, 2026
2b9a93e
Update apps/web-clipper/entrypoints/options/index.html
Lorinc936 Apr 11, 2026
c3d21b2
use browser.storage.sync
Lorinc936 Apr 11, 2026
d784dac
add class for the options header
Lorinc936 Apr 11, 2026
67f5ec1
await loadDarkModePreference
Lorinc936 Apr 11, 2026
939a3b0
refactor(css): deduplicate button styles and unify shared rules
Lorinc936 Apr 11, 2026
42a6aa3
Merge branch 'TriliumNext:main' into feature/web-clipper-dark-mode
Lorinc936 Apr 13, 2026
12780f5
Merge branch 'TriliumNext:main' into feature/web-clipper-dark-mode
Lorinc936 Apr 15, 2026
f3db288
Merge branch 'TriliumNext:main' into feature/web-clipper-dark-mode
Lorinc936 Apr 16, 2026
744bbd9
Merge branch 'TriliumNext:main' into feature/web-clipper-dark-mode
Lorinc936 Apr 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions apps/web-clipper/entrypoints/options/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,16 @@
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="stylesheet" href="options.css"/>
</head>

<body>

<div class="options-header">
<h1>Trilium Web Clipper Options</h1>
<button id="dark-mode-button" class="dark-mode-btn">Dark mode</button>
</div>

<div id="error-message" style="font-weight: bold; color: red; display: none;"></div>
<div id="success-message" style="font-weight: bold; color: green; display: none;"></div>

Expand Down
21 changes: 20 additions & 1 deletion apps/web-clipper/entrypoints/options/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,4 +136,23 @@ 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');
}
}

$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');
});
Comment on lines +141 to +156
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot Apr 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This dark mode logic (loading preference and handling the toggle) is identical to the implementation in apps/web-clipper/entrypoints/popup/popup.ts. To improve maintainability and prevent logic divergence, consider refactoring this into a shared utility function.

Comment on lines +141 to +156
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot Apr 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The logic for managing dark mode (loading the preference and handling the toggle) is identical to the implementation in popup.ts. To improve maintainability and ensure consistent behavior across the extension, consider extracting this logic into a shared utility function in a common file (e.g., under utils/).


$(async () => {
await loadDarkModePreference();
await restoreOptions();
});
112 changes: 112 additions & 0 deletions apps/web-clipper/entrypoints/options/options.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
: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 {
Comment thread
Lorinc936 marked this conversation as resolved.
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"] {
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;
}
Comment thread
Lorinc936 marked this conversation as resolved.
Outdated

.dark-mode-btn:hover {
opacity: 0.8;
}

#error-message,
#success-message {
padding: 10px;
border-radius: 3px;
margin-bottom: 10px;
}
2 changes: 2 additions & 0 deletions apps/web-clipper/entrypoints/popup/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ <h3>Trilium Web Clipper</h3>


<div style="position: relative; top: 6px;">
<button class="button" id="dark-mode-button">Dark mode</button>

<button class="button" id="show-options-button">Options</button>

<button class="button" id="show-help-button">Help</button>
Expand Down
35 changes: 31 additions & 4 deletions apps/web-clipper/entrypoints/popup/popup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Comment on lines +1 to +17
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot Apr 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The dark mode color palette and variable definitions are duplicated between popup.css and options.css. Refactoring these into a shared CSS file would ensure consistency and simplify future theme updates.


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;

}
Comment thread
Lorinc936 marked this conversation as resolved.

.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 {
Expand All @@ -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 {
Expand Down
21 changes: 20 additions & 1 deletion apps/web-clipper/entrypoints/popup/popup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,4 +181,23 @@ $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');
}
}

$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');
});

$(() => {
loadDarkModePreference();
browser.runtime.sendMessage({name: "send-trilium-search-status"});
Comment thread
Lorinc936 marked this conversation as resolved.
});
Comment thread
Lorinc936 marked this conversation as resolved.
Outdated
Loading