mirror of
https://github.com/zadam/trilium.git
synced 2024-12-27 01:34:05 +08:00
added Theming page
parent
4997024457
commit
e22a92c77b
3 changed files with 41 additions and 0 deletions
41
Theming.md
Normal file
41
Theming.md
Normal file
|
@ -0,0 +1,41 @@
|
|||
Trilium doesn't come (yet) with any built-in themes, but allows you to create custom CSS which is attached to the main HTML page.
|
||||
|
||||
Just create a code note with CSS type, put your custom CSS code into the note's content and create "app_css" [[attribute|Attributes]]. When Trilium frontend starts, all notes with "app_css" attribute are appended in the style element of the Trilium HTML page.
|
||||
|
||||
Once you made your changes, you can reload the Trilium frontend by pressing CTRL-R after which the changes will take effect.
|
||||
|
||||
The reason why the CSS is stored in the (code) note instead of e.g. file in the Trilium folder is that as a note it can be automatically synced and versioned.
|
||||
|
||||
## Night mode
|
||||
|
||||
```CSS
|
||||
html, img, video {
|
||||
filter: invert(100%) hue-rotate(180deg);
|
||||
}
|
||||
|
||||
body {
|
||||
background: black;
|
||||
}
|
||||
```
|
||||
|
||||
[[images/black-css.png]]
|
||||
|
||||
### Grey night mode
|
||||
|
||||
Following grey CSS is less contrasty which might be easier on the eyes. The disadvantage is that it casts (barely) noticeable greyish color on the images.
|
||||
|
||||
```CSS
|
||||
html {
|
||||
filter: invert(90%) hue-rotate(180deg);
|
||||
}
|
||||
|
||||
img, video {
|
||||
filter: invert(100%) hue-rotate(180deg);
|
||||
}
|
||||
|
||||
body {
|
||||
background: #191819;
|
||||
}
|
||||
```
|
||||
|
||||
[[images/grey-css.png]]
|
BIN
images/black-css.png
Normal file
BIN
images/black-css.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 62 KiB |
BIN
images/grey-css.png
Normal file
BIN
images/grey-css.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 69 KiB |
Loading…
Reference in a new issue