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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+9 -5
View File
@@ -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.