91 lines
4.9 KiB
Markdown
91 lines
4.9 KiB
Markdown
# Trilium Themes
|
||
|
||
Gruvbox, Harbor, Coffee, Solarized and Tokyo Night 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) |
|
||
| **Solarized** | `solarized-dark.css` | `solarized-light.css` | [Solarized by Ethan Schoonover](https://ethanschoonover.com/solarized/) (MIT) |
|
||
| **Tokyo Night** | `tokyonight-dark.css` | `tokyonight-light.css` | [tokyonight.nvim](https://github.com/folke/tokyonight.nvim) (Apache-2.0) |
|
||
|
||
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` |
|
||
| Solarized | bg `#002b36` / fg `#839496` · blue `#268bd2` cyan `#2aa198` | bg `#fdf6e3` / fg `#657b83` · blue `#268bd2` |
|
||
| Tokyo Night | bg `#24283b` / fg `#c0caf5` · blue `#7aa2f7` magenta `#bb9af7` | bg `#e1e2e7` / fg `#3760bf` · blue `#2e7de9` red `#f52a65` |
|
||
|
||
## 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
|
||
```
|
||
|
||
## Gitea themes (same palettes)
|
||
|
||
The same five families are available for [Gitea](https://gitea.io) in [`gitea/`](gitea/). They use the
|
||
identical palettes as the Trilium themes, so the web app and your Gitea instance stay consistent.
|
||
|
||
| Theme | Dark | Light |
|
||
|---|---|---|
|
||
| **Gruvbox** | `theme-gitea-gruvbox.css` | – |
|
||
| **Harbor** | `theme-gitea-harbor.css` | `theme-gitea-harbor-light.css` |
|
||
| **Coffee** | `theme-gitea-coffee.css` | `theme-gitea-coffee-latte.css` |
|
||
| **Solarized** | `theme-gitea-solarized.css` | `theme-gitea-solarized-light.css` |
|
||
| **Tokyo Night** | `theme-gitea-tokyonight.css` | `theme-gitea-tokyonight-light.css` |
|
||
|
||
Installation (Gitea 1.27+):
|
||
|
||
1. Copy the wanted `theme-gitea-<name>.css` into Gitea's `public/assets/css/` (Docker example:
|
||
`/var/lib/docker/volumes/git/_data/gitea/public/assets/css`).
|
||
2. Add the theme name to `[ui] THEMES` in `app.ini` and set `DEFAULT_THEME` to it:
|
||
|
||
```ini
|
||
[ui]
|
||
THEMES = gitea,arc-green,<theme-name>
|
||
DEFAULT_THEME = <theme-name>
|
||
```
|
||
|
||
3. Restart Gitea, then pick the theme from **Explore → Preferences → UI theme**.
|
||
|
||
## 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
|
||
|
||
Released under the **MIT License** – see [`LICENSE`](LICENSE). Copyright © 2026 Richard Zink.
|
||
|
||
The color schemes are derived from the following repositories (all **MIT licensed**, see the header
|
||
comment in each theme file):
|
||
|
||
- **Gruvbox** – [morhetz/gruvbox](https://github.com/morhetz/gruvbox)
|
||
- **Harbor / Harbordark** – [HANCORE-linux/omarchy-harbor-theme](https://github.com/HANCORE-linux/omarchy-harbordark-theme) and [omarchy-harbordark-theme](https://github.com/HANCORE-linux/omarchy-harbordark-theme)
|
||
- **Coffee / Coffee Latte** – [megabyte0x/omarchy-coffee-theme](https://github.com/megabyte0x/omarchy-coffee-theme) and [omarchy-coffee-latte-theme](https://github.com/megabyte0x/omarchy-coffee-latte-theme)
|
||
- **Solarized** – [ethanschoonover.com/solarized](https://ethanschoonover.com/solarized/) (MIT)
|
||
- **Tokyo Night / Day** – [folke/tokyonight.nvim](https://github.com/folke/tokyonight.nvim) (Apache-2.0) |