dark theme tweaks

package-lock.json

@@ -711,9 +711,9 @@
       "dev": true
     },
     "@types/eslint": {
-      "version": "7.2.11",
+      "version": "7.2.13",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.11.tgz",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.13.tgz",
-      "integrity": "sha512-WYhv//5K8kQtsSc9F1Kn2vHzhYor6KpwPbARH7hwYe3C3ETD0EVx/3P5qQybUoaBEuUa9f/02JjBiXFWalYUmw==",
+      "integrity": "sha512-LKmQCWAlnVHvvXq4oasNUMTJJb2GwSyTY8+1C7OH5ILR8mPLaljv1jxL1bXW3xB3jFbQxTKxJAvI8PyjB09aBg==",
       "dev": true,
       "requires": {
         "@types/estree": "*",
@@ -1038,9 +1038,9 @@
       }
     },
     "acorn": {
-      "version": "8.2.2",
+      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.3.0.tgz",
-      "integrity": "sha512-VrMS8kxT0e7J1EX0p6rI/E0FbfOVcvBpbIqHThFv+f8YrZIlMfVotYcXKVPmTvPW8sW5miJzfUFrrvthUZg8VQ==",
+      "integrity": "sha512-tqPKHZ5CaBJw0Xmy0ZZvLs1qTV+BNFSyvn77ASXkpBNfIRk8ev26fKrD9iLGwGA9zedPao52GSHzq8lyZG0NUw==",
       "dev": true
     },
     "acorn-globals": {
@@ -1943,9 +1943,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001228",
+      "version": "1.0.30001233",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001233.tgz",
-      "integrity": "sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A==",
+      "integrity": "sha512-BmkbxLfStqiPA7IEzQpIk0UFZFf3A4E6fzjPJ6OR+bFC2L8ES9J8zGA/asoi47p8XDVkev+WJo2I2Nc8c/34Yg==",
       "dev": true
     },
     "caseless": {
@@ -3823,9 +3823,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.3.735",
+      "version": "1.3.743",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.735.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.743.tgz",
-      "integrity": "sha512-cp7MWzC3NseUJV2FJFgaiesdrS+A8ZUjX5fLAxdRlcaPDkaPGFplX930S5vf84yqDp4LjuLdKouWuVOTwUfqHQ==",
+      "integrity": "sha512-K2wXfo9iZQzNJNx67+Pld0DRF+9bYinj62gXCdgPhcu1vidwVuLPHQPPFnCdO55njWigXXpfBiT90jGUPbw8Zg==",
       "dev": true
     },
     "electron-window-state": {
@@ -5192,14 +5192,25 @@
       "dev": true
     },
     "jest-worker": {
-      "version": "26.6.2",
+      "version": "27.0.2",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.0.2.tgz",
-      "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
+      "integrity": "sha512-EoBdilOTTyOgmHXtw/cPc+ZrCA0KJMrkXzkrPGNwLmnvvlN1nj7MPrxpT7m+otSv2e1TLaVffzDnE/LB14zJMg==",
       "dev": true,
       "requires": {
         "@types/node": "*",
         "merge-stream": "^2.0.0",
-        "supports-color": "^7.0.0"
+        "supports-color": "^8.0.0"
+      },
+      "dependencies": {
+        "supports-color": {
+          "version": "8.1.1",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+          "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
       }
     },
     "jimp": {
@@ -5799,11 +5810,18 @@
       "integrity": "sha512-QBmA/G2y+IfeS4oktet3qRZ+P5kPhCKRXxXnQEudYqUaEioAU1/Lq2us3D/t1Jfo4hE9REQPrbB7K5sOczJVIw=="
     },
     "mime-types": {
-      "version": "2.1.30",
+      "version": "2.1.31",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.30.tgz",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.31.tgz",
-      "integrity": "sha512-crmjA4bLtR8m9qLpHvgxSChT+XoSlZi8J4n/aIdn3z92e/U47Z0V/yl+Wh9W046GgFVAmoNR/fmdbZYcSSIUeg==",
+      "integrity": "sha512-XGZnNzm3QvgKxa8dpzyhFTHmpP3l5YNusmne07VUOXxou9CqUqYa/HBy124RqtVh/O2pECas/MOcsDgpilPOPg==",
       "requires": {
-        "mime-db": "1.47.0"
+        "mime-db": "1.48.0"
+      },
+      "dependencies": {
+        "mime-db": {
+          "version": "1.48.0",
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.48.0.tgz",
+          "integrity": "sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ=="
+        }
       }
     },
     "mimic-fn": {
@@ -7825,12 +7843,12 @@
       }
     },
     "terser-webpack-plugin": {
-      "version": "5.1.2",
+      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.1.3.tgz",
-      "integrity": "sha512-6QhDaAiVHIQr5Ab3XUWZyDmrIPCHMiqJVljMF91YKyqwKkL5QHnYMkrMBy96v9Z7ev1hGhSEw1HQZc2p/s5Z8Q==",
+      "integrity": "sha512-cxGbMqr6+A2hrIB5ehFIF+F/iST5ZOxvOmy9zih9ySbP1C2oEWQSOUS+2SNBTjzx5xLKO4xnod9eywdfq1Nb9A==",
       "dev": true,
       "requires": {
-        "jest-worker": "^26.6.2",
+        "jest-worker": "^27.0.2",
         "p-limit": "^3.1.0",
         "schema-utils": "^3.0.0",
         "serialize-javascript": "^5.0.1",
@@ -8257,9 +8275,9 @@
       "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w=="
     },
     "webpack": {
-      "version": "5.37.1",
+      "version": "5.38.1",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.37.1.tgz",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.38.1.tgz",
-      "integrity": "sha512-btZjGy/hSjCAAVHw+cKG+L0M+rstlyxbO2C+BOTaQ5/XAnxkDrP5sVbqWhXgo4pL3X2dcOib6rqCP20Zr9PLow==",
+      "integrity": "sha512-OqRmYD1OJbHZph6RUMD93GcCZy4Z4wC0ele4FXyYF0J6AxO1vOSuIlU1hkS/lDlR9CDYBz64MZRmdbdnFFoT2g==",
       "dev": true,
       "requires": {
         "@types/eslint-scope": "^3.7.0",
@@ -8272,7 +8290,7 @@
         "chrome-trace-event": "^1.0.2",
         "enhanced-resolve": "^5.8.0",
         "es-module-lexer": "^0.4.0",
-        "eslint-scope": "^5.1.1",
+        "eslint-scope": "5.1.1",
         "events": "^3.2.0",
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.2.4",
@@ -8283,8 +8301,8 @@
         "schema-utils": "^3.0.0",
         "tapable": "^2.1.1",
         "terser-webpack-plugin": "^5.1.1",
-        "watchpack": "^2.0.0",
+        "watchpack": "^2.2.0",
-        "webpack-sources": "^2.1.1"
+        "webpack-sources": "^2.3.0"
       }
     },
     "webpack-cli": {
@@ -8327,9 +8345,9 @@
       }
     },
     "webpack-sources": {
-      "version": "2.2.0",
+      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-2.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-2.3.0.tgz",
-      "integrity": "sha512-bQsA24JLwcnWGArOKUxYKhX3Mz/nK1Xf6hxullKERyktjNMC4x8koOeaDNTA2fEJ09BdWLbM/iTW0ithREUP0w==",
+      "integrity": "sha512-WyOdtwSvOML1kbgtXbTDnEW0jkJ7hZr/bDByIwszhWd/4XX1A3XMkrbFMsuH4+/MfLlZCUzlAdg4r7jaGKEIgQ==",
       "dev": true,
       "requires": {
         "source-list-map": "^2.0.1",

src/public/app/widgets/buttons/button_widget.js

@@ -21,12 +21,10 @@ export default class ButtonWidget extends NoteContextAwareWidget {
         this.$widget = $(TPL);
         this.overflowing();
 
-        if (this.settings.command) {
-            this.$widget.on("click", () => this.triggerCommand(this.settings.command));
-        }
-
         if (this.settings.onClick) {
             this.$widget.on("click", () => this.settings.onClick(this));
+        } else {
+            this.$widget.on("click", () => this.triggerCommand(this.settings.command));
         }
 
         this.$widget.attr("data-placement", this.settings.titlePlacement);

src/public/app/widgets/section_widgets/link_map.js

@@ -22,12 +22,19 @@ const TPL = `
             font-size: 180%;
             z-index: 1000;
         }
+        
+        .style-resolver {
+            color: var(--muted-text-color);
+            display: none;
+        }
     </style>
 
     <button class="bx bx-arrow-to-bottom icon-action open-full-button" title="Open full"></button>
     <button class="bx bx-arrow-to-top icon-action collapse-button" style="display: none;" title="Collapse to normal size"></button>
 
     <div class="link-map-container"></div>
+    
+    <div class="style-resolver"></div>
 </div>`;
 
 export default class LinkMapWidget extends NoteContextAwareWidget {
@@ -69,6 +76,8 @@ export default class LinkMapWidget extends NoteContextAwareWidget {
             this.openState = 'small';
         });
 
+        this.$styleResolver = this.$widget.find('.style-resolver');
+
         this.overflowing();
 
         window.addEventListener('resize', () => {
@@ -123,6 +132,12 @@ export default class LinkMapWidget extends NoteContextAwareWidget {
 
         this.$container.empty();
 
+        this.css = {
+            fontFamily: this.$container.css("font-family"),
+            textColor: this.rgb2hex(this.$container.css("color")),
+            mutedTextColor: this.rgb2hex(this.$styleResolver.css("color"))
+        };
+
         await libraryLoader.requireLibrary(libraryLoader.FORCE_GRAPH);
 
         this.graph = ForceGraph()(this.$container[0])
@@ -146,7 +161,7 @@ export default class LinkMapWidget extends NoteContextAwareWidget {
             .linkDirectionalArrowLength(4)
             .linkDirectionalArrowRelPos(1)
             .linkWidth(2)
-            .linkColor("#ddd")
+            .linkColor(() => this.css.mutedTextColor)
             .d3VelocityDecay(0.2)
             .onNodeClick(node => this.nodeClicked(node));
 
@@ -243,10 +258,10 @@ export default class LinkMapWidget extends NoteContextAwareWidget {
             return;
         }
 
-        ctx.font = '3px MontserratLight';
+        ctx.font = '3px ' + this.css.fontFamily;
         ctx.textAlign = 'center';
         ctx.textBaseline = 'middle';
-        ctx.fillStyle = "grey";
+        ctx.fillStyle = this.css.mutedTextColor;
 
         const {source, target} = link;
 
@@ -285,15 +300,15 @@ export default class LinkMapWidget extends NoteContextAwareWidget {
         }
 
         if (!node.expanded) {
-            ctx.fillStyle =  "white";
+            ctx.fillStyle =  this.css.textColor;
-            ctx.font = 10 + 'px MontserratLight';
+            ctx.font = 10 + 'px ' + this.css.fontFamily;
             ctx.textAlign = 'center';
             ctx.textBaseline = 'middle';
             ctx.fillText("+", x, y + 0.5);
         }
 
-        ctx.fillStyle = "#555";
+        ctx.fillStyle = this.css.textColor;
-        ctx.font = 5 + 'px MontserratLight';
+        ctx.font = 5 + 'px ' + this.css.fontFamily;
         ctx.textAlign = 'center';
         ctx.textBaseline = 'middle';
 
@@ -319,6 +334,13 @@ export default class LinkMapWidget extends NoteContextAwareWidget {
         return colour;
     }
 
+    rgb2hex(rgb) {
+        return `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
+            .slice(1)
+            .map(n => parseInt(n, 10).toString(16).padStart(2, '0'))
+            .join('')}`
+    }
+
     entitiesReloadedEvent({loadResults}) {
         if (loadResults.getAttributes().find(attr => attr.type === 'relation' && (attr.noteId === this.noteId || attr.value === this.noteId))) {
             this.refresh();

src/public/app/widgets/standard_top_widget.js

@@ -1,112 +0,0 @@
-import BasicWidget from "./basic_widget.js";
-import HistoryNavigationWidget from "./history_navigation.js";
-import protectedSessionHolder from "../services/protected_session_holder.js";
-import protectedSessionService from "../services/protected_session.js";
-import QuickSearchWidget from "./quick_search.js";
-
-const TPL = `
-<div class="standard-top-widget">
-    <style>
-    .standard-top-widget {
-        background-color: var(--header-background-color);
-        display: flex;
-        align-items: center;
-        padding-top: 4px;
-        height: 35px;
-    }
-    
-    .standard-top-widget > div {
-        flex-shrink: 0; /* fixes https://github.com/zadam/trilium/issues/1745 */
-    }
-    
-    .standard-top-widget button.noborder {
-        padding: 1px 5px 1px 5px;
-        font-size: 90%;
-        margin-bottom: 2px;
-        margin-top: 2px;
-        margin-right: 8px;
-        border-color: transparent !important;
-    }
-    
-    .standard-top-widget button.btn-sm .bx {
-        position: relative;
-        top: 2px;
-        font-size: 120%;
-    }
-    
-    .standard-top-widget button:hover {
-        border-color: var(--button-border-color) !important;
-    }
-    </style>
-
-    <div style="flex-grow: 100; display: flex;">
-        <button class="btn btn-sm noborder" data-trigger-command="createNoteIntoInbox">
-            <span class="bx bx-file-blank"></span>
-            New note
-        </button>
-        
-        <button class="btn btn-sm noborder" data-trigger-command="searchNotes">
-            <span class="bx bx-search"></span>
-            Search
-        </button>
-    
-        <button class="btn btn-sm noborder" data-trigger-command="jumpToNote">
-            <span class="bx bx-send"></span>
-            Jump to note
-        </button>
-    
-        <button class="btn btn-sm noborder" data-trigger-command="showRecentChanges">
-            <span class="bx bx-history"></span>
-    
-            Recent changes
-        </button>
-    
-        <button class="btn btn-sm enter-protected-session-button noborder"
-                title="Enter protected session to be able to find and view protected notes">
-            <span class="bx bx-log-in"></span>
-    
-            Enter protected session
-        </button>
-    
-        <button class="btn btn-sm leave-protected-session-button noborder"
-                title="Leave protected session so that protected notes are not accessible any more.">
-            <span class="bx bx-log-out"></span>
-    
-            Leave protected session
-        </button>
-    </div>
-    
-    <div id="plugin-buttons"></div>
-</div>`;
-
-export default class StandardTopWidget extends BasicWidget {
-    doRender() {
-        this.$widget = $(TPL);
-        this.overflowing();
-
-        const historyNavigationWidget = new HistoryNavigationWidget();
-        this.child(historyNavigationWidget);
-
-        this.$widget.prepend(historyNavigationWidget.render());
-
-        const quickSearchWidget = new QuickSearchWidget();
-        this.child(quickSearchWidget);
-
-        this.$widget.append(quickSearchWidget.render());
-
-        this.$enterProtectedSessionButton = this.$widget.find(".enter-protected-session-button");
-        this.$enterProtectedSessionButton.on('click', protectedSessionService.enterProtectedSession);
-        this.$enterProtectedSessionButton.toggle(!protectedSessionHolder.isProtectedSessionAvailable());
-
-        this.$leaveProtectedSessionButton = this.$widget.find(".leave-protected-session-button");
-        this.$leaveProtectedSessionButton.on('click', protectedSessionService.leaveProtectedSession);
-        this.$leaveProtectedSessionButton.toggle(protectedSessionHolder.isProtectedSessionAvailable());
-
-        return this.$widget;
-    }
-
-    protectedSessionStartedEvent() {
-        this.$enterProtectedSessionButton.hide();
-        this.$leaveProtectedSessionButton.show();
-    }
-}

src/public/app/widgets/tab_row.js

@@ -79,9 +79,9 @@ const TAB_ROW_TPL = `
     .note-new-tab {
         position: absolute;
         left: 0;
-        width: 40px;
+        width: 36px;
-        height: 40px;
+        height: 36px;
-        padding: 3px;
+        padding: 1px;
         border: 0;
         margin: 0;
         z-index: 1;
@@ -130,12 +130,14 @@ const TAB_ROW_TPL = `
         border-radius: 8px;
         overflow: hidden;
         pointer-events: all;
-        background-color: var(--accented-background-color);
+        color: var(--inactive-tab-text-color);
+        background-color: var(--inactive-tab-background-color);
     }
     
     .note-tab-row .note-tab[active] .note-tab-wrapper {
         font-weight: bold;
-        background-color : var(--active-item-background-color);
+        color: var(--active-tab-text-color);
+        background-color : var(--active-tab-background-color);
     }
     
     .note-tab-row .note-tab[is-mini] .note-tab-wrapper {
@@ -148,7 +150,6 @@ const TAB_ROW_TPL = `
         vertical-align: top;
         overflow: hidden;
         white-space: nowrap;
-        color: var(--muted-text-color);
     }
     
     .note-tab-row .note-tab .note-tab-icon {
@@ -161,10 +162,6 @@ const TAB_ROW_TPL = `
         margin-left: 0;
     }
     
-    .note-tab-row .note-tab[active] .note-tab-title {
-        color: var(--main-text-color);
-    }
-    
     .note-tab-row .note-tab .note-tab-drag-handle {
         position: absolute;
         top: 0;

src/public/stylesheets/themes.css

@@ -12,7 +12,6 @@
     --main-border-color: #ccc;
     --accented-background-color: #f5f5f5;
     --more-accented-background-color: #ddd;
-    --header-background-color: #fff;
     --button-background-color: transparent;
     --button-disabled-background-color: #ddd;
     --button-border-color: #ddd;
@@ -41,63 +40,34 @@
 
     --launcher-sidebar-background-color: #F3F3F3;
     --launcher-sidebar-text-color: #333;
-}
 
-body.theme-black {
+    --active-tab-background-color: #ddd;
-    --main-background-color: black;
+    --active-tab-text-color: black;
-    --main-text-color: white;
-    --main-border-color: #ddd;
-    --accented-background-color: #222;
-    --more-accented-background-color: #444;
-    --header-background-color: black;
-    --button-background-color: #333;
-    --button-border-color: #444;
-    --button-text-color: white;
-    --button-border-radius: 5px;
-    --primary-button-background-color: #888;
-    --primary-button-text-color: white;
-    --primary-button-border-color: #999;
-    --muted-text-color: #ccc;
-    --input-text-color: white;
-    --input-background-color: black;
-    --hover-item-text-color: black;
-    --hover-item-background-color: #aaa;
-    --active-item-text-color: black;
-    --active-item-background-color: #ccc;
-    --menu-text-color: white;
-    --menu-background-color: #222;
-    --tooltip-background-color: black;
-    --link-color: lightskyblue;
-    --modal-background-color: black;
-    --modal-backdrop-color: #444;
-    --scrollbar-border-color: #888;
-}
 
-body.theme-black .CodeMirror {
+    --inactive-tab-background-color: #f5f5f5;
-    filter: invert(100%) hue-rotate(180deg);
+    --inactive-tab-text-color: #666;
 }
 
 body.theme-dark {
     --main-background-color: #333;
-    --main-text-color: white;
+    --main-text-color: #ccc;
     --main-border-color: #aaa;
     --accented-background-color: #555;
     --more-accented-background-color: #777;
-    --header-background-color: #333;
     --button-background-color: transparent;
-    --button-border-color: transparent;
+    --button-border-color: #ccc;
     --button-text-color: currentColor;
     --button-border-radius: 5px;
     --primary-button-background-color: #888;
     --primary-button-text-color: white;
     --primary-button-border-color: #999;
-    --muted-text-color: #ccc;
+    --muted-text-color: #bbb;
-    --input-text-color: white;
+    --input-text-color: #ccc;
     --input-background-color: #333;
     --hover-item-text-color: black;
     --hover-item-background-color: #333;
     --active-item-text-color: black;
-    --active-item-background-color: #999;
+    --active-item-background-color: #777;
     --menu-text-color: white;
     --menu-background-color: #222;
     --tooltip-background-color: #333;
@@ -107,10 +77,20 @@ body.theme-dark {
     --scrollbar-border-color: #888;
 
     --tree-sidebar-background-color: #1f1f1f;
-    --tree-sidebar-text-color: #807c7c;
+    --tree-sidebar-text-color: #8D8888;
 
     --launcher-sidebar-background-color: #1f1f1f;
-    --launcher-sidebar-text-color: #807c7c;
+    --launcher-sidebar-text-color: #8D8888;
+
+    --active-tab-background-color: #666;
+    --active-tab-text-color: #ccc;
+
+    --inactive-tab-background-color: #444;
+    --inactive-tab-text-color: #bbb;
+}
+
+body.theme-dark ::-webkit-calendar-picker-indicator {
+    filter: invert(1);
 }
 
 body.theme-dark .CodeMirror {

src/public/stylesheets/tree.css

@@ -15,7 +15,8 @@ ul.fancytree-container {
 }
 
 .fancytree-node {
-    padding: 5px;
+    padding: 4px;
+    border: 1px solid transparent;
     display: block;
     cursor: pointer;
     overflow: hidden;
@@ -128,9 +129,8 @@ span.fancytree-selected {
 }
 
 span.fancytree-node:hover {
-    background-color: var(--active-item-background-color) !important;
     border-radius: 5px;
-    border: 0;
+    border: 1px solid var(--main-border-color);
 }
 
 .fancytree-title:hover, span.fancytree-node:hover .fancytree-title {