From 667eaca9f2fba00cdfcc81c16dfda411ed932aac Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 29 Dec 2025 12:35:49 +0200
Subject: [PATCH] feat(pdfjs): improve style to better match Trilium

---
 packages/pdfjs-viewer/scripts/build.ts   |  1 +
 packages/pdfjs-viewer/src/custom.css     | 13 +++++++++++++
 packages/pdfjs-viewer/viewer/viewer.html |  1 +
 3 files changed, 15 insertions(+)
 create mode 100644 packages/pdfjs-viewer/src/custom.css

diff --git a/packages/pdfjs-viewer/scripts/build.ts b/packages/pdfjs-viewer/scripts/build.ts
index cdaac9827..3d18617d2 100644
--- a/packages/pdfjs-viewer/scripts/build.ts
+++ b/packages/pdfjs-viewer/scripts/build.ts
@@ -5,6 +5,7 @@ const build = new BuildHelper("packages/pdfjs-viewer");
 async function main() {
     build.copy("viewer", "web");
     build.copy("src/custom.mjs", "web/custom.mjs");
+    build.copy("src/custom.css", "web/custom.css");
     build.copy("/node_modules/pdfjs-dist/build/pdf.mjs", "build/pdf.mjs");
     build.copy("/node_modules/pdfjs-dist/build/pdf.worker.mjs", "build/pdf.worker.mjs");
 }
diff --git a/packages/pdfjs-viewer/src/custom.css b/packages/pdfjs-viewer/src/custom.css
new file mode 100644
index 000000000..322b940ad
--- /dev/null
+++ b/packages/pdfjs-viewer/src/custom.css
@@ -0,0 +1,13 @@
+:root {
+    --toolbar-bg-color: var(--tn-main-background);
+    --toolbar-border-color: var(--tn-main-border-color);
+}
+
+body {
+    --body-bg-color: var(--tn-main-background);
+}
+
+.page .canvasWrapper {
+    border: 1px solid var(--tn-main-border-color);
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+}
diff --git a/packages/pdfjs-viewer/viewer/viewer.html b/packages/pdfjs-viewer/viewer/viewer.html
index 8a34152a6..98a781091 100644
--- a/packages/pdfjs-viewer/viewer/viewer.html
+++ b/packages/pdfjs-viewer/viewer/viewer.html
@@ -32,6 +32,7 @@ See https://github.com/adobe-type-tools/cmap-resources
 <script src="../build/pdf.mjs" type="module"></script>
 
     <link rel="stylesheet" href="viewer.css" />
+    <link rel="stylesheet" href="custom.css" />
 
     <script src="custom.mjs" type="module"></script>
     <script src="viewer.mjs" type="module"></script>