Add Gruvbox, Harbor and Coffee themes for TriliumNext (dark + light)

2026-09-07 19:50:50 +02:00
commit 098fa1a9cb
7 changed files with 2530 additions and 0 deletions
@@ -0,0 +1,52 @@
+# Trilium Themes
+
+Gruvbox, Harbor and Coffee themes for [TriliumNext](https://github.com/TriliumNext/Trilium) –
+each available in a dark and a light variant. The themes are plain `text/css` files that override
+Trilium's `--*` variables on `#trilium-app` and the global menus.
+
+| Theme | Dark | Light | Source |
+|---|---|---|---|
+| **Gruvbox** | `gruvbox-dark.css` | `gruvbox-light.css` | [morhetz/gruvbox](https://github.com/morhetz/gruvbox) (MIT) |
+| **Harbor** | `harbor-dark.css` | `harbor-light.css` | [HANCORE-linux/omarchy-harbor-theme](https://github.com/HANCORE-linux/omarchy-harbordark-theme) (MIT) |
+| **Coffee** | `coffee-dark.css` | `coffee-latte.css` | [megabyte0x/omarchy-coffee-theme](https://github.com/megabyte0x/omarchy-coffee-theme) (MIT) |
+
+All variants are **fixed** (dark stays dark, light stays light) – Trilium user themes do not
+auto-switch with the system preference. Each theme is derived from Trilium's default `next` theme
+(`next-dark` / `next-light` as the base).
+
+## Palette overview
+
+| Family | Dark | Light |
+|---|---|---|
+| Gruvbox | bg `#282828` / fg `#ebdbb2` · red `#fb4934` green `#b8bb26` yellow `#fabd2f` | bg `#fbf1c7` / fg `#3c3836` · blue `#076678` aqua `#83a598` |
+| Harbor | bg `#1b1b1b` / fg `#efebdc` · coral `#e75a50` gold `#E1CE98` slate `#77838a` | bg `#dfe4c4` / fg `#1c2d28` · nord-blue `#5e81ac` |
+| Coffee | bg `#1d150f` / fg `#f0e2d0` · caramel `#e0a15c` cream-yellow `#ffda92` | bg `#E8E3C3` / fg `#2D1A1D` · berry `#8e2d53` |
+
+## Install in Trilium
+
+1. In Trilium create a **code note** (type `code`) with mime **`text/css`** under a folder of your
+   choice, e.g. `Resource & Templates`.
+2. Copy the contents of the theme file you want into the note.
+3. Add two labels to the note:
+   - `appTheme` → the display name, e.g. `Coffee` (shown in the theme dropdown)
+   - `appThemeBase` → `next-dark` for dark variants, `next-light` for light variants
+4. Reload the app, then go to **Options → Appearance → Theme** and pick your theme.
+
+Example attributes for the dark Coffee theme:
+
+```
+appTheme = Coffee
+appThemeBase = next-dark
+iconClass = bx bxs-coffee
+```
+
+## Customising
+
+The themes are variable-driven. Edit the `--*` values inside the `#trilium-app { ... }` block and the
+global `:root { ... }` block (menus/dropdowns render outside `#trilium-app`). The `.ck-content` rules
+at the bottom style note headers, tables and tree-lines per palette.
+
+## License
+
+The theme files are released under the **MIT License**. The color schemes are derived from the
+repositories listed above, which are all MIT licensed – see the header comment in each file.