screenshot tour

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]].

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.

Theming.md

@@ -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]]

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:

_Sidebar.md

@@ -11,6 +11,7 @@
   * [[Protected notes]]
   * [[Search]]
   * [[Keyboard shortcuts]]
+  * [[Themes]]
 * Installation & setup
   * [[Server installation]]
     * [[Packaged server binary]]