52 lines
2.6 KiB
Markdown
52 lines
2.6 KiB
Markdown
# 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. |