chore(monorepo): put back docs

docs/User Guide/User Guide/Theme development/Creating a custom theme.md

@@ -0,0 +1,46 @@
+# Creating a custom theme
+## Step 1. Find a place to place the themes
+
+Organization is an important aspect of managing a knowledge base. When developing a new theme or importing an existing one it's a good idea to keep them into one place.
+
+As such, the first step is to create a new note to gather all the themes.
+
+![](Creating%20a%20custom%20theme_5_.png)
+
+## Step 2. Create the theme
+
+|     |     |
+| --- | --- |
+| ![](Creating%20a%20custom%20theme_3_.png) | Themes are code notes with a special attribute. Start by creating a new code note. |
+| ![](Creating%20a%20custom%20theme_1_.png) | Then change the note type to a CSS code. |
+| ![](Creating%20a%20custom%20theme_Cr.png) | In the _Owned Attributes_ section define the `#appTheme` attribute to point to any desired name. This is the name that will show up in the appearance section in settings. |
+
+## Step 3. Define the theme's CSS
+
+As a very simple example we will change the background color of the launcher pane to a shade of blue.
+
+To alter the different variables of the theme:
+
+```css
+:root {
+	--launcher-pane-background-color: #0d6efd;
+}
+```
+
+## Step 4. Activating the theme
+
+Refresh the application (Ctrl+Shift+R is a good way to do so) and go to settings. You should see the newly created theme:
+
+![](Creating%20a%20custom%20theme_2_.png)
+
+Afterwards the application will refresh itself with the new theme:
+
+![](Creating%20a%20custom%20theme_4_.png)
+
+Do note that the theme will be based off of the legacy theme. To override that and base the theme on the new TriliumNext theme, see: [Theme base (legacy vs. next)](Customize%20the%20Next%20theme.md)
+
+## Step 5. Making changes
+
+Simply go back to the note and change according to needs. To apply the changes to the current window, press <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>R </kbd> to refresh.
+
+It's a good idea to keep two windows, one for editing and the other one for previewing the changes.

docs/User Guide/User Guide/Theme development/Custom app-wide CSS.md

@@ -0,0 +1,32 @@
+# Custom app-wide CSS
+It is possible to provide a CSS file to be used regardless of the theme set by the user.
+
+|     |     |
+| --- | --- |
+| ![](Custom%20app-wide%20CSS_image.png) | Start by creating a new note and changing the note type to CSS |
+| ![](1_Custom%20app-wide%20CSS_image.png) | In the ribbon, press the “Owned Attributes” section and type `#appCss`. |
+| ![](2_Custom%20app-wide%20CSS_image.png) | Type the desired CSS.  <br>  <br>Generally it's a good idea to append `!important` for the styles that are being changed, in order to prevent other |
+
+## Seeing the changes
+
+Adding a new _app CSS note_ or modifying an existing one does not immediately apply changes. To see the changes, press Ctrl+Shift+R to refresh the page first.
+
+## Example use-case: customizing the printing stylesheet
+
+When printing a document or exporting as PDF, it is possible to adjust the style by creating a CSS note that uses the `@media` selector.
+
+For example, to change the font of the document from the one defined by the theme or the user to a serif one:
+
+```
+@media print {
+
+	body {
+
+        --main-font-family: serif !important;
+
+        --detail-font-family: var(--main-font-family) !important;
+
+    }
+
+}
+```

docs/User Guide/User Guide/Theme development/Customize the Next theme.md

@@ -0,0 +1,21 @@
+# Customize the Next theme
+By default, any custom theme will be based on the legacy light theme. To use the TriliumNext theme instead, add the `#appThemeBase=next` attribute onto the existing theme. The `appTheme` attribute must also be present.
+
+![](Customize%20the%20Next%20theme_i.png)
+
+The `appThemeBase` label can be set to one of the following values:
+
+*   `next`, for the TriliumNext (auto light or dark mode).
+*   `next-light`, for the always light mode of the TriliumNext.
+*   `next-dark`, for the always dark mode of the TriliumNext.
+*   Any other value is ignored and will use the legacy white theme instead.
+
+## Overrides
+
+Do note that the TriliumNext theme has a few more overrides than the legacy theme, so you might need to suffix `!important` if the style changes are not applied.
+
+```css
+:root {
+	--launcher-pane-background-color: #0d6efd !important;
+}
+```

docs/User Guide/User Guide/Theme development/Reference.md

@@ -0,0 +1,198 @@
+# Reference
+## Detecting mobile vs. desktop
+
+The mobile layout is different than the one on the desktop. Use `body.mobile` and `body.desktop` to differentiate between them.
+
+```css
+body.mobile #root-widget {
+	/* Do something on mobile */
+}
+
+body.desktop #root-widget {
+	/* Do something on desktop */
+}
+```
+
+Do note that there is also a “tablet mode” in the mobile layout. For that particular case media queries are required:
+
+```css
+@media (max-width: 991px) {
+
+    #launcher-pane {
+
+        /* Do something on mobile layout */
+
+    }
+
+}
+
+
+
+@media (min-width: 992px) {
+
+    #launcher-pane {
+
+        /* Do something on mobile tablet + desktop layout */
+
+    }
+
+}
+```
+
+## Detecting horizontal vs. vertical layout
+
+The user can select between vertical layout (the classical one, where the launcher bar is on the left) and a horizontal layout (where the launcher bar is on the top and tabs are full-width).
+
+Different styles can be applied by using classes at `body` level:
+
+```
+body.layout-vertical #left-pane {
+	/* Do something */
+}
+
+body.layout-horizontal #center-pane {
+	/* Do something else */	
+}
+```
+
+The two different layouts use different containers (but they are present in the DOM regardless of the user's choice), for example `#horizontal-main-container` and `#vertical-main-container` can be used to customize the background of the content section.
+
+## Detecting platform (Windows, macOS) or Electron
+
+It is possible to add particular styles that only apply to a given platform by using the classes in `body`:
+
+| Windows | macOS |
+| --- | --- |
+| `<br>body.platform-win32 {<br> background: red;<br>}<br>` | `<br>body.platform-darwin {<br> background: red;<br>}<br>` |
+
+It is also possible to only apply a style if running under Electron (desktop application):
+
+```
+body.electron {
+	background: blue;
+}
+```
+
+### Native title bar
+
+It's possible to detect if the user has selected the native title bar or the custom title bar by querying against `body`:
+
+```
+body.electron.native-titlebar {
+	/* Do something */
+}
+
+body.electron:not(.native-titlebar) {
+	/* Do something else */
+}
+```
+
+### Native window buttons
+
+When running under Electron with native title bar off, a feature was introduced to use the platform-specific window buttons such as the semaphore on macOS.
+
+See [Native title bar buttons by eliandoran · Pull Request #702 · TriliumNext/Notes](https://github.com/TriliumNext/Notes/pull/702) for the original implementation of this feature, including screenshots.
+
+#### On Windows
+
+The colors of the native window button area can be adjusted using a RGB hex color:
+
+```
+body {
+	--native-titlebar-foreground: #ffffff;
+	--native-titlebar-background: #ff0000;
+}
+```
+
+It is also possible to use transparency at the cost of reduced hover colors using a RGBA hex color:
+
+```
+body {
+	--native-titlebar-background: #ff0000aa;
+}
+```
+
+Note that the value is read when the window is initialized and then it is refreshed only when the user changes their light/dark mode preference.
+
+#### On macOS
+
+On macOS the semaphore window buttons are enabled by default when the native title bar is disabled. The offset of the buttons can be adjusted using:
+
+```css
+body {
+    --native-titlebar-darwin-x-offset: 12;
+    --native-titlebar-darwin-y-offset: 14 !important;
+}
+```
+
+### Background/transparency effects on Windows (Mica)
+
+Windows 11 offers a special background/transparency effect called Mica, which can be enabled by themes by setting the `--background-material` variable at `body` level:
+
+```css
+body.electron.platform-win32 {
+	--background-material: tabbed; 
+}
+```
+
+The value can be either `tabbed` (especially useful for the horizontal layout) or `mica` (ideal for the vertical layout).
+
+Do note that the Mica effect is applied at `body` level and the theme needs to make the entire hierarchy (semi-)transparent in order for it to be visible. Use the TrilumNext theme as an inspiration.
+
+## Note icons, tab workspace accent color
+
+Theme capabilities are small adjustments done through CSS variables that can affect the layout or the visual aspect of the application.
+
+In the tab bar, to display the icons of notes instead of the icon of the workspace:
+
+```css
+:root {
+	--tab-note-icons: true;
+}
+```
+
+When a workspace is hoisted for a given tab, it is possible to get the background color of that workspace, for example to apply a small strip on the tab instead of the whole background color:
+
+```css
+.note-tab .note-tab-wrapper {
+    --tab-background-color: initial !important;
+}
+
+.note-tab .note-tab-wrapper::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background-color: var(--workspace-tab-background-color);
+}
+```
+
+## Custom fonts
+
+Currently the only way to include a custom font is to use [Custom resource providers](../Advanced%20Usage/Custom%20Resource%20Providers.md). Basically import a font into Trilium and assign it `#customResourceProvider=fonts/myfont.ttf` and then import the font in CSS via `/custom/fonts/myfont.ttf`.
+
+## Dark and light themes
+
+A light theme needs to have the following CSS:
+
+```css
+:root {
+	--theme-style: light;
+}
+```
+
+if the theme is dark, then `--theme-style` needs to be `dark`.
+
+If the theme is auto (e.g. supports both light or dark based on `prefers-color-scheme`) it must also declare (in addition to setting `--theme-style` to either `light` or `dark`):
+
+```css
+:root {
+
+    --theme-style-auto: true;
+
+}
+```
+
+This will affect the behavior of the Electron application by informing the operating system of the color preference (e.g. background effects will appear correct on Windows).