diff --git a/Screenshot tour.md b/Screenshot tour.md index 2e4bb56..ed4bb11 100644 --- a/Screenshot tour.md +++ b/Screenshot tour.md @@ -1,2 +1,27 @@ -Sometimes the fastest way to assess the software is just through screenshots so here they are. +Sometimes the fastest way to assess the software is just through screenshots so here they are: +[[images/screenshot.png]] + +[[images/dark-theme.png]] + +See [[Theming]]. + +[[images/code-note.png]] + +[[images/day-notes.png]] + +See [[Day notes]]. + +[[images/weight-tracker.png]] + +See [[Weight tracker]]. + +[[images/family-tree.png]] + +[[images/family-tree-queen.png]] + +See [[Family tree]]. + +[[images/task-manager.png]] + +See [[Task manager]]. \ No newline at end of file diff --git a/Themes.md b/Themes.md new file mode 100644 index 0000000..ba59d26 --- /dev/null +++ b/Themes.md @@ -0,0 +1,15 @@ +Trilium by default comes with few color themes, with white being the default. To switch to dark theme, you just need to go to Options (top-right) -> Appearance tab and change the theme. + +This is how it looks like: + +[[images/dark-theme.png]] + +## Custom CSS + +Trilium allows you to create custom CSS which is attached to the main HTML page. With this you can customize the look of Trilium all you want. + +This is also useful in the context of [[scripting|scripts]] where you may want to e.g. change colors of notes in the tree (as used in [[Task manager]]). + +To do this, just create a code note with CSS type, put your custom CSS code into the note's content and create "appCss" [[label|Attributes]]. When Trilium frontend starts, all notes with "appCss" label 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. diff --git a/Theming.md b/Theming.md deleted file mode 100644 index 867bb24..0000000 --- a/Theming.md +++ /dev/null @@ -1,41 +0,0 @@ -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" [[label|Labels]]. When Trilium frontend starts, all notes with "app_css" label 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]] \ No newline at end of file diff --git a/Weight tracker.md b/Weight tracker.md index 7039e34..cc54fcd 100644 --- a/Weight tracker.md +++ b/Weight tracker.md @@ -1,6 +1,6 @@ Weight Tracker is a [[Script API]] showcase present in the [[demo document|Document#demo-document]]. -[[Day notes]] shows (among others) how we have "weight" [[promoted attribute|promoted attributes]] in the day note [[template]]. This then aggregates the data and shows a nice graph of weight change in time. +[[Day notes]] shows (among others) how we have "weight" [[promoted attribute|promoted attributes]] in the day note [[template]]. This then aggregates the data and shows a nice chart of weight change in time. ## Demo [[images/weight-tracker.png]] @@ -9,7 +9,7 @@ Weight Tracker is a [[Script API]] showcase present in the [[demo document|Docum Note "Weight Tracker" in the screenshot above is of type "Render HTML note". Such note doesn't have any useful content itself, the only purpose of it is to provide a place where some [[script|scripts]] can render some output. This script is defined in [[relation|attributes]] `renderNote` - coincidentally it's the Weight Tracker's child `Implementation`. -This Implementation code note then contains some HTML and JavaScript which loads all the notes with "weight" attribute and displays them in a graph. To actually render graph we're using third party library [chart.js](https://www.chartjs.org/) which is imported as an attachment (it's not built-in into Trilium). +This Implementation code note then contains some HTML and JavaScript which loads all the notes with "weight" attribute and displays them in a chart. To actually render chart we're using third party library [chart.js](https://www.chartjs.org/) which is imported as an attachment (it's not built-in into Trilium). ### JS code To get an idea of the script, here's the "JS code" note content: diff --git a/_Sidebar.md b/_Sidebar.md index ab7d081..26fb735 100644 --- a/_Sidebar.md +++ b/_Sidebar.md @@ -11,6 +11,7 @@ * [[Protected notes]] * [[Search]] * [[Keyboard shortcuts]] + * [[Themes]] * Installation & setup * [[Server installation]] * [[Packaged server binary]] diff --git a/images/black-css.png b/images/black-css.png deleted file mode 100644 index 4e2485d..0000000 Binary files a/images/black-css.png and /dev/null differ diff --git a/images/code-note.png b/images/code-note.png new file mode 100644 index 0000000..cb466bf Binary files /dev/null and b/images/code-note.png differ diff --git a/images/dark-theme.png b/images/dark-theme.png new file mode 100644 index 0000000..087d867 Binary files /dev/null and b/images/dark-theme.png differ diff --git a/images/grey-css.png b/images/grey-css.png deleted file mode 100644 index 832fb79..0000000 Binary files a/images/grey-css.png and /dev/null differ diff --git a/images/screenshot.png b/images/screenshot.png index 18f88c5..a8c6e04 100644 Binary files a/images/screenshot.png and b/images/screenshot.png differ