feat(blog-share): mirror blog_share_base.css + Ash share theme; fix Cookie @font-face placeholder

- base.css: @font-face Cookie now points at the real font note id (was the unresolved
  __COOKIE_FONT_ID__ placeholder -> 404 -> BMC button fell through to serif)
- base.css: removed selectorless declaration block (dead code from a lost selector),
  merged the intended a.blog-subcategory gap rule into the existing block
- README: document blog-share/ and note that Trilium code notes remain source of truth

README.md

@@ -1,11 +1,12 @@
 # Trilium Themes
 
-Gruvbox, Harbor, Coffee, Solarized and Tokyo Night themes for [TriliumNext](https://github.com/TriliumNext/Trilium) –
+Ash, Gruvbox, Harbor, Coffee, Solarized and Tokyo Night themes for [TriliumNext](https://github.com/TriliumNext/Trilium) –
 each available in a dark and a light variant. The themes are plain `text/css` files that override
 Trilium's `--*` variables on `#trilium-app` and the global menus.
 
 | Theme | Dark | Light | Source |
 |---|---|---|---|
+| **Ash** | `ash-dark.css` | `ash-light.css` | Original, Gruvbox-derived (see palette below) |
 | **Gruvbox** | `gruvbox-dark.css` | `gruvbox-light.css` | [morhetz/gruvbox](https://github.com/morhetz/gruvbox) (MIT) |
 | **Harbor** | `harbor-dark.css` | `harbor-light.css` | [HANCORE-linux/omarchy-harbor-theme](https://github.com/HANCORE-linux/omarchy-harbordark-theme) (MIT) |
 | **Coffee** | `coffee-dark.css` | `coffee-latte.css` | [megabyte0x/omarchy-coffee-theme](https://github.com/megabyte0x/omarchy-coffee-theme) (MIT) |
@@ -20,6 +21,7 @@ auto-switch with the system preference. Each theme is derived from Trilium's def
 
 | Family | Dark | Light |
 |---|---|---|
+| Ash | bg `#1c1b1f` / fg `#e6dfd1` · ember `#e0914f` steel `#7c9aa1` rot `#b47e99` | paper `#e9e3d5` / fg `#2a2822` · ember `#a85f1d` steel `#3d6b72` |
 | Gruvbox | bg `#282828` / fg `#ebdbb2` · red `#fb4934` green `#b8bb26` yellow `#fabd2f` | bg `#fbf1c7` / fg `#3c3836` · blue `#076678` aqua `#83a598` |
 | Harbor | bg `#1b1b1b` / fg `#efebdc` · coral `#e75a50` gold `#E1CE98` slate `#77838a` | bg `#dfe4c4` / fg `#1c2d28` · nord-blue `#5e81ac` |
 | Coffee | bg `#1d150f` / fg `#f0e2d0` · caramel `#e0a15c` cream-yellow `#ffda92` | bg `#E8E3C3` / fg `#2D1A1D` · berry `#8e2d53` |
@@ -46,11 +48,12 @@ iconClass = bx bxs-coffee
 
 ## Gitea themes (same palettes)
 
-The same five families are available for [Gitea](https://gitea.io) in [`gitea/`](gitea/). They use the
+The same six families are available for [Gitea](https://gitea.io) in [`gitea/`](gitea/). They use the
 identical palettes as the Trilium themes, so the web app and your Gitea instance stay consistent.
 
 | Theme | Dark | Light |
 |---|---|---|
+| **Ash** | `theme-gitea-ash.css` | – |
 | **Gruvbox** | `theme-gitea-gruvbox.css` | – |
 | **Harbor** | `theme-gitea-harbor.css` | `theme-gitea-harbor-light.css` |
 | **Coffee** | `theme-gitea-coffee.css` | `theme-gitea-coffee-latte.css` |
@@ -71,6 +74,24 @@ Installation (Gitea 1.27+):
 
 3. Restart Gitea, then pick the theme from **Explore → Preferences → UI theme**.
 
+## Blog share themes (same palettes)
+
+The public blog (`richard.familie-zink.org`) runs on Trilium's share feature with a custom EJS
+template; its frontend styling lives in two note-based stylesheets, mirrored here:
+
+| File | Role |
+|---|---|
+| `blog-share/blog_share_base.css` | Layout/shared widgets (posts, search, pagination, BMC box, code blocks, scrollbars) – theme-independent, driven by the `--*` variables below |
+| `blog-share/blog_share_theme_ash.css` | Ash palette for both `html.theme-light` / `html.theme-dark`, incl. all Mermaid chart-type rules |
+
+Notes:
+
+- **Source of truth** is the matching Trilium code notes (`.blog` folder) which the share links via
+  `shareCss`; this repo copy is the backup/mirror. Copy changes back and forth deliberately.
+- The `@font-face` for the "Cookie" handwriting font (Buy-Me-a-Coffee button) resolves against a
+  live Trilium **file note id** (`/api/notes/<id>/download`) – it only works when served from the
+  same Trilium instance; the mirrored file contains the real id of this instance.
+
 ## Customising
 
 The themes are variable-driven. Edit the `--*` values inside the `#trilium-app { ... }` block and the

ash-dark.css

@@ -0,0 +1,332 @@
+/*
+ * Ash Dark Theme for TriliumNext
+ *
+ * Derived from the current default (next) theme via #appThemeBase=next-dark.
+ * Fixed dark variant.
+ *
+ * The "Ash" palette: Gruvbox hues cooled and desaturated toward a grey / ash
+ * look (bone text on soot panels, ember accents). Same 16 colours as the
+ * game's AshPalette (see yurakuden: docs/ash_palette.md).
+ *
+ *   tones: void #100f12 panel #1c1b1f raised #29282c border #3a383d
+ *          ash #6d6a63 stone #999187 bone #e6dfd1 chalk #f3ede1
+ *   accents: ember #e0914f gold #d6b46a blood #c15c46 rot #b47e99
+ *            moss #8f9a5c steel #7c9aa1 violet #a585ac rust #a86a48
+ */
+
+#trilium-app {
+    --theme-style: dark;
+
+    /* Main surfaces */
+    --main-background-color: #1c1b1f;
+    --main-text-color: #e6dfd1;
+    --main-border-color: #3a383d;
+    --subtle-border-color: #29282c;
+    --dropdown-border-color: #3a383d;
+    --dropdown-shadow-opacity: 0.6;
+
+    /* Accented / highlight */
+    --accented-background-color: #29282c;
+    --more-accented-background-color: #3a383d;
+
+    /* Cards & dialogs */
+    --card-background-color: #29282c;
+    --card-background-hover-color: #3a383d;
+    --card-border-color: #3a383d;
+    --tool-dialog-background-color: #1c1b1f;
+    --modal-background-color: #1c1b1f;
+    --modal-border-color: #3a383d;
+
+    /* Text & muted */
+    --muted-text-color: #999187;
+    --menu-text-color: #e6dfd1;
+    --menu-background-color: #1c1b1fe6;
+    --menu-background-color-no-backdrop: #1c1b1f;
+
+    /* Links (steel by day, ember on hover) */
+    --link-color: #7c9aa1;
+    --link-hover-color: #e0914f;
+    --link-hover-background: #e0914f24;
+
+    /* Inputs */
+    --input-background-color: #29282c;
+    --input-text-color: #e6dfd1;
+    --input-placeholder-color: #99918780;
+    --input-hover-background: #3a383d;
+    --input-focus-outline-color: #e0914f;
+    --input-focus-background: #3a383d;
+    --input-focus-color: #f3ede1;
+    --input-action-button-color: #999187;
+    --input-action-button-hover: #f3ede1;
+
+    /* Selection */
+    --selection-background-color: #e0914f;
+    --hover-item-text-color: #f3ede1;
+    --hover-item-background-color: #29282c;
+    --active-item-text-color: #f3ede1;
+    --active-item-background-color: #3a383d;
+
+    /* Left pane / launcher */
+    --left-pane-background-color: #100f12;
+    --left-pane-text-color: #999187;
+    --left-pane-icon-color: #b0a89a;
+    --left-pane-item-hover-background: #29282c;
+    --left-pane-item-selected-background: #3a383d;
+    --left-pane-item-selected-color: #f3ede1;
+    --launcher-pane-background-color: #100f12;
+    --launcher-pane-text-color: #999187;
+    --launcher-pane-vert-background-color: #100f12;
+    --launcher-pane-vert-text-color: #999187;
+    --launcher-pane-horiz-background-color: #100f12;
+    --launcher-pane-horiz-text-color: #999187;
+
+    /* Tabs & breadcrumb / window backgrounds */
+    --window-background-color-bgfx: #100f12;
+    --root-background: #100f12;
+    --tab-background-color: #100f12;
+    --note-split-background-color: #1c1b1f;
+    --center-pane-background-color-bgfx: #1c1b1f;
+    --launcher-pane-horiz-background-color-bgfx: #100f12;
+    --center-pane-horiz-layout-background-color-bgfx: #1c1b1f;
+    --center-pane-vert-layout-background-color-bgfx: #1c1b1f;
+
+    /* Tabs */
+    --active-tab-background-color: #1c1b1f;
+    --active-tab-text-color: #f3ede1;
+    --inactive-tab-background-color: #100f12;
+    --inactive-tab-text-color: #999187;
+    --tab-close-button-hover-background: #29282c;
+    --tab-close-button-hover-color: #c15c46;
+
+    /* Right pane */
+    --right-pane-background-color: #100f12;
+    --right-pane-heading-color: #e6dfd1;
+    --right-pane-item-hover-background: #29282c;
+    --right-pane-item-hover-color: #f3ede1;
+
+    /* Bottom panel */
+    --bottom-panel-background-color: #100f12;
+    --bottom-panel-title-bar-background-color: #1c1b1f;
+
+    /* Status bar */
+    --status-bar-border-color: #3a383d;
+
+    /* Code / inline code */
+    --inline-code-background-color: #29282c;
+    --inline-code-border-color: #3a383d;
+    --code-block-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+
+    /* Note icons */
+    --note-icon-background-color: #29282c;
+    --note-icon-color: #e6dfd1;
+
+    /* Floating buttons */
+    --floating-button-background-color: #29282c;
+    --floating-button-color: #e6dfd1;
+    --floating-button-hover-background: #3a383d;
+    --floating-button-hover-color: #f3ede1;
+
+    /* Tooltips */
+    --tooltip-background-color: #29282c;
+    --tooltip-foreground-color: #e6dfd1;
+
+    /* Scrollbar */
+    --scrollbar-thumb-color: #3a383d;
+    --scrollbar-thumb-hover-color: #54514f;
+    --scrollbar-background-color: #100f12;
+
+    /* Checkboxes / tasks */
+    --task-checkbox-done-color: #8f9a5c;
+    --task-checkbox-glyph-color: #f3ede1;
+    --task-checkbox-without-state-background: #3a383d;
+    --task-checkbox-with-state-background: #e0914f;
+
+    /* Mermaid */
+    --mermaid-theme: dark;
+
+    /* Buttons */
+    --cmd-button-background-color: #3a383da0;
+    --cmd-button-text-color: #e6dfd1;
+    --cmd-button-hover-background-color: #54514fa0;
+    --cmd-button-hover-text-color: #f3ede1;
+    --icon-button-hover-background: #29282c;
+    --icon-button-hover-color: #f3ede1;
+
+    /* Logs */
+    --log-error-color: #c15c46;
+    --log-info-color: #7c9aa1;
+    --log-slow-color: #d6b46a;
+    --log-success-color: #8f9a5c;
+
+    /* Badges */
+    --badge-background-color: #3a383d;
+    --badge-text-color: #e6dfd1;
+
+    /* CKEditor editor dropdowns / panels */
+    --ck-color-base-foreground: #29282c;
+    --ck-color-base-background: #1c1b1f;
+    --ck-color-dialog-background: #1c1b1f;
+    --ck-color-dropdown-panel-background: #29282c;
+    --ck-color-dropdown-panel-border: #3a383d;
+    --ck-color-list-background: #29282c;
+    --ck-color-list-button-hover-background: #3a383d;
+    --ck-color-list-button-on-background: #3a383d;
+    --ck-color-button-default-background: #29282c;
+    --ck-color-button-default-hover-background: #3a383d;
+    --ck-color-button-on-background: #3a383d;
+    --ck-color-button-on-hover-background: #54514f;
+    --ck-color-button-action-background: #3a383d;
+    --ck-color-button-action-hover-background: #54514f;
+    --ck-color-input-background: #1c1b1f;
+    --ck-editor-toolbar-button-on-background: #3a383d;
+    --ck-editor-toolbar-button-on-color: #f3ede1;
+    --ck-editor-toolbar-dropdown-button-open-background: #29282c;
+}
+
+/* Menus & dropdowns render outside #trilium-app, so also set them globally. */
+:root {
+    --menu-text-color: #e6dfd1;
+    --menu-background-color: #1c1b1f;
+    --menu-background-color-no-backdrop: #1c1b1f;
+    --menu-item-icon-color: #999187;
+    --menu-item-disabled-opacity: 0.5;
+    --menu-item-keyboard-shortcut-color: #99918790;
+    --menu-item-arrow-color: #999187a3;
+    --menu-item-delimiter-color: #29282c;
+    --menu-item-group-header-color: #999187;
+    --menu-section-background-color: #1c1b1f;
+    --menu-hover-item-background-color: #29282c;
+    --menu-hover-item-text-color: #f3ede1;
+    --hover-item-background-color: #29282c;
+    --active-item-background-color: #3a383d;
+    --dropdown-border-color: #29282c;
+    --dropdown-item-icon-destructive-color: #c15c46;
+
+    --ck-color-base-text: #e6dfd1;
+    --ck-color-text: #e6dfd1;
+    --ck-color-base-foreground: #29282c;
+    --ck-color-base-background: #1c1b1f;
+    --ck-color-dialog-background: #1c1b1f;
+    --ck-color-dropdown-panel-background: #29282c;
+    --ck-color-dropdown-panel-border: #3a383d;
+    --ck-color-list-background: #29282c;
+    --ck-color-list-button-hover-background: #3a383d;
+    --ck-color-list-button-on-background: #3a383d;
+    --ck-color-list-button-on-text: #f3ede1;
+    --ck-color-button-default-background: #29282c;
+    --ck-color-button-default-hover-background: #3a383d;
+    --ck-color-button-on-background: #3a383d;
+    --ck-color-button-on-hover-background: #54514f;
+    --ck-color-button-action-background: #3a383d;
+    --ck-color-button-action-hover-background: #54514f;
+    --ck-color-input-background: #1c1b1f;
+    --ck-color-input-text: #e6dfd1;
+    --ck-color-panel-background: #29282c;
+    --ck-color-toolbar-background: #29282c;
+}
+
+body.desktop .dropdown-menu,
+body.desktop .dropdown-menu.tn-dropdown-menu,
+body.desktop .dropdown-menu.tn-dropdown-list,
+body.mobile .dropdown-menu {
+    --menu-background-color: #1c1b1f !important;
+    --menu-background-color-no-backdrop: #1c1b1f !important;
+    --menu-section-background-color: #1c1b1f !important;
+    background-color: #1c1b1f !important;
+}
+body.desktop .dropdown-menu::before,
+body.mobile .dropdown-menu::before {
+    background-color: #1c1b1f !important;
+    backdrop-filter: none !important;
+}
+body.desktop .dropdown-menu .dropdown-item,
+body.mobile .dropdown-menu .dropdown-item {
+    --custom-color: #e6dfd1 !important;
+    color: #e6dfd1;
+}
+body.desktop .dropdown-menu .dropdown-item:hover,
+body.desktop .dropdown-menu .dropdown-item:focus,
+body.desktop .dropdown-menu .dropdown-item.active {
+    background-color: #29282c !important;
+    color: #f3ede1;
+}
+
+/* ============ NOTE HEADER BOXES (h2-h6) ============ */
+.ck-content h2 {
+    background-color: rgba(224, 145, 79, 0.32);
+    border-bottom: 2px solid rgba(224, 145, 79, 0.65);
+    border-radius: 4px;
+    padding: 0.25em 0.4em;
+}
+.ck-content h3 {
+    background-color: rgba(124, 154, 161, 0.28);
+    border-bottom: 2px solid rgba(124, 154, 161, 0.6);
+    border-radius: 4px;
+    padding: 0.2em 0.35em;
+}
+.ck-content h4 {
+    background-color: rgba(143, 154, 92, 0.28);
+    border-bottom: 2px solid rgba(143, 154, 92, 0.6);
+    border-radius: 4px;
+    padding: 0.2em 0.35em;
+}
+.ck-content h5 {
+    background-color: rgba(165, 133, 172, 0.28);
+    border-bottom: 2px solid rgba(165, 133, 172, 0.6);
+    border-radius: 4px;
+    padding: 0.2em 0.35em;
+}
+.ck-content h6 {
+    background-color: rgba(180, 126, 153, 0.28);
+    border-bottom: 2px solid rgba(180, 126, 153, 0.6);
+    border-radius: 4px;
+    padding: 0.2em 0.35em;
+}
+
+/* ============ TABLES ============ */
+.ck-content table {
+    border-collapse: separate;
+    border-spacing: 0;
+    border: 1px solid var(--main-border-color);
+    border-radius: 8px;
+    overflow: hidden;
+    margin: 1em 0;
+}
+.ck-content table th,
+.ck-content table td {
+    border: none;
+    border-bottom: 1px solid var(--main-border-color);
+    border-right: 1px solid var(--main-border-color);
+    padding: 8px 12px;
+    text-align: left;
+    background-color: transparent !important;
+}
+.ck-content table th:last-child,
+.ck-content table td:last-child { border-right: none; }
+.ck-content table tr:last-child td { border-bottom: none; }
+.ck-content table thead th {
+    background-color: rgba(224, 145, 79, 0.28) !important;
+    color: #f3ede1;
+    font-weight: 700;
+    border-bottom: 2px solid rgba(224, 145, 79, 0.55);
+}
+.ck-content table tbody td:first-child {
+    background-color: rgba(255, 255, 255, 0.05) !important;
+    color: #e6dfd1;
+    font-weight: 600;
+    white-space: nowrap;
+}
+.ck-content table tbody tr:nth-child(even) td:not(:first-child) {
+    background-color: rgba(255, 255, 255, 0.04) !important;
+}
+.ck-content table tbody tr:hover td,
+.ck-content table .col-hover {
+    background-color: rgba(124, 154, 161, 0.08) !important;
+}
+.ck-content table tbody tr:hover td.col-hover,
+.ck-content table thead th.col-hover {
+    background-color: rgba(124, 154, 161, 0.15) !important;
+}
+
+/* ============ MERMAID ============ */
+.mermaid-render svg { width: 95%; height: auto; max-width: 100%; }

ash-light.css

@@ -0,0 +1,331 @@
+/*
+ * Ash Light Theme for TriliumNext
+ *
+ * Derived from the current default (next) theme via #appThemeBase=next-light.
+ * Fixed light variant.
+ *
+ * The "Ash" palette light twin: bone / ash-paper surfaces with soot text and
+ * the same hue family as Ash Dark, darkened for legibility on paper.
+ *
+ *   tones: paper #e9e3d5 raised #f2ecdf deep #dcd5c3 border #c9c1ad
+ *          muted #6f685c ink #2a2822
+ *   accents: ember #a85f1d gold #8a6a24 blood #96392a rot #7c4a66
+ *            moss #5c6631 steel #3d6b72 violet #6a4c72 rust #7d4a2c
+ */
+
+#trilium-app {
+    --theme-style: light;
+
+    /* Main surfaces */
+    --main-background-color: #e9e3d5;
+    --main-text-color: #2a2822;
+    --main-border-color: #c9c1ad;
+    --subtle-border-color: #d8d1c1;
+    --dropdown-border-color: #c9c1ad;
+    --dropdown-shadow-opacity: 0.25;
+
+    /* Accented / highlight */
+    --accented-background-color: #dcd5c3;
+    --more-accented-background-color: #c9c1ad;
+
+    /* Cards & dialogs */
+    --card-background-color: #f2ecdf;
+    --card-background-hover-color: #dcd5c3;
+    --card-border-color: #c9c1ad;
+    --tool-dialog-background-color: #f2ecdf;
+    --modal-background-color: #f2ecdf;
+    --modal-border-color: #c9c1ad;
+
+    /* Text & muted */
+    --muted-text-color: #6f685c;
+    --menu-text-color: #2a2822;
+    --menu-background-color: #f2ecdf;
+    --menu-background-color-no-backdrop: #f2ecdf;
+
+    /* Links */
+    --link-color: #3d6b72;
+    --link-hover-color: #a85f1d;
+    --link-hover-background: #a85f1d1f;
+
+    /* Inputs */
+    --input-background-color: #f2ecdf;
+    --input-text-color: #2a2822;
+    --input-placeholder-color: #6f685c90;
+    --input-hover-background: #dcd5c3;
+    --input-focus-outline-color: #a85f1d;
+    --input-focus-background: #dcd5c3;
+    --input-focus-color: #141310;
+    --input-action-button-color: #6f685c;
+    --input-action-button-hover: #141310;
+
+    /* Selection */
+    --selection-background-color: #c56a2b;
+    --hover-item-text-color: #141310;
+    --hover-item-background-color: #dcd5c3;
+    --active-item-text-color: #141310;
+    --active-item-background-color: #c9c1ad;
+
+    /* Left pane / launcher */
+    --left-pane-background-color: #dcd5c3;
+    --left-pane-text-color: #6f685c;
+    --left-pane-icon-color: #5b5449;
+    --left-pane-item-hover-background: #c9c1ad;
+    --left-pane-item-selected-background: #b7ae98;
+    --left-pane-item-selected-color: #141310;
+    --launcher-pane-background-color: #dcd5c3;
+    --launcher-pane-text-color: #6f685c;
+    --launcher-pane-vert-background-color: #dcd5c3;
+    --launcher-pane-vert-text-color: #6f685c;
+    --launcher-pane-horiz-background-color: #dcd5c3;
+    --launcher-pane-horiz-text-color: #6f685c;
+
+    /* Tabs & breadcrumb / window backgrounds */
+    --window-background-color-bgfx: #dcd5c3;
+    --root-background: #dcd5c3;
+    --tab-background-color: #dcd5c3;
+    --note-split-background-color: #e9e3d5;
+    --center-pane-background-color-bgfx: #e9e3d5;
+    --launcher-pane-horiz-background-color-bgfx: #dcd5c3;
+    --center-pane-horiz-layout-background-color-bgfx: #e9e3d5;
+    --center-pane-vert-layout-background-color-bgfx: #e9e3d5;
+
+    /* Tabs */
+    --active-tab-background-color: #e9e3d5;
+    --active-tab-text-color: #141310;
+    --inactive-tab-background-color: #dcd5c3;
+    --inactive-tab-text-color: #6f685c;
+    --tab-close-button-hover-background: #c9c1ad;
+    --tab-close-button-hover-color: #96392a;
+
+    /* Right pane */
+    --right-pane-background-color: #dcd5c3;
+    --right-pane-heading-color: #2a2822;
+    --right-pane-item-hover-background: #c9c1ad;
+    --right-pane-item-hover-color: #141310;
+
+    /* Bottom panel */
+    --bottom-panel-background-color: #dcd5c3;
+    --bottom-panel-title-bar-background-color: #e9e3d5;
+
+    /* Status bar */
+    --status-bar-border-color: #c9c1ad;
+
+    /* Code / inline code */
+    --inline-code-background-color: #dcd5c3;
+    --inline-code-border-color: #c9c1ad;
+    --code-block-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
+
+    /* Note icons */
+    --note-icon-background-color: #dcd5c3;
+    --note-icon-color: #2a2822;
+
+    /* Floating buttons */
+    --floating-button-background-color: #dcd5c3;
+    --floating-button-color: #2a2822;
+    --floating-button-hover-background: #c9c1ad;
+    --floating-button-hover-color: #141310;
+
+    /* Tooltips */
+    --tooltip-background-color: #2a2822;
+    --tooltip-foreground-color: #f2ecdf;
+
+    /* Scrollbar */
+    --scrollbar-thumb-color: #b7ae98;
+    --scrollbar-thumb-hover-color: #a89e85;
+    --scrollbar-background-color: #dcd5c3;
+
+    /* Checkboxes / tasks */
+    --task-checkbox-done-color: #5c6631;
+    --task-checkbox-glyph-color: #f2ecdf;
+    --task-checkbox-without-state-background: #b7ae98;
+    --task-checkbox-with-state-background: #a85f1d;
+
+    /* Mermaid */
+    --mermaid-theme: default;
+
+    /* Buttons */
+    --cmd-button-background-color: #c9c1adc0;
+    --cmd-button-text-color: #2a2822;
+    --cmd-button-hover-background-color: #b7ae98c0;
+    --cmd-button-hover-text-color: #141310;
+    --icon-button-hover-background: #dcd5c3;
+    --icon-button-hover-color: #141310;
+
+    /* Logs */
+    --log-error-color: #96392a;
+    --log-info-color: #3d6b72;
+    --log-slow-color: #8a6a24;
+    --log-success-color: #5c6631;
+
+    /* Badges */
+    --badge-background-color: #c9c1ad;
+    --badge-text-color: #2a2822;
+
+    /* CKEditor editor dropdowns / panels */
+    --ck-color-base-foreground: #dcd5c3;
+    --ck-color-base-background: #e9e3d5;
+    --ck-color-dialog-background: #e9e3d5;
+    --ck-color-dropdown-panel-background: #f2ecdf;
+    --ck-color-dropdown-panel-border: #c9c1ad;
+    --ck-color-list-background: #f2ecdf;
+    --ck-color-list-button-hover-background: #dcd5c3;
+    --ck-color-list-button-on-background: #c9c1ad;
+    --ck-color-button-default-background: #dcd5c3;
+    --ck-color-button-default-hover-background: #c9c1ad;
+    --ck-color-button-on-background: #c9c1ad;
+    --ck-color-button-on-hover-background: #b7ae98;
+    --ck-color-button-action-background: #c9c1ad;
+    --ck-color-button-action-hover-background: #b7ae98;
+    --ck-color-input-background: #f2ecdf;
+    --ck-editor-toolbar-button-on-background: #c9c1ad;
+    --ck-editor-toolbar-button-on-color: #141310;
+    --ck-editor-toolbar-dropdown-button-open-background: #dcd5c3;
+}
+
+/* Menus & dropdowns render outside #trilium-app, so also set them globally. */
+:root {
+    --menu-text-color: #2a2822;
+    --menu-background-color: #f2ecdf;
+    --menu-background-color-no-backdrop: #f2ecdf;
+    --menu-item-icon-color: #6f685c;
+    --menu-item-disabled-opacity: 0.5;
+    --menu-item-keyboard-shortcut-color: #6f685c90;
+    --menu-item-arrow-color: #6f685ca3;
+    --menu-item-delimiter-color: #dcd5c3;
+    --menu-item-group-header-color: #6f685c;
+    --menu-section-background-color: #f2ecdf;
+    --menu-hover-item-background-color: #dcd5c3;
+    --menu-hover-item-text-color: #141310;
+    --hover-item-background-color: #dcd5c3;
+    --active-item-background-color: #c9c1ad;
+    --dropdown-border-color: #dcd5c3;
+    --dropdown-item-icon-destructive-color: #96392a;
+
+    --ck-color-base-text: #2a2822;
+    --ck-color-text: #2a2822;
+    --ck-color-base-foreground: #dcd5c3;
+    --ck-color-base-background: #e9e3d5;
+    --ck-color-dialog-background: #e9e3d5;
+    --ck-color-dropdown-panel-background: #f2ecdf;
+    --ck-color-dropdown-panel-border: #c9c1ad;
+    --ck-color-list-background: #f2ecdf;
+    --ck-color-list-button-hover-background: #dcd5c3;
+    --ck-color-list-button-on-background: #c9c1ad;
+    --ck-color-list-button-on-text: #141310;
+    --ck-color-button-default-background: #dcd5c3;
+    --ck-color-button-default-hover-background: #c9c1ad;
+    --ck-color-button-on-background: #c9c1ad;
+    --ck-color-button-on-hover-background: #b7ae98;
+    --ck-color-button-action-background: #c9c1ad;
+    --ck-color-button-action-hover-background: #b7ae98;
+    --ck-color-input-background: #f2ecdf;
+    --ck-color-input-text: #2a2822;
+    --ck-color-panel-background: #dcd5c3;
+    --ck-color-toolbar-background: #dcd5c3;
+}
+
+body.desktop .dropdown-menu,
+body.desktop .dropdown-menu.tn-dropdown-menu,
+body.desktop .dropdown-menu.tn-dropdown-list,
+body.mobile .dropdown-menu {
+    --menu-background-color: #f2ecdf !important;
+    --menu-background-color-no-backdrop: #f2ecdf !important;
+    --menu-section-background-color: #f2ecdf !important;
+    background-color: #f2ecdf !important;
+}
+body.desktop .dropdown-menu::before,
+body.mobile .dropdown-menu::before {
+    background-color: #f2ecdf !important;
+    backdrop-filter: none !important;
+}
+body.desktop .dropdown-menu .dropdown-item,
+body.mobile .dropdown-menu .dropdown-item {
+    --custom-color: #2a2822 !important;
+    color: #2a2822;
+}
+body.desktop .dropdown-menu .dropdown-item:hover,
+body.desktop .dropdown-menu .dropdown-item:focus,
+body.desktop .dropdown-menu .dropdown-item.active {
+    background-color: #dcd5c3 !important;
+    color: #141310;
+}
+
+/* ============ NOTE HEADER BOXES (h2-h6) ============ */
+.ck-content h2 {
+    background-color: rgba(168, 95, 29, 0.18);
+    border-bottom: 2px solid rgba(168, 95, 29, 0.55);
+    border-radius: 4px;
+    padding: 0.25em 0.4em;
+}
+.ck-content h3 {
+    background-color: rgba(61, 107, 114, 0.16);
+    border-bottom: 2px solid rgba(61, 107, 114, 0.5);
+    border-radius: 4px;
+    padding: 0.2em 0.35em;
+}
+.ck-content h4 {
+    background-color: rgba(92, 102, 49, 0.16);
+    border-bottom: 2px solid rgba(92, 102, 49, 0.5);
+    border-radius: 4px;
+    padding: 0.2em 0.35em;
+}
+.ck-content h5 {
+    background-color: rgba(106, 76, 114, 0.16);
+    border-bottom: 2px solid rgba(106, 76, 114, 0.5);
+    border-radius: 4px;
+    padding: 0.2em 0.35em;
+}
+.ck-content h6 {
+    background-color: rgba(124, 74, 102, 0.16);
+    border-bottom: 2px solid rgba(124, 74, 102, 0.5);
+    border-radius: 4px;
+    padding: 0.2em 0.35em;
+}
+
+/* ============ TABLES ============ */
+.ck-content table {
+    border-collapse: separate;
+    border-spacing: 0;
+    border: 1px solid var(--main-border-color);
+    border-radius: 8px;
+    overflow: hidden;
+    margin: 1em 0;
+}
+.ck-content table th,
+.ck-content table td {
+    border: none;
+    border-bottom: 1px solid var(--main-border-color);
+    border-right: 1px solid var(--main-border-color);
+    padding: 8px 12px;
+    text-align: left;
+    background-color: transparent !important;
+}
+.ck-content table th:last-child,
+.ck-content table td:last-child { border-right: none; }
+.ck-content table tr:last-child td { border-bottom: none; }
+.ck-content table thead th {
+    background-color: rgba(168, 95, 29, 0.16) !important;
+    color: #141310;
+    font-weight: 700;
+    border-bottom: 2px solid rgba(168, 95, 29, 0.45);
+}
+.ck-content table tbody td:first-child {
+    background-color: rgba(0, 0, 0, 0.04) !important;
+    color: #2a2822;
+    font-weight: 600;
+    white-space: nowrap;
+}
+.ck-content table tbody tr:nth-child(even) td:not(:first-child) {
+    background-color: rgba(0, 0, 0, 0.03) !important;
+}
+.ck-content table tbody tr:hover td,
+.ck-content table .col-hover {
+    background-color: rgba(61, 107, 114, 0.08) !important;
+}
+.ck-content table tbody tr:hover td.col-hover,
+.ck-content table thead th.col-hover {
+    background-color: rgba(61, 107, 114, 0.16) !important;
+}
+
+/* ============ MERMAID ============ */
+.mermaid-render svg { width: 95%; height: auto; max-width: 100%; }

gruvbox-dark.css

@@ -411,3 +411,10 @@ div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E64DB3) {
 .ck-content table thead th.col-hover {
     background-color: rgba(254, 128, 25, 0.14) !important;
 }
+
+/* ============ MERMAID ============ */
+.mermaid-render svg {
+    width: 95%;
+    height: auto;
+    max-width: 100%;
+}