Ship all three blog themes (Coffee/Harbor/Gruvbox) with palette images, theme-switch guide; make 3D viewer read theme CSS variables

README.md

@@ -18,13 +18,27 @@ mind-map notes.
 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/`).
 
-![Coffee palette](assets/palette.png)
+## Themes
 
-*Palette from the [megabyte0x/omarchy-coffee-theme](https://github.com/megabyte0x/omarchy-coffee-theme) (Coffee / Coffee Latte) repository, MIT licensed.*
+The share ships with **three themes**, each with a dark and a light variant (toggled via the header
+switch / `html.theme-light` + `html.theme-dark`). They live in `theme/` and are set on the blog by
+pointing the `shareCss` relation at the matching note – see
+[`docs/switch-blog-theme.md`](docs/switch-blog-theme.md) for the step-by-step guide.
+
+| Theme | File | Palette (dark / light) | Source |
+|---|---|---|---|
+| **Coffee** (active by default) | `theme/blog_share_theme_coffee.css` | espresso `#1d150f` / latte-cream `#f0e2d0`, caramel `#e0a15c` · cream `#E8E3C3` / ink `#2D1A1D`, berry `#8e2d53` | [megabyte0x/omarchy-coffee-theme](https://github.com/megabyte0x/omarchy-coffee-theme) (MIT) |
+| **Harbor** | `theme/blog_share_theme_harbor.css` | near-black `#1b1b1b` / cream `#efebdc`, coral `#e75a50` · paper `#dfe4c4` / ink `#1c2d28`, nord-blue `#5e81ac` | [HANCORE-linux/omarchy-harbor-theme](https://github.com/HANCORE-linux/omarchy-harbor-theme) (MIT) |
+| **Gruvbox** | `theme/blog_share_theme_gruvbox.css` | bg `#282828` / fg `#ebdbb2`, accents red/green/yellow/blue | [morhetz/gruvbox](https://github.com/morhetz/gruvbox) (MIT) |
+
+![Coffee palette](assets/palette-coffee.png)
+![Harbor palette](assets/palette-harbor.png)
+![Gruvbox palette](assets/palette-gruvbox.png)
 
 ## Features
 
-- Coffee dark / Coffee Latte light theme for the share, with a theme toggle in the header.
+- Coffee dark / Coffee Latte light theme for the share, with a theme toggle in the header
+  (Gruvbox and Harbor are available as well – see the [Themes](#themes) section).
 - Blog index, category pages, sub-categories, tags and tag overview.
 - **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
@@ -66,7 +80,9 @@ 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_publish_manager.js` | backend script that mirrors notes between `Unpublished` and the blog | code, `application/javascript;env=backend` |
-| `theme/blog_share_theme.css` | the Coffee share theme (Coffee / Coffee Latte) | code, `text/css` |
+| `theme/blog_share_theme_coffee.css` | Coffee / Coffee Latte share theme (active by default) | code, `text/css` |
+| `theme/blog_share_theme_harbor.css` | Harbor / Harbordark share theme | code, `text/css` |
+| `theme/blog_share_theme_gruvbox.css` | Gruvbox light/dark share theme | code, `text/css` |
 | `theme/favicon.svg` | default site favicon | code (SVG) |
 | `theme/cookie.woff2` | "Cookie" font for the Buy me a coffee button | file, `font/woff2` |
 | `lib/highlight.js` | vendored highlight.js | code, `application/javascript` |
@@ -124,7 +140,9 @@ Under **`.blog`** create one code note per file, using the file name as the note
 
 | Note title | File | mime |
 |---|---|---|
-| `blog_share_theme.css` | `theme/blog_share_theme.css` | `text/css` |
+| `blog_share_theme_coffee.css` | `theme/blog_share_theme_coffee.css` | `text/css` |
+| `blog_share_theme_harbor.css` | `theme/blog_share_theme_harbor.css` | `text/css` |
+| `blog_share_theme_gruvbox.css` | `theme/blog_share_theme_gruvbox.css` | `text/css` |
 | `favicon` | `theme/favicon.svg` | – (SVG) |
 | `Cookie` | `theme/cookie.woff2` | `font/woff2` (file note) |
 | `highlight.js` | `lib/highlight.js` | `application/javascript` |
@@ -176,7 +194,7 @@ mime `application/javascript;env=backend`) and `blog_publish_manager` (from
 | `shareOpenGraphURL` | `https://YOUR-INSTANCE.example.com/` | – |
 | `shareOpenGraphColor` | `#83a598` | – |
 | `iconClass` | `bx bx-edit-alt` | – |
-| `~shareCss` | → `blog_share_theme.css` | yes |
+| `~shareCss` | → `blog_share_theme_coffee.css` (the active theme) | yes |
 | `~shareFavicon` | → `favicon` | yes |
 | `~shareTemplate` | → `share template` | yes |
 | `~shareOpenGraphImage` | → `og-banner` | – |
@@ -297,7 +315,10 @@ server {
 
 ## Customisation
 
-- **Theme**: edit `theme/blog_share_theme.css` (Coffee / Coffee Latte via `html.theme-light/dark`).
+- **Theme**: pick one of `theme/blog_share_theme_{coffee,harbor,gruvbox}.css` and point the blog's
+  `shareCss` relation at it – see [`docs/switch-blog-theme.md`](docs/switch-blog-theme.md). Each theme
+  ships dark + light via `html.theme-light/dark`. The 3D viewer and Mermaid rendering read the theme's
+  CSS variables, so they adapt automatically to whichever theme is active.
 - **Buy me a coffee**: edit `scripts/bmc_button.js` (link, text, copyright) – the font is
   referenced via `__COOKIE_FONT_ID__`.
 - **Category logos**: copy the `examples/` icon + `ignis8_menu_icon.js` pattern to give a
@@ -309,6 +330,6 @@ This project is licensed under the **GNU General Public License v3.0** – see [
 
 The repository also contains third-party assets that keep their own licenses:
 `lib/highlight.js` (BSD-3-Clause), `lib/hljs_line_numbers.js` (MIT),
-`theme/cookie.woff2` (SIL OFL 1.1), `assets/palette.png` (MIT) and the embedded
+`theme/cookie.woff2` (SIL OFL 1.1), the three palette images `assets/palette-*.png` (MIT) and the embedded
 Trilium logo in `scripts/bmc_button.js` (AGPL-3.0). See
 [`THIRD_PARTY_LICENSES.md`](THIRD_PARTY_LICENSES.md) for details.