chore(docs): minor updates

Author: eliandoran

src/public/app/doc_notes/en/User Guide/!!!meta.json

@@ -1,6 +1,6 @@
 {
 	"formatVersion": 2,
-	"appVersion": "0.91.6-test-250214-024424",
+	"appVersion": "0.91.6-test-250217-024840",
 	"files": [
 		{
 			"isClone": false,
@@ -11,7 +11,7 @@
 			"title": "User Guide",
 			"notePosition": 20,
 			"prefix": null,
-			"isExpanded": false,
+			"isExpanded": true,
 			"type": "text",
 			"mime": "text/html",
 			"attributes": [
@@ -27,135 +27,6 @@
 			"attachments": [],
 			"dirFileName": "User Guide",
 			"children": [
-				{
-					"isClone": false,
-					"noteId": "jrai60LsOhdk",
-					"notePath": [
-						"OkOZllzB3fqN",
-						"jrai60LsOhdk"
-					],
-					"title": "Installation",
-					"notePosition": 20,
-					"prefix": null,
-					"isExpanded": false,
-					"type": "text",
-					"mime": "text/html",
-					"attributes": [
-						{
-							"type": "relation",
-							"name": "internalLink",
-							"value": "KPeRqBU7YSAY",
-							"isInheritable": false,
-							"position": 10
-						},
-						{
-							"type": "label",
-							"name": "hideChildrenOverview",
-							"value": "",
-							"isInheritable": false,
-							"position": 10
-						}
-					],
-					"format": "html",
-					"dataFileName": "Installation.html",
-					"attachments": [
-						{
-							"attachmentId": "Mp9RaDeLtETz",
-							"title": "Fedora_logo.svg",
-							"role": "image",
-							"mime": "image/svg+xml",
-							"position": 10,
-							"dataFileName": "Installation_Fedora_logo.svg"
-						}
-					],
-					"dirFileName": "Installation",
-					"children": [
-						{
-							"isClone": false,
-							"noteId": "KPeRqBU7YSAY",
-							"notePath": [
-								"OkOZllzB3fqN",
-								"jrai60LsOhdk",
-								"KPeRqBU7YSAY"
-							],
-							"title": "On Fedora Linux",
-							"notePosition": 10,
-							"prefix": null,
-							"isExpanded": false,
-							"type": "text",
-							"mime": "text/html",
-							"attributes": [
-								{
-									"type": "label",
-									"name": "iconClass",
-									"value": "bx bxl-tux",
-									"isInheritable": false,
-									"position": 10
-								}
-							],
-							"format": "html",
-							"dataFileName": "On Fedora Linux.html",
-							"attachments": [
-								{
-									"attachmentId": "YHD8kyEhgkyZ",
-									"title": "Screenshot From 2025-02-05 19-30-50.png",
-									"role": "image",
-									"mime": "image/png",
-									"position": 10,
-									"dataFileName": "On Fedora Linux_Screenshot.png"
-								},
-								{
-									"attachmentId": "0CpZ5v5xUMia",
-									"title": "Screenshot From 2025-02-05 19-35-45.png",
-									"role": "image",
-									"mime": "image/png",
-									"position": 10,
-									"dataFileName": "1_On Fedora Linux_Screenshot.png"
-								},
-								{
-									"attachmentId": "9u7nBYvUbXJW",
-									"title": "image.png",
-									"role": "image",
-									"mime": "image/png",
-									"position": 10,
-									"dataFileName": "On Fedora Linux_image.png"
-								},
-								{
-									"attachmentId": "ipGBq0moRvF3",
-									"title": "Screenshot From 2025-02-05 19-36-27.png",
-									"role": "image",
-									"mime": "image/png",
-									"position": 10,
-									"dataFileName": "2_On Fedora Linux_Screenshot.png"
-								},
-								{
-									"attachmentId": "fa83WbDUIB4G",
-									"title": "image.png",
-									"role": "image",
-									"mime": "image/png",
-									"position": 10,
-									"dataFileName": "1_On Fedora Linux_image.png"
-								},
-								{
-									"attachmentId": "kcCWr0YXytOU",
-									"title": "Screenshot From 2025-02-05 19-30-30.png",
-									"role": "image",
-									"mime": "image/png",
-									"position": 10,
-									"dataFileName": "3_On Fedora Linux_Screenshot.png"
-								},
-								{
-									"attachmentId": "YF3JZy1qz7Fq",
-									"title": "image.png",
-									"role": "image",
-									"mime": "image/png",
-									"position": 10,
-									"dataFileName": "2_On Fedora Linux_image.png"
-								}
-							]
-						}
-					]
-				},
 				{
 					"isClone": false,
 					"noteId": "yoAe4jV2yzbd",
@@ -166,7 +37,7 @@
 					"title": "Features",
 					"notePosition": 40,
 					"prefix": null,
-					"isExpanded": true,
+					"isExpanded": false,
 					"type": "text",
 					"mime": "text/html",
 					"attributes": [],
@@ -314,7 +185,7 @@
 					"title": "Note Types",
 					"notePosition": 70,
 					"prefix": null,
-					"isExpanded": true,
+					"isExpanded": false,
 					"type": "text",
 					"mime": "text/html",
 					"attributes": [],
@@ -548,7 +419,7 @@
 							"title": "Book",
 							"notePosition": 30,
 							"prefix": null,
-							"isExpanded": true,
+							"isExpanded": false,
 							"type": "text",
 							"mime": "text/html",
 							"attributes": [

src/public/app/doc_notes/en/User Guide/User Guide/Advanced usage/Theme development/Reference.html

@@ -13,6 +13,37 @@
        <h1 data-trilium-h1>Reference</h1>
 
       <div class="ck-content">
+        <h2>Detecting mobile vs. desktop</h2>
+        <p>The mobile layout is different than the one on the desktop. Use <code>body.mobile</code> and <code>body.desktop</code> to
+          differentiate between them.</p><pre><code class="language-text-css">body.mobile #root-widget {
+	/* Do something on mobile */
+}
+
+body.desktop #root-widget {
+	/* Do something on desktop */
+}</code></pre>
+        <p>Do note that there is also a “tablet mode” in the mobile layout. For that
+          particular case media queries are required:</p><pre><code class="language-text-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 */
+
+    }
+
+}</code></pre>
         <h2>Detecting horizontal vs. vertical layout</h2>
         <p>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
@@ -85,14 +116,14 @@ <h4>On Windows</h4>
         <h4>On macOS</h4>
         <p>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:</p><pre><code class="language-text-x-trilium-auto">body {
+          using:</p><pre><code class="language-text-css">body {
     --native-titlebar-darwin-x-offset: 12;
     --native-titlebar-darwin-y-offset: 14 !important;
 }</code></pre>
         <h3>Background/transparency effects on Windows (Mica)</h3>
         <p>Windows 11 offers a special background/transparency effect called Mica,
           which can be enabled by themes by setting the <code>--background-material</code> variable
-          at <code>body</code> level:</p><pre><code class="language-text-x-trilium-auto">body.electron.platform-win32 {
+          at <code>body</code> level:</p><pre><code class="language-text-css">body.electron.platform-win32 {
 	--background-material: tabbed; 
 }</code></pre>
         <p>The value can be either <code>tabbed</code> (especially useful for the horizontal
@@ -104,12 +135,12 @@ <h2>Note icons, tab workspace accent color</h2>
         <p>Theme capabilities are small adjustments done through CSS variables that
           can affect the layout or the visual aspect of the application.</p>
         <p>In the tab bar, to display the icons of notes instead of the icon of the
-          workspace:</p><pre><code class="language-text-x-trilium-auto">:root {
+          workspace:</p><pre><code class="language-text-css">:root {
 	--tab-note-icons: true;
 }</code></pre>
         <p>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:</p><pre><code class="language-text-x-trilium-auto">.note-tab .note-tab-wrapper {
+          on the tab instead of the whole background color:</p><pre><code class="language-text-css">.note-tab .note-tab-wrapper {
     --tab-background-color: initial !important;
 }
 
@@ -127,6 +158,21 @@ <h2>Custom fonts</h2>
           href="../Custom%20resource%20providers.html">Custom resource providers</a>.
           Basically import a font into Trilium and assign it <code>#customResourceProvider=fonts/myfont.ttf</code> and
           then import the font in CSS via <code>/custom/fonts/myfont.ttf</code>.</p>
+        <h2>Dark and light themes</h2>
+        <p>A light theme needs to have the following CSS:</p><pre><code class="language-text-css">:root {
+	--theme-style: light;
+}</code></pre>
+        <p>if the theme is dark, then <code>--theme-style</code> needs to be <code>dark</code>.</p>
+        <p>If the theme is auto (e.g. supports both light or dark based on <code>prefers-color-scheme</code>)
+          it must also declare (in addition to setting <code>--theme-style</code> to
+          either <code>light</code> or <code>dark</code>):</p><pre><code class="language-text-css">:root {
+
+    --theme-style-auto: true;
+
+}</code></pre>
+        <p>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).</p>
       </div>
     </div>
   </body>