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

This commit is contained in:
Richard Zink
2026-09-21 12:50:07 +02:00
parent 00bfea9d3c
commit 9e456bbaaa
4 changed files with 179 additions and 7 deletions
+9 -5
View File
@@ -20,20 +20,22 @@ no external dependencies (except `highlight.js`, vendored in `lib/`).
## Themes ## 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 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 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. [`docs/switch-blog-theme.md`](docs/switch-blog-theme.md) for the step-by-step guide.
| Theme | File | Palette (dark / light) | Source | | 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) | | **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) | | **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** (active) | `theme/blog_share_theme_gruvbox.css` | bg `#282828` / fg `#ebdbb2`, accents red/green/yellow/blue | [morhetz/gruvbox](https://github.com/morhetz/gruvbox) (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) | | **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) | | **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) ![Coffee palette](assets/palette-coffee.png)
![Ash palette](assets/palette-ash.png)
![Harbor palette](assets/palette-harbor.png) ![Harbor palette](assets/palette-harbor.png)
![Gruvbox palette](assets/palette-gruvbox.png) ![Gruvbox palette](assets/palette-gruvbox.png)
![Solarized palette](assets/palette-solarized.png) ![Solarized palette](assets/palette-solarized.png)
@@ -42,7 +44,7 @@ pointing the `shareCss` relation at the matching note – see
## Features ## 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). (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. - 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
@@ -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_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_base.css` | **Base stylesheet** (layout/components, palette-independent, var()-driven) | code, `text/css` | | `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_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_harbor.css` | Harbor / Harbordark share theme | code, `text/css` |
| `theme/blog_share_theme_gruvbox.css` | Gruvbox light/dark 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 | | 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_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_harbor.css` | `theme/blog_share_theme_harbor.css` | `text/css` |
| `blog_share_theme_gruvbox.css` | `theme/blog_share_theme_gruvbox.css` | `text/css` | | `blog_share_theme_gruvbox.css` | `theme/blog_share_theme_gruvbox.css` | `text/css` |
@@ -325,7 +329,7 @@ server {
## Customisation ## 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 `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 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. CSS variables, so they adapt automatically to whichever theme is active.
Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

+3 -2
View File
@@ -9,13 +9,14 @@ note IDs are given for reference.
| Theme | Repo file | Live note | Dark / light | | 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 | | Coffee (default) | `theme/blog_share_theme_coffee.css` | `NqZXcFRGi3II` | espresso / latte-cream |
| Harbor | `theme/blog_share_theme_harbor.css` | `Ep54EDTwKxup` | harbordark / paper | | Harbor | `theme/blog_share_theme_harbor.css` | `Ep54EDTwKxup` | harbordark / paper |
| Gruvbox | `theme/blog_share_theme_gruvbox.css` | `edhL5cByGwqA` | gruvbox dark / light | | Gruvbox | `theme/blog_share_theme_gruvbox.css` | `edhL5cByGwqA` | gruvbox dark / light |
| Solarized | `theme/blog_share_theme_solarized.css` | `UFxPR5IpTyfj` | base03 / base3 | | Solarized | `theme/blog_share_theme_solarized.css` | `UFxPR5IpTyfj` | base03 / base3 |
| Tokyo Night | `theme/blog_share_theme_tokyonight.css` | `bf1OKYo3msZm` | storm / day | | 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 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 (`--background-primary` for the canvas, `--background-active` for the model material), so it adapts
automatically to whichever theme is active – no script changes needed. 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. 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`.
File diff suppressed because one or more lines are too long