Adjust next theme development docu (#8616)

apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme.html

@@ -60,7 +60,7 @@
 </p>
 <h2>Step 5. Making changes</h2>
 <p>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
+  changes to the current window, press <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>R</kbd> to
   refresh.</p>
 <p>It's a good idea to keep two windows, one for editing and the other one
   for previewing the changes.</p>

apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Creating an icon pack.html

@@ -1,5 +1,5 @@
 <aside class="admonition note">
-  <p>e This page describes how to create custom icon packs. For a general description
+  <p>This page describes how to create custom icon packs. For a general description
     of how to use already existing icon packs, see&nbsp;<a class="reference-link"
     href="#root/_help_gOKqSJgXLcIj">Icon Packs</a>.</p>
 </aside>
@@ -74,9 +74,9 @@
 		"bx-ball": {
 			"glyph": "\ue9c2",
 			"terms": [ "ball" ]
-		},		
+		},
 		"bxs-party": {
-			"glyph": "\uec92"
+			"glyph": "\uec92",
 			"terms": [ "party" ]
 		}
 	}

apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Customize the Next theme.html

@@ -18,7 +18,8 @@
 </ul>
 <h2>Overrides</h2>
 <p>Do note that the TriliumNext theme has a few more overrides than the legacy
-  theme, so you might need to suffix <code spellcheck="false">!important</code> if
-  the style changes are not applied.</p><pre><code class="language-text-css">:root {
-	--launcher-pane-background-color: #0d6efd !important;
+  theme. Due to that, it is recommended to use <code spellcheck="false">#trilium-app</code> with
+  a next theme instead of the <code spellcheck="false">:root</code> of a legacy
+  theme.</p><pre><code class="language-text-css">#trilium-app {
+	--launcher-pane-background-color: #0d6efd;
 }</code></pre>

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

@@ -41,6 +41,6 @@ Do note that the theme will be based off of the legacy theme. To override that a
 
 ## 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.
+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/Creating an icon pack.md

@@ -1,6 +1,6 @@
 # Creating an icon pack
 > [!NOTE]
-> e This page describes how to create custom icon packs. For a general description of how to use already existing icon packs, see <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Themes/Icon%20Packs.md">Icon Packs</a>.
+> This page describes how to create custom icon packs. For a general description of how to use already existing icon packs, see <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Themes/Icon%20Packs.md">Icon Packs</a>.
 
 ## Supported formats
 
@@ -49,9 +49,9 @@ The icon pack manifest is a JSON file with the following structure:
 		"bx-ball": {
 			"glyph": "\ue9c2",
 			"terms": [ "ball" ]
-		},		
+		},
 		"bxs-party": {
-			"glyph": "\uec92"
+			"glyph": "\uec92",
 			"terms": [ "party" ]
 		}
 	}

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

@@ -12,10 +12,10 @@ The `appThemeBase` label can be set to one of the following values:
 
 ## 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.
+Do note that the TriliumNext theme has a few more overrides than the legacy theme. Due to that, it is recommended to use `#trilium-app` with a next theme instead of the `:root` of a legacy theme.
 
 ```css
-:root {
-	--launcher-pane-background-color: #0d6efd !important;
+#trilium-app {
+	--launcher-pane-background-color: #0d6efd;
 }
 ```