Inside this blog: a share-notes engine with a themable frontend

Why this post exists#

I run this blog as a public share of my personal knowledge base. This post documents how the blogging system works, because the pieces are easy to reuse: a shared-notes CMS, a themable frontend, and a matching theme set that also covers the Trilium app and Gitea.

How it works#

The content lives in Trilium (a note-taking app with a built-in public share feature). Notes are the unit of everything here – no Markdown files, no build step.

I write an article as a normal note under Unpublished/<Category>.
Labels control the output: date, summary, category, tags, iconClass.
Setting publish=true clones the note into the blog tree and runs a generator.

The generator (blog_generator, a Trilium backend script) maintains the start page, the category pages, the RSS feed (feed.xml), the sitemap, the tags overview with individual tag pages, and per-article SEO meta (shareDescription, Open Graph, JSON-LD, canonical URLs).

The public side is a custom share template (EJS, rendered by Trilium). It hooks into five placeholders, so reusable snippets can be attached per location:

Location	Purpose
`head:start` / `head:end`	fonts, favicon, meta overrides
`body:start`	header/search widgets
`content:start` / `content:end`	post-processing of the rendered note content
`body:end`	interactive widgets, shared JavaScript

Current snippets include: highlight.js with line numbers, a 3D model viewer (STL + STEP via OpenCascade WASM, with an "electron microscope" shader render mode), Mermaid diagram styling, mind maps / Excalidraw styling, a theme-aware header search, and a prev/next navigation. All of them read the theme's CSS variables instead of hard-coded colors, so they follow the active palette automatically.

Themes#

The blog ships with five theme families – Gruvbox, Harbor, Coffee, Solarized and Tokyo Night – each as a plain CSS note that overrides the Trilium share variables (--background-primary, --text-primary, --text-link, and so on). The site is dark by default and comes with a light/dark switch in the header; the 3D viewer, code highlighting, tables and diagrams pick up their accent colors from the same variables in both modes.

Theme	Background	Foreground	Accents (dark)
Gruvbox (active)	`#282828`	`#ebdbb2`	green `#b8bb26` · yellow `#fabd2f` · blue `#83a598` · aqua `#8ec07c`
Harbor	`#1b1b1b`	`#efebdc`	coral `#e75a50` · sage `#a99b7a` · slate `#77838a`
Coffee	`#1d150f`	`#f0e2d0`	caramel `#e0a15c` · green `#cdb878` · cream `#ffda92`
Solarized	`#002b36`	`#839496`	blue `#268bd2` · green `#859900` · cyan `#2aa198` · yellow `#b58900`
Tokyo Night	`#24283b`	`#c0caf5`	blue `#7aa2f7` · green `#9ece6a` · yellow `#e0af68` · magenta `#bb9af7`

Palettes at a glance#

Every family is shown below in its dark and light variant. The theme names link to the original repository the palette is derived from (license in parentheses).

Gruvbox – morhetz/gruvbox (MIT)

Harbor – HANCORE-linux/omarchy-harbordark-theme (MIT)

Coffee – megabyte0x/omarchy-coffee-theme (MIT)

Solarized – Solarized by Ethan Schoonover (MIT)

Tokyo Night – folke/tokyonight.nvim (Apache-2.0)

Repositories#

Two repos on my Gitea instance hold everything, so the whole look can be reused and kept in sync.

Blog engine and blog themes – zink/trilium_share_gruvbox

The share template, all snippets (scripts/), and the five blog theme CSS files (theme/blog_share_theme_*.css), plus the generator and a switch guide.
Identifiers and example note IDs are anonymised so the repo doubles as a template for your own Trilium share blog.

App and Gitea themes – zink/trilium-themes

The same five palettes as dark + light variants for the Trilium app itself (registered as appTheme code notes, installable via Options → Appearance).
The identical palettes as Gitea themes in gitea/ – copy a theme-gitea-<name>.css into Gitea's public/assets/css/, add it to [ui] THEMES and set DEFAULT_THEME.

Using both repos together keeps the Trilium web app, this blog and the Gitea instance visually consistent – same background, same foreground, same accent colors everywhere.

Status#

The system is in daily use. Next up: light-mode polish for the remaining widgets, a proper search index, and tagging the garden notes into the blog taxonomy.