feat(theme): add Ash theme (currently active) + palette preview; docs/README to six themes

2026-09-21 12:50:07 +02:00
parent 00bfea9d3c
commit 9e456bbaaa
4 changed files with 179 additions and 7 deletions
@@ -20,20 +20,22 @@ no external dependencies (except `highlight.js`, vendored in `lib/`).

 ## Themes

-The share ships with **three themes**, each with a dark and a light variant (toggled via the header
+The share ships with **six 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 |
 |---|---|---|---|
+| **Ash** (active) | `theme/blog_share_theme_ash.css` | panel `#1c1b1f` / bone `#e6dfd1`, ember `#e0914f` steel `#7c9aa1` · paper `#e9e3d5` / ink `#2a2822` | Ash palette, Gruvbox-derived ([trilium-themes](https://git.familie-zink.org/zink/trilium-themes)) |
 | **Coffee** | `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-harbordark-theme) (MIT) |
-| **Gruvbox** (active) | `theme/blog_share_theme_gruvbox.css` | bg `#282828` / fg `#ebdbb2`, accents red/green/yellow/blue | [morhetz/gruvbox](https://github.com/morhetz/gruvbox) (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-harbordark-theme](https://github.com/HANCORE-linux/omarchy-harbordark-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) |
 | **Solarized** | `theme/blog_share_theme_solarized.css` | bg `#002b36` / fg `#839496`, blue `#268bd2` cyan `#2aa198` · bg `#fdf6e3` / fg `#657b83` | [Solarized by Ethan Schoonover](https://ethanschoonover.com/solarized/) (MIT) |
 | **Tokyo Night** | `theme/blog_share_theme_tokyonight.css` | storm `#24283b` / fg `#c0caf5`, blue `#7aa2f7` · day `#e1e2e7` / fg `#3760bf` | [tokyonight.nvim](https://github.com/folke/tokyonight.nvim) (Apache-2.0) |

 ![Coffee palette](assets/palette-coffee.png)
+![Ash palette](assets/palette-ash.png)
 ![Harbor palette](assets/palette-harbor.png)
 ![Gruvbox palette](assets/palette-gruvbox.png)
 ![Solarized palette](assets/palette-solarized.png)
@@ -42,7 +44,7 @@ pointing the `shareCss` relation at the matching note – see
 ## Features

 - 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).
+  (Ash, Harbor, Gruvbox, Solarized and Tokyo Night 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
@@ -85,6 +87,7 @@ pointing the `shareCss` relation at the matching note – see
 | `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_base.css` | **Base stylesheet** (layout/components, palette-independent, var()-driven) | code, `text/css` |
+| `theme/blog_share_theme_ash.css` | **Ash / Ash light share theme (currently active)** – Gruvbox-derived palette | code, `text/css` |
 | `theme/blog_share_theme_coffee.css` | Coffee / Coffee Latte share theme (palette overrides) | 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` |
@@ -147,6 +150,7 @@ Under **`.blog`** create one code note per file, using the file name as the note

 | Note title | File | mime |
 |---|---|---|
+| `blog_share_theme_ash.css` | `theme/blog_share_theme_ash.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` |
@@ -325,7 +329,7 @@ server {

 ## Customisation

- **Theme**: pick one of `theme/blog_share_theme_{coffee,harbor,gruvbox,solarized,tokyonight}.css` and point the blog's
+- **Theme**: pick one of `theme/blog_share_theme_{ash,coffee,harbor,gruvbox,solarized,tokyonight}.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.
@@ -9,13 +9,14 @@ note IDs are given for reference.

 | Theme | Repo file | Live note | Dark / light |
 |---|---|---|---|
+| **Ash (active)** | `theme/blog_share_theme_ash.css` | `OCbcTyzbQJA2` | panel/bone · ember+steel / paper+ink |
 | Coffee (default) | `theme/blog_share_theme_coffee.css` | `NqZXcFRGi3II` | espresso / latte-cream |
 | Harbor | `theme/blog_share_theme_harbor.css` | `Ep54EDTwKxup` | harbordark / paper |
 | Gruvbox | `theme/blog_share_theme_gruvbox.css` | `edhL5cByGwqA` | gruvbox dark / light |
 | Solarized | `theme/blog_share_theme_solarized.css` | `UFxPR5IpTyfj` | base03 / base3 |
 | Tokyo Night | `theme/blog_share_theme_tokyonight.css` | `bf1OKYo3msZm` | storm / day |

-All three themes include a `html.theme-light` + `html.theme-dark` block, theme-aware **3D viewer**
+All six themes include a `html.theme-light` + `html.theme-dark` block, theme-aware **3D viewer**
 overlays and **Mermaid** rendering. The 3D viewer reads the theme's CSS variables
 (`--background-primary` for the canvas, `--background-active` for the model material), so it adapts
 automatically to whichever theme is active – no script changes needed.
@@ -70,4 +71,4 @@ If you want to add or customise a theme on a new Trilium instance:

 The palette-independent layout lives in **`blog_share_base.css`** (note under `.blog`, mime `text/css`). It is attached to the blog root with a **second `shareCss` relation that is inherited (`isInheritable`)**, alongside the per-palette theme relation. When you switch the active palette you change ONLY the theme `shareCss` target; the base relation stays untouched.

-Because the base is shared, add any **new generic rule (focus ring, image caps, component layout) to `blog_share_base.css`** instead of duplicating it across all five theme files. The themes now carry only the `:root` variables and the colour-specific components. For production you can serve the minified build via `tools/minify_css.py`.
+Because the base is shared, add any **new generic rule (focus ring, image caps, component layout) to `blog_share_base.css`** instead of duplicating it across all six theme files. The themes now carry only the `:root` variables and the colour-specific components. For production you can serve the minified build via `tools/minify_css.py`.