zink/trilium_share_gruvbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Theme: switch blog to Harbor light/dark (HANCORE-linux/omarchy-harbor-theme, MIT); sync missing Mermaid section; regenerate palette; update README + third-party licenses

Browse Source
This commit is contained in:
trilium-share-gruvbox
2026-09-07 14:38:14 +02:00
parent ecd2124fef
commit 3f9a502496
4 changed files with 375 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+8 -8
View File
@@ -1,16 +1,16 @@
# Trilium Share – Gruvbox Blog System # Trilium Share – Harbor Blog System
[![License](https://img.shields.io/badge/License-GPL--3.0-fb4934)](LICENSE) [![License](https://img.shields.io/badge/License-GPL--3.0-fb4934)](LICENSE)
[![Live demo](https://img.shields.io/badge/Live%20demo-richard.familie--zink.org-8ec07c)](https://richard.familie-zink.org) [![Live demo](https://img.shields.io/badge/Live%20demo-richard.familie--zink.org-8ec07c)](https://richard.familie-zink.org)
[![TriliumNext](https://img.shields.io/badge/TriliumNext-Public%20Share-83a598)](https://github.com/TriliumNext/Trilium) [![TriliumNext](https://img.shields.io/badge/TriliumNext-Public%20Share-83a598)](https://github.com/TriliumNext/Trilium)
[![Theme](https://img.shields.io/badge/Theme-Gruvbox-98971a)](https://github.com/morhetz/gruvbox) [![Theme](https://img.shields.io/badge/Theme-Harbor-e75a50)](https://github.com/HANCORE-linux/omarchy-harbor-theme)
[![Built with](https://img.shields.io/badge/Built%20with-Opencode-fe8019)](https://opencode.ai) [![Built with](https://img.shields.io/badge/Built%20with-Opencode-fe8019)](https://opencode.ai)
[![Model](https://img.shields.io/badge/Model-Deepseek%20V4%20Flash-d3869b)](https://www.deepseek.com/) [![Model](https://img.shields.io/badge/Model-Deepseek%20V4%20Flash-d3869b)](https://www.deepseek.com/)
> **Note:** This theme and blog system was created with the help of > **Note:** This theme and blog system was created with the help of
> [**Opencode**](https://opencode.ai) and **Deepseek V4 Flash**. > [**Opencode**](https://opencode.ai) and **Deepseek V4 Flash**.
A complete **public-share blog system + Gruvbox theme** for [TriliumNext](https://github.com/TriliumNext/Trilium). A complete **public-share blog system + Harbor theme** for [TriliumNext](https://github.com/TriliumNext/Trilium).
It turns a normal Trilium note tree into a themed, searchable blog with categories, an RSS feed, It turns a normal Trilium note tree into a themed, searchable blog with categories, an RSS feed,
a sitemap, a digital garden (growth states) and client-side rendering of Mermaid, Excalidraw and a sitemap, a digital garden (growth states) and client-side rendering of Mermaid, Excalidraw and
mind-map notes. mind-map notes.
@@ -18,13 +18,13 @@ mind-map notes.
Everything is driven by Trilium's built-in **Public Share** feature plus a few frontend/backend scripts – Everything is driven by Trilium's built-in **Public Share** feature plus a few frontend/backend scripts –
no external dependencies (except `highlight.js`, vendored in `lib/`). no external dependencies (except `highlight.js`, vendored in `lib/`).
![Gruvbox palette](assets/palette.png) ![Harbor palette](assets/palette.png)
*Palette from the [morhetz/gruvbox](https://github.com/morhetz/gruvbox) repository.* *Palette from the [HANCORE-linux/omarchy-harbor-theme](https://github.com/HANCORE-linux/omarchy-harbor-theme) (Harbor light / Harbordark) repository, MIT licensed.*
## Features ## Features
- Gruvbox light/dark theme for the share, with a theme toggle in the header. - Harbor light/dark theme for the share, with a theme toggle in the header.
- Blog index, category pages, sub-categories, tags and tag overview. - Blog index, category pages, sub-categories, tags and tag overview.
- **Menu sorting**: articles in the left menu are sorted by publication date (newest first) - **Menu sorting**: articles in the left menu are sorted by publication date (newest first)
and labelled `Fri 2026-08-28 <shortened title>` automatically. All date displays and labelled `Fri 2026-08-28 <shortened title>` automatically. All date displays
@@ -66,7 +66,7 @@ no external dependencies (except `highlight.js`, vendored in `lib/`).
|---|---|---| |---|---|---|
| `blog_generator.js` | backend script that generates index, feed, sitemap, search data, category & tag pages | code, `application/javascript;env=backend` | | `blog_generator.js` | backend script that generates index, feed, sitemap, search data, category & tag pages | code, `application/javascript;env=backend` |
| `blog_publish_manager.js` | backend script that mirrors notes between `Unpublished` and the blog | code, `application/javascript;env=backend` | | `blog_publish_manager.js` | backend script that mirrors notes between `Unpublished` and the blog | code, `application/javascript;env=backend` |
| `theme/blog_share_theme.css` | the Gruvbox share theme | code, `text/css` | | `theme/blog_share_theme.css` | the Harbor share theme (Harbor light / Harbordark) | code, `text/css` |
| `theme/favicon.svg` | default site favicon | code (SVG) | | `theme/favicon.svg` | default site favicon | code (SVG) |
| `theme/cookie.woff2` | "Cookie" font for the Buy me a coffee button | file, `font/woff2` | | `theme/cookie.woff2` | "Cookie" font for the Buy me a coffee button | file, `font/woff2` |
| `lib/highlight.js` | vendored highlight.js | code, `application/javascript` | | `lib/highlight.js` | vendored highlight.js | code, `application/javascript` |
@@ -297,7 +297,7 @@ server {
## Customisation ## Customisation
- **Theme**: edit `theme/blog_share_theme.css` (Gruvbox light/dark via `html.theme-light/dark`). - **Theme**: edit `theme/blog_share_theme.css` (Harbor light/dark via `html.theme-light/dark`).
- **Buy me a coffee**: edit `scripts/bmc_button.js` (link, text, copyright) – the font is - **Buy me a coffee**: edit `scripts/bmc_button.js` (link, text, copyright) – the font is
referenced via `__COOKIE_FONT_ID__`. referenced via `__COOKIE_FONT_ID__`.
- **Category logos**: copy the `examples/` icon + `ignis8_menu_icon.js` pattern to give a - **Category logos**: copy the `examples/` icon + `ignis8_menu_icon.js` pattern to give a
THIRD_PARTY_LICENSES.md
+2 -1
View File
@@ -8,7 +8,8 @@ The following files in this repository are **not** covered by the GPL-3.0 and ke
| `lib/highlight.js` | [Highlight.js](https://github.com/highlightjs/highlight.js) v11.9.0 | [BSD-3-Clause](#bsd-3-clause) | | `lib/highlight.js` | [Highlight.js](https://github.com/highlightjs/highlight.js) v11.9.0 | [BSD-3-Clause](#bsd-3-clause) |
| `lib/hljs_line_numbers.js` | [highlightjs-line-numbers](https://github.com/yury-dymov/highlightjs-line-numbers) | [MIT](#mit-license) | | `lib/hljs_line_numbers.js` | [highlightjs-line-numbers](https://github.com/yury-dymov/highlightjs-line-numbers) | [MIT](#mit-license) |
| `theme/cookie.woff2` | "Cookie" font, © 2011 [Ania Kruk](https://fonts.google.com/specimen/Cookie) | [SIL Open Font License 1.1](https://openfontlicense.org/) | | `theme/cookie.woff2` | "Cookie" font, © 2011 [Ania Kruk](https://fonts.google.com/specimen/Cookie) | [SIL Open Font License 1.1](https://openfontlicense.org/) |
| `assets/palette.png` | Gruvbox palette image from [morhetz/gruvbox](https://github.com/morhetz/gruvbox) (repo: MIT) | [MIT](#mit-license) | | `assets/palette.png` | Harbor / Harbordark palette image generated from [HANCORE-linux/omarchy-harbor-theme](https://github.com/HANCORE-linux/omarchy-harbor-theme) (repo: MIT) | [MIT](#mit-license) |
| `theme/blog_share_theme.css` | Harbor light / Harbordark color scheme from [HANCORE-linux/omarchy-harbor-theme](https://github.com/HANCORE-linux/omarchy-harbor-theme) (repo: MIT) | [MIT](#mit-license) |
| `lib/3d/three.min.js`, `lib/3d/OrbitControls.js`, `lib/3d/STLLoader.js` | [three.js](https://github.com/mrdoob/three.js) r128 | [MIT](#mit-license) | | `lib/3d/three.min.js`, `lib/3d/OrbitControls.js`, `lib/3d/STLLoader.js` | [three.js](https://github.com/mrdoob/three.js) r128 | [MIT](#mit-license) |
| `lib/3d/occt-import-js.js`, `lib/3d/occt-import-js.wasm` | [occt-import-js](https://github.com/kovacsv/occt-import-js) (OpenCASCADE, WASM) | [LGPL-2.1](#lgpl-21) | | `lib/3d/occt-import-js.js`, `lib/3d/occt-import-js.wasm` | [occt-import-js](https://github.com/kovacsv/occt-import-js) (OpenCASCADE, WASM) | [LGPL-2.1](#lgpl-21) |
| `lib/3d/occt-wasm-bundle.js`, `lib/3d/occt-wasm.wasm` | [occt-wasm](https://github.com/andymai/occt-wasm) (OpenCASCADE **OCCT V8**, WebAssembly, esbuild-bundled `OcctKernel`) | [MIT OR Apache-2.0](#mit-license) | | `lib/3d/occt-wasm-bundle.js`, `lib/3d/occt-wasm.wasm` | [occt-wasm](https://github.com/andymai/occt-wasm) (OpenCASCADE **OCCT V8**, WebAssembly, esbuild-bundled `OcctKernel`) | [MIT OR Apache-2.0](#mit-license) |
assets/palette.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 370 KiB

After

Width:  |  Height:  |  Size: 20 KiB

theme/blog_share_theme.css
+365 -188
View File
@@ -1,41 +1,41 @@
/* /*
* Gruvbox Share Theme for Richard's Blog (Trilium Public Share) * Harbor Share Theme for Richard's Blog (Trilium Public Share)
* Palette: bg #282828 / #3c3836 / #504945 / #1d2021 fg #ebdbb2 / #fbf1c7 * Light: Harbor (paper #dfe4c4 / ink #1c2d28, accent #5e81ac)
* red #fb4934 green #b8bb26 yellow #fabd2f * Dark: Harbordark (#1b1b1b / #efebdc, accent #e75a50)
* blue #83a598 purple #d3869b aqua #8ec07c orange #fe8019 * Based on https://github.com/HANCORE-linux/omarchy-harbor-theme (MIT)
*/ */
html.theme-light { html.theme-light {
--background-primary: #fbf1c7; --background-primary: #dfe4c4;
--background-secondary: #ebdbb2; --background-secondary: #d0d6b4;
--background-highlight: #d5c4a1; --background-highlight: #c3c9a6;
--background-active: #83a598; --background-active: #5e81ac;
--blog-card-bg: #ebdbb2; --blog-card-bg: #d0d6b4;
--scrollbar-thumb: #d5c4a1; --scrollbar-thumb: #c3c9a6;
--scrollbar-hover: #bdae93; --scrollbar-hover: #b3ba96;
--scrollbar-track: #ebdbb2; --scrollbar-track: #d0d6b4;
--text-primary: #3c3836; --text-primary: #1c2d28;
--text-heading: #282828; --text-heading: #1c2d28;
--text-menu: #504945; --text-menu: #556753;
--text-link: #076678; --text-link: #4c6c94;
--text-menu-active: #fbf1c7; --text-menu-active: #dfe4c4;
color-scheme: light; color-scheme: light;
} }
html.theme-dark { html.theme-dark {
--background-primary: #282828; --background-primary: #1b1b1b;
--background-secondary: #1d2021; --background-secondary: #232323;
--background-highlight: #504945; --background-highlight: #2e2e2e;
--background-active: #83a598; --background-active: #e75a50;
--blog-card-bg: #3c3836; --blog-card-bg: #262626;
--scrollbar-thumb: #504945; --scrollbar-thumb: #2e2e2e;
--scrollbar-hover: #665c54; --scrollbar-hover: #3f3f3f;
--scrollbar-track: #1d2021; --scrollbar-track: #1b1b1b;
--text-primary: #ebdbb2; --text-primary: #efebdc;
--text-heading: #fbf1c7; --text-heading: #efebdc;
--text-menu: #a89984; --text-menu: #a99b7a;
--text-link: #83a598; --text-link: #e58980;
--text-menu-active: #1d2021; --text-menu-active: #1b1b1b;
color-scheme: dark; color-scheme: dark;
} }
@@ -139,8 +139,8 @@ body {
padding: 6px 12px 8px; padding: 6px 12px 8px;
border-radius: 8px; border-radius: 8px;
background: #fabd2f; background: #fabd2f;
color: #1d2021; color: #1c2d28;
border: 2px solid #1d2021; border: 2px solid #1c2d28;
font-family: "Cookie", "Brush Script MT", cursive; font-family: "Cookie", "Brush Script MT", cursive;
font-size: 1.4em; font-size: 1.4em;
line-height: 1.1; line-height: 1.1;
@@ -149,8 +149,8 @@ body {
} }
.bmc-btn:hover { .bmc-btn:hover {
background: #fe8019; background: #dc8164;
color: #1d2021; color: #1c2d28;
text-decoration: none; text-decoration: none;
transform: translateY(-1px); transform: translateY(-1px);
} }
@@ -325,35 +325,35 @@ body {
min-width: 0; min-width: 0;
padding: 6px 10px 6px 32px; padding: 6px 10px 6px 32px;
border-radius: 6px; border-radius: 6px;
border: 1px solid rgba(131, 165, 152, 0.55); border: 1px solid rgba(119, 131, 138, 0.55);
background: rgba(131, 165, 152, 0.08); background: rgba(119, 131, 138, 0.10);
color: var(--text-heading); color: var(--text-heading);
font-size: 0.9em; font-size: 0.9em;
transition: border-color 150ms ease, box-shadow 150ms ease; transition: border-color 150ms ease, box-shadow 150ms ease;
} }
html.theme-light .blog-search-header-input { html.theme-light .blog-search-header-input {
border-color: #076678; border-color: #4c6c94;
background: rgba(7, 102, 120, 0.10); background: rgba(76, 108, 148, 0.10);
} }
.blog-search-header-input:focus { .blog-search-header-input:focus {
outline: none; outline: none;
border-color: #83a598; border-color: #77838a;
box-shadow: 0 0 0 2px rgba(131, 165, 152, 0.20); box-shadow: 0 0 0 2px rgba(119, 131, 138, 0.20);
} }
html.theme-light .blog-search-header-input:focus { html.theme-light .blog-search-header-input:focus {
border-color: #076678; border-color: #4c6c94;
box-shadow: 0 0 0 2px rgba(7, 102, 120, 0.15); box-shadow: 0 0 0 2px rgba(76, 108, 148, 0.15);
} }
.search-item .search-icon { .search-item .search-icon {
color: rgba(131, 165, 152, 0.85); color: rgba(119, 131, 138, 0.85);
} }
html.theme-light .search-item .search-icon { html.theme-light .search-item .search-icon {
color: #076678; color: #4c6c94;
} }
.tn-image { .tn-image {
@@ -541,13 +541,13 @@ body.is-garden #title .note-state {
} }
body.is-garden #content h1#title { body.is-garden #content h1#title {
background-color: rgba(184, 187, 38, 0.35) !important; background-color: rgba(169, 155, 122, 0.30) !important;
border-bottom-color: rgba(184, 187, 38, 0.60) !important; border-bottom-color: rgba(169, 155, 122, 0.60) !important;
} }
html.theme-light body.is-garden #content h1#title { html.theme-light body.is-garden #content h1#title {
background-color: rgba(184, 187, 38, 0.20) !important; background-color: rgba(85, 103, 83, 0.15) !important;
border-bottom-color: rgba(184, 187, 38, 0.45) !important; border-bottom-color: rgba(85, 103, 83, 0.40) !important;
} }
/* ---------- Blog index (generated article list) ---------- */ /* ---------- Blog index (generated article list) ---------- */
@@ -681,35 +681,35 @@ a.tag:hover {
border-bottom: 1px solid var(--background-highlight); border-bottom: 1px solid var(--background-highlight);
} }
/* ---------- Headings (h2-h6) - Gruvbox header boxes ---------- */ /* ---------- Headings (h2-h6) - Harbor header boxes ---------- */
html.theme-dark { html.theme-dark {
--header-h2-bg: rgba(131, 165, 152, 0.35); --header-h2-bg: rgba(231, 90, 80, 0.30);
--header-h2-border: rgba(131, 165, 152, 0.7); --header-h2-border: rgba(231, 90, 80, 0.6);
--header-h3-bg: rgba(142, 192, 124, 0.25); --header-h3-bg: rgba(169, 155, 122, 0.25);
--header-h3-border: rgba(142, 192, 124, 0.6); --header-h3-border: rgba(169, 155, 122, 0.6);
--header-h4-bg: rgba(250, 189, 47, 0.25); --header-h4-bg: rgba(225, 206, 152, 0.22);
--header-h4-border: rgba(250, 189, 47, 0.6); --header-h4-border: rgba(225, 206, 152, 0.55);
--header-h5-bg: rgba(211, 134, 155, 0.25); --header-h5-bg: rgba(119, 131, 138, 0.25);
--header-h5-border: rgba(211, 134, 155, 0.6); --header-h5-border: rgba(119, 131, 138, 0.6);
--header-h6-bg: rgba(254, 128, 25, 0.25); --header-h6-bg: rgba(229, 137, 128, 0.25);
--header-h6-border: rgba(254, 128, 25, 0.6); --header-h6-border: rgba(229, 137, 128, 0.6);
--header-h1-bg: rgba(251, 73, 52, 0.30); --header-h1-bg: rgba(244, 67, 54, 0.30);
--header-h1-border: rgba(251, 73, 52, 0.6); --header-h1-border: rgba(244, 67, 54, 0.6);
} }
html.theme-light { html.theme-light {
--header-h2-bg: rgba(7, 102, 120, 0.18); --header-h2-bg: rgba(94, 129, 172, 0.18);
--header-h2-border: rgba(7, 102, 120, 0.45); --header-h2-border: rgba(94, 129, 172, 0.45);
--header-h3-bg: rgba(121, 116, 14, 0.10); --header-h3-bg: rgba(85, 103, 83, 0.14);
--header-h3-border: rgba(121, 116, 14, 0.35); --header-h3-border: rgba(85, 103, 83, 0.38);
--header-h4-bg: rgba(181, 118, 20, 0.10); --header-h4-bg: rgba(220, 129, 100, 0.14);
--header-h4-border: rgba(181, 118, 20, 0.35); --header-h4-border: rgba(220, 129, 100, 0.38);
--header-h5-bg: rgba(143, 63, 113, 0.10); --header-h5-bg: rgba(138, 91, 129, 0.12);
--header-h5-border: rgba(143, 63, 113, 0.35); --header-h5-border: rgba(138, 91, 129, 0.35);
--header-h6-bg: rgba(175, 58, 3, 0.10); --header-h6-bg: rgba(61, 114, 125, 0.12);
--header-h6-border: rgba(175, 58, 3, 0.35); --header-h6-border: rgba(61, 114, 125, 0.35);
--header-h1-bg: rgba(157, 0, 6, 0.12); --header-h1-bg: rgba(177, 71, 82, 0.14);
--header-h1-border: rgba(157, 0, 6, 0.40); --header-h1-border: rgba(177, 71, 82, 0.40);
} }
#content h1 { #content h1 {
@@ -766,36 +766,36 @@ html.theme-light {
display: none; display: none;
} }
/* ---------- Code blocks - Gruvbox Dark (always, also in light mode) ---------- */ /* ---------- Code blocks - Harbordark (always, also in light mode) ---------- */
.ck-content pre, .ck-content pre,
#content pre { #content pre {
background-color: #282828; background-color: #222222;
color: #ebdbb2; color: #efebdc;
border: 1px solid #504945; border: 1px solid #2e2e2e;
border-radius: 8px; border-radius: 8px;
} }
.ck-content code, .ck-content code,
#content code { #content code {
background-color: #3c3836; background-color: #2a2a2a;
color: #ebdbb2; color: #efebdc;
border-color: #504945; border-color: #3f3f3f;
border-radius: 8px; border-radius: 8px;
padding: 0.1em 0.35em; padding: 0.1em 0.35em;
} }
html.theme-light .ck-content pre, html.theme-light .ck-content pre,
html.theme-light #content pre { html.theme-light #content pre {
background-color: #fbf1c7; background-color: #e8ecd0;
color: #3c3836; color: #1c2d28;
border-color: #d5c4a1; border-color: #c3c9a6;
} }
html.theme-light .ck-content code, html.theme-light .ck-content code,
html.theme-light #content code { html.theme-light #content code {
background-color: #d5c4a1; background-color: #cdd3b0;
color: #3c3836; color: #1c2d28;
border-color: #bdae93; border-color: #b3ba96;
} }
/* ---------- Eingebettete Bilder: Radius wie Code-Blöcke (8px) ---------- */ /* ---------- Eingebettete Bilder: Radius wie Code-Blöcke (8px) ---------- */
@@ -815,7 +815,7 @@ html.theme-light #content code {
width: calc(100vw - 24px); width: calc(100vw - 24px);
margin: 1em 0; margin: 1em 0;
margin-left: calc(50% - (100vw - 24px) / 2); margin-left: calc(50% - (100vw - 24px) / 2);
background: #1d2021; background: #1b1b1b;
border: 1px solid var(--background-highlight); border: 1px solid var(--background-highlight);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
@@ -833,9 +833,9 @@ html.theme-light #content code {
z-index: 3; z-index: 3;
display: none; display: none;
font-size: 0.75em; font-size: 0.75em;
color: #a89984; color: #a99b7a;
background: rgba(40, 40, 40, 0.8); background: rgba(27, 27, 27, 0.85);
border: 1px solid #504945; border: 1px solid #2e2e2e;
border-radius: 6px; border-radius: 6px;
padding: 2px 10px; padding: 2px 10px;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
@@ -858,12 +858,12 @@ html.theme-light #content code {
text-align: center; text-align: center;
padding: 48px; padding: 48px;
box-sizing: border-box; box-sizing: border-box;
color: #a89984; color: #a99b7a;
font-size: 0.9em; font-size: 0.9em;
} }
.model-viewer-status.error { .model-viewer-status.error {
color: #fb4934; color: #F44336;
} }
.model-viewer-progress { .model-viewer-progress {
@@ -874,7 +874,7 @@ html.theme-light #content code {
height: 6px; height: 6px;
width: min(60%, 480px); width: min(60%, 480px);
margin: 0 auto; margin: 0 auto;
background: #3c3836; background: #2a2a2a;
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
} }
@@ -882,7 +882,7 @@ html.theme-light #content code {
.model-viewer-progress-fill { .model-viewer-progress-fill {
height: 100%; height: 100%;
width: 0; width: 0;
background: #b8bb26; background: #E1CE98;
border-radius: 3px; border-radius: 3px;
transition: width 150ms ease; transition: width 150ms ease;
} }
@@ -902,7 +902,7 @@ html.theme-light #content code {
top: 8px; top: 8px;
left: 10px; left: 10px;
font-size: 0.75em; font-size: 0.75em;
color: #a89984; color: #a99b7a;
z-index: 2; z-index: 2;
pointer-events: none; pointer-events: none;
} }
@@ -923,7 +923,7 @@ html.theme-light #content code {
height: 100%; height: 100%;
} }
/* ---------- Bildunterschriften (Gruvbox) ---------- */ /* ---------- Bildunterschriften (Harbor) ---------- */
#content figcaption { #content figcaption {
font-size: 0.85em; font-size: 0.85em;
font-style: italic; font-style: italic;
@@ -938,19 +938,19 @@ html.theme-light #content code {
} }
.hljs { .hljs {
background: #282828; background: #222222;
color: #ebdbb2; color: #efebdc;
} }
.hljs-comment, .hljs-comment,
.hljs-quote { .hljs-quote {
color: #928374; color: #817f68;
} }
.hljs-keyword, .hljs-keyword,
.hljs-selector-tag, .hljs-selector-tag,
.hljs-subst { .hljs-subst {
color: #fb4934; color: #F44336;
} }
.hljs-number, .hljs-number,
@@ -958,24 +958,24 @@ html.theme-light #content code {
.hljs-variable, .hljs-variable,
.hljs-template-variable, .hljs-template-variable,
.hljs-tag .hljs-attr { .hljs-tag .hljs-attr {
color: #d3869b; color: #e58980;
} }
.hljs-string, .hljs-string,
.hljs-doctag { .hljs-doctag {
color: #b8bb26; color: #a99b7a;
} }
.hljs-title, .hljs-title,
.hljs-section, .hljs-section,
.hljs-selector-id { .hljs-selector-id {
color: #fe8019; color: #E1CE98;
} }
.hljs-type, .hljs-type,
.hljs-class .hljs-title, .hljs-class .hljs-title,
.hljs-attribute { .hljs-attribute {
color: #fabd2f; color: #77838a;
} }
.hljs-symbol, .hljs-symbol,
@@ -984,13 +984,13 @@ html.theme-light #content code {
.hljs-meta, .hljs-meta,
.hljs-deletion, .hljs-deletion,
.hljs-addition { .hljs-addition {
color: #d3869b; color: #e58980;
} }
.hljs-built_in, .hljs-built_in,
.hljs-builtin-name, .hljs-builtin-name,
.hljs-params { .hljs-params {
color: #8ec07c; color: #77838a;
} }
.hljs-emphasis { .hljs-emphasis {
@@ -1000,22 +1000,22 @@ html.theme-light #content code {
.hljs-strong { .hljs-strong {
font-weight: bold; font-weight: bold;
} }
/* ---------- Light mode: Gruvbox Light highlighter ---------- */ /* ---------- Light mode: Harbor light highlighter ---------- */
html.theme-light .hljs, html.theme-light .hljs,
html.theme-light pre code.hljs { html.theme-light pre code.hljs {
background: #fbf1c7 !important; background: #e8ecd0 !important;
color: #3c3836; color: #1c2d28;
} }
html.theme-light .hljs-comment, html.theme-light .hljs-comment,
html.theme-light .hljs-quote { html.theme-light .hljs-quote {
color: #928374; color: #7d8794;
} }
html.theme-light .hljs-keyword, html.theme-light .hljs-keyword,
html.theme-light .hljs-selector-tag, html.theme-light .hljs-selector-tag,
html.theme-light .hljs-subst { html.theme-light .hljs-subst {
color: #9d0006; color: #b14752;
} }
html.theme-light .hljs-number, html.theme-light .hljs-number,
@@ -1023,24 +1023,24 @@ html.theme-light .hljs-literal,
html.theme-light .hljs-variable, html.theme-light .hljs-variable,
html.theme-light .hljs-template-variable, html.theme-light .hljs-template-variable,
html.theme-light .hljs-tag .hljs-attr { html.theme-light .hljs-tag .hljs-attr {
color: #8f3f71; color: #8a5b81;
} }
html.theme-light .hljs-string, html.theme-light .hljs-string,
html.theme-light .hljs-doctag { html.theme-light .hljs-doctag {
color: #79740e; color: #556753;
} }
html.theme-light .hljs-title, html.theme-light .hljs-title,
html.theme-light .hljs-section, html.theme-light .hljs-section,
html.theme-light .hljs-selector-id { html.theme-light .hljs-selector-id {
color: #af3a03; color: #dc8164;
} }
html.theme-light .hljs-type, html.theme-light .hljs-type,
html.theme-light .hljs-class .hljs-title, html.theme-light .hljs-class .hljs-title,
html.theme-light .hljs-attribute { html.theme-light .hljs-attribute {
color: #b57614; color: #4c6c94;
} }
html.theme-light .hljs-symbol, html.theme-light .hljs-symbol,
@@ -1049,13 +1049,13 @@ html.theme-light .hljs-link,
html.theme-light .hljs-meta, html.theme-light .hljs-meta,
html.theme-light .hljs-deletion, html.theme-light .hljs-deletion,
html.theme-light .hljs-addition { html.theme-light .hljs-addition {
color: #8f3f71; color: #8a5b81;
} }
html.theme-light .hljs-built_in, html.theme-light .hljs-built_in,
html.theme-light .hljs-builtin-name, html.theme-light .hljs-builtin-name,
html.theme-light .hljs-params { html.theme-light .hljs-params {
color: #427b58; color: #3d727d;
} }
html.theme-light .hljs-regexp, html.theme-light .hljs-regexp,
@@ -1064,16 +1064,16 @@ html.theme-light .hljs-selector-attr,
html.theme-light .hljs-selector-pseudo, html.theme-light .hljs-selector-pseudo,
html.theme-light .hljs-selector-class, html.theme-light .hljs-selector-class,
html.theme-light .hljs-template-tag { html.theme-light .hljs-template-tag {
color: #8f3f71; color: #8a5b81;
} }
html.theme-light .hljs-name, html.theme-light .hljs-name,
html.theme-light .hljs-tag { html.theme-light .hljs-tag {
color: #076678; color: #4c6c94;
} }
html.theme-light .hljs-meta .hljs-string { html.theme-light .hljs-meta .hljs-string {
color: #79740e; color: #556753;
} }
/* ---------- Admonitions (Trilium-style, gefüllt) ---------- */ /* ---------- Admonitions (Trilium-style, gefüllt) ---------- */
.admonition { .admonition {
@@ -1090,18 +1090,18 @@ html.theme-light .hljs-meta .hljs-string {
overflow: hidden; overflow: hidden;
} }
html.theme-dark .admonition.note { --admonition-bg: rgba(105, 199, 255, 0.16); } html.theme-dark .admonition.note { --admonition-bg: rgba(76, 108, 148, 0.16); }
html.theme-dark .admonition.tip { --admonition-bg: rgba(64, 192, 37, 0.14); } html.theme-dark .admonition.tip { --admonition-bg: rgba(85, 103, 83, 0.16); }
html.theme-dark .admonition.important { --admonition-bg: rgba(152, 57, 247, 0.18); } html.theme-dark .admonition.important { --admonition-bg: rgba(138, 91, 129, 0.18); }
html.theme-dark .admonition.caution { --admonition-bg: rgba(255, 46, 46, 0.16); } html.theme-dark .admonition.caution { --admonition-bg: rgba(177, 71, 82, 0.16); }
html.theme-dark .admonition.warning { --admonition-bg: rgba(226, 170, 3, 0.14); } html.theme-dark .admonition.warning { --admonition-bg: rgba(220, 129, 100, 0.16); }
html.theme-dark .admonition { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } html.theme-dark .admonition { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
html.theme-light .admonition.note { --admonition-bg: rgba(105, 199, 255, 0.22); } html.theme-light .admonition.note { --admonition-bg: rgba(76, 108, 148, 0.18); }
html.theme-light .admonition.tip { --admonition-bg: rgba(64, 192, 37, 0.16); } html.theme-light .admonition.tip { --admonition-bg: rgba(85, 103, 83, 0.16); }
html.theme-light .admonition.important { --admonition-bg: rgba(152, 57, 247, 0.15); } html.theme-light .admonition.important { --admonition-bg: rgba(138, 91, 129, 0.16); }
html.theme-light .admonition.caution { --admonition-bg: rgba(255, 46, 46, 0.15); } html.theme-light .admonition.caution { --admonition-bg: rgba(177, 71, 82, 0.16); }
html.theme-light .admonition.warning { --admonition-bg: rgba(226, 170, 3, 0.20); } html.theme-light .admonition.warning { --admonition-bg: rgba(220, 129, 100, 0.20); }
.admonition p:last-child { .admonition p:last-child {
margin-bottom: 0; margin-bottom: 0;
@@ -1112,11 +1112,11 @@ html.theme-light .admonition.warning { --admonition-bg: rgba(226, 170, 3, 0.20);
margin-top: 0; margin-top: 0;
} }
.admonition.note { --accent-color: #69c7ff; } .admonition.note { --accent-color: #4c6c94; }
.admonition.tip { --accent-color: #40c025; } .admonition.tip { --accent-color: #556753; }
.admonition.important { --accent-color: #9839f7; } .admonition.important { --accent-color: #8a5b81; }
.admonition.caution { --accent-color: #ff2e2e; } .admonition.caution { --accent-color: #b14752; }
.admonition.warning { --accent-color: #e2aa03; } .admonition.warning { --accent-color: #dc8164; }
.admonition::before { .admonition::before {
color: var(--accent-color); color: var(--accent-color);
@@ -1131,25 +1131,25 @@ html.theme-light .admonition.warning { --admonition-bg: rgba(226, 170, 3, 0.20);
.admonition.important::before { content: "\ea7c"; } .admonition.important::before { content: "\ea7c"; }
.admonition.caution::before { content: "\eac7"; } .admonition.caution::before { content: "\eac7"; }
.admonition.warning::before { content: "\eac5"; } .admonition.warning::before { content: "\eac5"; }
/* ---------- Tables (Gruvbox, theme-aware) ---------- */ /* ---------- Tables (Harbor, theme-aware) ---------- */
html.theme-dark { html.theme-dark {
--table-header-bg: rgba(131, 165, 152, 0.30); --table-header-bg: rgba(231, 90, 80, 0.20);
--table-header-text: #fbf1c7; --table-header-text: #efebdc;
--table-header-border: rgba(131, 165, 152, 0.6); --table-header-border: rgba(231, 90, 80, 0.45);
--table-stripe: rgba(255, 255, 255, 0.04); --table-stripe: rgba(255, 255, 255, 0.04);
--table-hover: rgba(131, 165, 152, 0.16); --table-hover: rgba(231, 90, 80, 0.12);
--table-rowlabel-bg: rgba(255, 255, 255, 0.05); --table-rowlabel-bg: rgba(255, 255, 255, 0.05);
--table-rowlabel-text: #ebdbb2; --table-rowlabel-text: #efebdc;
} }
html.theme-light { html.theme-light {
--table-header-bg: rgba(7, 102, 120, 0.20); --table-header-bg: rgba(94, 129, 172, 0.16);
--table-header-text: #282828; --table-header-text: #1c2d28;
--table-header-border: rgba(7, 102, 120, 0.45); --table-header-border: rgba(94, 129, 172, 0.40);
--table-stripe: rgba(0, 0, 0, 0.04); --table-stripe: rgba(0, 0, 0, 0.04);
--table-hover: rgba(7, 102, 120, 0.12); --table-hover: rgba(94, 129, 172, 0.12);
--table-rowlabel-bg: rgba(0, 0, 0, 0.05); --table-rowlabel-bg: rgba(0, 0, 0, 0.05);
--table-rowlabel-text: #3c3836; --table-rowlabel-text: #1c2d28;
} }
.ck-content table, .ck-content table,
@@ -1209,19 +1209,19 @@ html.theme-light {
.ck-content table tbody tr:hover td, .ck-content table tbody tr:hover td,
#content table tbody tr:hover td { #content table tbody tr:hover td {
background-color: rgba(254, 128, 25, 0.07) !important; background-color: rgba(94, 129, 172, 0.10) !important;
} }
.ck-content table .col-hover, .ck-content table .col-hover,
#content table .col-hover { #content table .col-hover {
background-color: rgba(254, 128, 25, 0.07) !important; background-color: rgba(94, 129, 172, 0.10) !important;
} }
.ck-content table tbody tr:hover td.col-hover, .ck-content table tbody tr:hover td.col-hover,
.ck-content table thead th.col-hover, .ck-content table thead th.col-hover,
#content table tbody tr:hover td.col-hover, #content table tbody tr:hover td.col-hover,
#content table thead th.col-hover { #content table thead th.col-hover {
background-color: rgba(254, 128, 25, 0.14) !important; background-color: rgba(94, 129, 172, 0.18) !important;
} }
/* ---------- Category subcategories ---------- */ /* ---------- Category subcategories ---------- */
.blog-subcategories { .blog-subcategories {
@@ -1276,18 +1276,18 @@ html.theme-light {
text-transform: capitalize; text-transform: capitalize;
white-space: nowrap; white-space: nowrap;
} }
/* ---------- Digital Garden rows: clickable + green hover ---------- */ /* ---------- Digital Garden rows: clickable + sage hover ---------- */
.blog-garden-table tbody tr { .blog-garden-table tbody tr {
cursor: pointer; cursor: pointer;
} }
#content .blog-garden-table tbody tr:hover td, #content .blog-garden-table tbody tr:hover td,
#content .blog-garden-table .col-hover { #content .blog-garden-table .col-hover {
background-color: rgba(184, 187, 38, 0.12) !important; background-color: rgba(169, 155, 122, 0.15) !important;
} }
#content .blog-garden-table tbody tr:hover td.col-hover { #content .blog-garden-table tbody tr:hover td.col-hover {
background-color: rgba(184, 187, 38, 0.20) !important; background-color: rgba(169, 155, 122, 0.25) !important;
} }
.note-state { .note-state {
display: inline-flex; display: inline-flex;
@@ -1296,44 +1296,44 @@ html.theme-light {
font-size: 0.8em; font-size: 0.8em;
padding: 2px 10px; padding: 2px 10px;
border-radius: 8px; border-radius: 8px;
background: rgba(184, 187, 38, 0.18); background: rgba(169, 155, 122, 0.20);
color: var(--text-heading); color: var(--text-heading);
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
} }
.note-state i { .note-state i {
color: #b8bb26; color: #a99b7a;
} }
.note-state.state-draft { .note-state.state-draft {
background: rgba(146, 131, 116, 0.22); background: rgba(109, 109, 109, 0.22);
} }
.note-state.state-draft i { .note-state.state-draft i {
color: #928374; color: #6d6d6d;
} }
.note-state.state-review { .note-state.state-review {
background: rgba(131, 165, 152, 0.25); background: rgba(119, 131, 138, 0.25);
} }
.note-state.state-review i { .note-state.state-review i {
color: #83a598; color: #77838a;
} }
.note-state.state-unknown { .note-state.state-unknown {
background: rgba(251, 73, 52, 0.20); background: rgba(244, 67, 54, 0.18);
} }
.note-state.state-unknown i { .note-state.state-unknown i {
color: #fb4934; color: #F44336;
} }
/* ---------- Code notes: always Gruvbox dark like code boxes ---------- */ /* ---------- Code notes: always Harbordark like code boxes ---------- */
#content.type-code pre { #content.type-code pre {
background-color: #282828 !important; background-color: #222222 !important;
color: #ebdbb2; color: #efebdc;
border: 1px solid #504945; border: 1px solid #2e2e2e;
border-radius: 8px; border-radius: 8px;
padding: 1em; padding: 1em;
margin: 1em 0; margin: 1em 0;
@@ -1341,18 +1341,18 @@ html.theme-light {
#content.type-code code { #content.type-code code {
background-color: transparent !important; background-color: transparent !important;
color: #ebdbb2; color: #efebdc;
border: 0; border: 0;
} }
html.theme-light #content.type-code pre { html.theme-light #content.type-code pre {
background-color: #fbf1c7 !important; background-color: #e8ecd0 !important;
color: #3c3836; color: #1c2d28;
border-color: #d5c4a1; border-color: #c3c9a6;
} }
html.theme-light #content.type-code code { html.theme-light #content.type-code code {
color: #3c3836; color: #1c2d28;
} }
/* ---------- Code: line numbers + copy button ---------- */ /* ---------- Code: line numbers + copy button ---------- */
pre.code-processed { pre.code-processed {
@@ -1450,12 +1450,12 @@ pre.code-processed .code-copy-btn:hover,
#content .hljs-ln tbody tr:hover td, #content .hljs-ln tbody tr:hover td,
#content .hljs-ln tbody tr:hover td.col-hover { #content .hljs-ln tbody tr:hover td.col-hover {
background-color: rgba(254, 128, 25, 0.07) !important; background-color: rgba(94, 129, 172, 0.08) !important;
} }
html.theme-light #content .hljs-ln tbody tr:hover td, html.theme-light #content .hljs-ln tbody tr:hover td,
html.theme-light #content .hljs-ln tbody tr:hover td.col-hover { html.theme-light #content .hljs-ln tbody tr:hover td.col-hover {
background-color: rgba(254, 128, 25, 0.08) !important; background-color: rgba(94, 129, 172, 0.08) !important;
} }
.hljs-ln-numbers { .hljs-ln-numbers {
@@ -1475,7 +1475,7 @@ html.theme-light #content .hljs-ln tbody tr:hover td.col-hover {
white-space: pre; white-space: pre;
vertical-align: top; vertical-align: top;
} }
/* ---------- Scrollbars (Gruvbox) ---------- */ /* ---------- Scrollbars (Harbor) ---------- */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 12px; width: 12px;
height: 12px; height: 12px;
@@ -1503,49 +1503,49 @@ html.theme-light #content .hljs-ln tbody tr:hover td.col-hover {
pre, pre,
pre.code-processed .code-wrap, pre.code-processed .code-wrap,
.hljs-ln-code { .hljs-ln-code {
scrollbar-color: #504945 #1d2021; scrollbar-color: #2e2e2e #1b1b1b;
} }
pre::-webkit-scrollbar-thumb, pre::-webkit-scrollbar-thumb,
pre.code-processed .code-wrap::-webkit-scrollbar-thumb, pre.code-processed .code-wrap::-webkit-scrollbar-thumb,
.hljs-ln-code::-webkit-scrollbar-thumb { .hljs-ln-code::-webkit-scrollbar-thumb {
background: #504945; background: #2e2e2e;
} }
pre::-webkit-scrollbar-thumb:hover, pre::-webkit-scrollbar-thumb:hover,
pre.code-processed .code-wrap::-webkit-scrollbar-thumb:hover, pre.code-processed .code-wrap::-webkit-scrollbar-thumb:hover,
.hljs-ln-code::-webkit-scrollbar-thumb:hover { .hljs-ln-code::-webkit-scrollbar-thumb:hover {
background: #665c54; background: #3f3f3f;
} }
pre::-webkit-scrollbar-track, pre::-webkit-scrollbar-track,
pre.code-processed .code-wrap::-webkit-scrollbar-track, pre.code-processed .code-wrap::-webkit-scrollbar-track,
.hljs-ln-code::-webkit-scrollbar-track { .hljs-ln-code::-webkit-scrollbar-track {
background: #1d2021; background: #1b1b1b;
} }
html.theme-light pre, html.theme-light pre,
html.theme-light pre.code-processed .code-wrap, html.theme-light pre.code-processed .code-wrap,
html.theme-light .hljs-ln-code { html.theme-light .hljs-ln-code {
scrollbar-color: #bdae93 #ebdbb2; scrollbar-color: #b3ba96 #d0d6b4;
} }
html.theme-light pre::-webkit-scrollbar-thumb, html.theme-light pre::-webkit-scrollbar-thumb,
html.theme-light pre.code-processed .code-wrap::-webkit-scrollbar-thumb, html.theme-light pre.code-processed .code-wrap::-webkit-scrollbar-thumb,
html.theme-light .hljs-ln-code::-webkit-scrollbar-thumb { html.theme-light .hljs-ln-code::-webkit-scrollbar-thumb {
background: #bdae93; background: #b3ba96;
} }
html.theme-light pre::-webkit-scrollbar-thumb:hover, html.theme-light pre::-webkit-scrollbar-thumb:hover,
html.theme-light pre.code-processed .code-wrap::-webkit-scrollbar-thumb:hover, html.theme-light pre.code-processed .code-wrap::-webkit-scrollbar-thumb:hover,
html.theme-light .hljs-ln-code::-webkit-scrollbar-thumb:hover { html.theme-light .hljs-ln-code::-webkit-scrollbar-thumb:hover {
background: #d5c4a1; background: #c3c9a6;
} }
html.theme-light pre::-webkit-scrollbar-track, html.theme-light pre::-webkit-scrollbar-track,
html.theme-light pre.code-processed .code-wrap::-webkit-scrollbar-track, html.theme-light pre.code-processed .code-wrap::-webkit-scrollbar-track,
html.theme-light .hljs-ln-code::-webkit-scrollbar-track { html.theme-light .hljs-ln-code::-webkit-scrollbar-track {
background: #ebdbb2; background: #d0d6b4;
} }
/* ---------- Link icons / markers: internal links without arrow, external links keep a marker ---------- */ /* ---------- Link icons / markers: internal links without arrow, external links keep a marker ---------- */
@@ -1591,23 +1591,200 @@ a.previous::before,
/* action links as buttons (subtle tint, noticeable on hover) */ /* action links as buttons (subtle tint, noticeable on hover) */
.blog-pn { .blog-pn {
padding: 6px 14px; padding: 6px 14px;
border: 1px solid rgba(131, 165, 152, 0.35); border: 1px solid rgba(231, 90, 80, 0.30);
border-radius: 8px; border-radius: 8px;
background: rgba(131, 165, 152, 0.08); background: rgba(231, 90, 80, 0.08);
transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
} }
html.theme-light .blog-pn { html.theme-light .blog-pn {
border-color: rgba(7, 102, 120, 0.35); border-color: rgba(76, 108, 148, 0.30);
background: rgba(7, 102, 120, 0.08); background: rgba(76, 108, 148, 0.08);
} }
.blog-pn:hover { .blog-pn:hover {
background: rgba(131, 165, 152, 0.18); background: rgba(231, 90, 80, 0.18);
border-color: #83a598; border-color: #e75a50;
} }
html.theme-light .blog-pn:hover { html.theme-light .blog-pn:hover {
background: rgba(7, 102, 120, 0.15); background: rgba(76, 108, 148, 0.15);
border-color: #076678; border-color: #4c6c94;
}
/* ---------- Mermaid diagrams - Harbor, theme-following ---------- */
/*
* The blog renders inline Mermaid diagrams with the default theme, so the
* generated SVG carries light-blue node fills that clash with Harbor.
* Override the SVG element colours here; the selectors hang off
* html.theme-dark / html.theme-light, so the diagrams follow the theme
* toggle automatically without re-rendering.
*/
.mermaid {
margin: 1.25em auto;
overflow-x: auto;
background: transparent;
}
.mermaid svg {
max-width: 100%;
height: auto;
}
/* Text in node labels and titles */
html.theme-dark .mermaid svg text,
html.theme-dark .mermaid svg tspan,
html.theme-dark .mermaid svg .nodeLabel,
html.theme-dark .mermaid svg .edgeLabel p {
fill: #efebdc !important;
color: #efebdc !important;
}
html.theme-light .mermaid svg text,
html.theme-light .mermaid svg tspan,
html.theme-light .mermaid svg .nodeLabel,
html.theme-light .mermaid svg .edgeLabel p {
fill: #1c2d28 !important;
color: #1c2d28 !important;
}
/* Graph/node title */
html.theme-dark .mermaid svg .titleText text,
html.theme-dark .mermaid svg .node .label .nodeLabel {
fill: #efebdc !important;
color: #efebdc !important;
}
html.theme-light .mermaid svg .titleText text,
html.theme-light .mermaid svg .node .label .nodeLabel {
fill: #1c2d28 !important;
color: #1c2d28 !important;
}
/* Node shapes (rectangles, rounded boxes, ellipses, diamonds) */
html.theme-dark .mermaid svg .node rect,
html.theme-dark .mermaid svg .node polygon,
html.theme-dark .mermaid svg .node circle,
html.theme-dark .mermaid svg .node ellipse,
html.theme-dark .mermaid svg .node path,
html.theme-dark .mermaid svg .cluster rect {
fill: #232323 !important;
stroke: #77838a !important;
}
html.theme-light .mermaid svg .node rect,
html.theme-light .mermaid svg .node polygon,
html.theme-light .mermaid svg .node circle,
html.theme-light .mermaid svg .node ellipse,
html.theme-light .mermaid svg .node path,
html.theme-light .mermaid svg .cluster rect {
fill: #d0d6b4 !important;
stroke: #4c6c94 !important;
}
/* Rounded corners on rectangular node boxes and subgraph clusters (8 px, like the blog cards) */
html.theme-dark .mermaid svg .node rect,
html.theme-light .mermaid svg .node rect,
html.theme-dark .mermaid svg .cluster rect,
html.theme-light .mermaid svg .cluster rect {
rx: 8px !important;
ry: 8px !important;
}
/* Edge lines: stroke only (a filled edge path would look like a polygon) */
html.theme-dark .mermaid svg .edgePaths path {
fill: none !important;
stroke: #a99b7a !important;
}
html.theme-light .mermaid svg .edgePaths path {
fill: none !important;
stroke: #7d8794 !important;
}
/* Arrowheads (markers): filled triangles */
html.theme-dark .mermaid svg marker.flowchart-v2,
html.theme-dark .mermaid svg .arrowMarkerPath {
fill: #a99b7a !important;
stroke: #a99b7a !important;
}
html.theme-light .mermaid svg marker.flowchart-v2,
html.theme-light .mermaid svg .arrowMarkerPath {
fill: #7d8794 !important;
stroke: #7d8794 !important;
}
/* Edge labels: HTML text inside a foreignObject (div.labelBkg > span.edgeLabel);
the label panel background lives on the g.edgeLabel element itself */
html.theme-dark .mermaid svg g.edgeLabel {
background: #1b1b1b !important;
fill: #efebdc !important;
color: #efebdc !important;
}
html.theme-dark .mermaid svg .edgeLabel .labelBkg {
fill: #1b1b1b !important;
background: #1b1b1b !important;
color: #efebdc !important;
}
html.theme-dark .mermaid svg .edgeLabel .labelBkg .edgeLabel {
fill: #efebdc !important;
color: #efebdc !important;
background: #1b1b1b !important;
}
html.theme-dark .mermaid svg .edgeLabel .labelBkg .edgeLabel p {
fill: #efebdc !important;
color: #efebdc !important;
background: #1b1b1b !important;
}
html.theme-light .mermaid svg g.edgeLabel {
background: #d0d6b4 !important;
fill: #1c2d28 !important;
color: #1c2d28 !important;
}
html.theme-light .mermaid svg .edgeLabel .labelBkg {
fill: #d0d6b4 !important;
background: #d0d6b4 !important;
color: #1c2d28 !important;
}
html.theme-light .mermaid svg .edgeLabel .labelBkg .edgeLabel {
fill: #1c2d28 !important;
color: #1c2d28 !important;
background: #d0d6b4 !important;
}
html.theme-light .mermaid svg .edgeLabel .labelBkg .edgeLabel p {
fill: #1c2d28 !important;
color: #1c2d28 !important;
background: #d0d6b4 !important;
}
/* Subgraph cluster border + label */
html.theme-dark .mermaid svg .cluster rect {
stroke: #2e2e2e !important;
fill: rgba(27, 27, 27, 0.35) !important;
}
html.theme-light .mermaid svg .cluster rect {
stroke: #c3c9a6 !important;
fill: rgba(208, 214, 180, 0.40) !important;
}
html.theme-dark .mermaid svg .cluster .nodeLabel,
html.theme-dark .mermaid svg .cluster-label text {
fill: #a99b7a !important;
color: #a99b7a !important;
}
html.theme-light .mermaid svg .cluster .nodeLabel,
html.theme-light .mermaid svg .cluster-label text {
fill: #556753 !important;
color: #556753 !important;
} }