From f90cc9aff7a23163dd55f237f31ff8499c2dcd28 Mon Sep 17 00:00:00 2001 From: hulmgulm Date: Wed, 4 Feb 2026 20:39:58 +0100 Subject: [PATCH] Adjust theme development docu --- .../Creating a custom theme.html | 67 ++++++++++--------- .../Creating an icon pack.html | 4 +- .../Customize the Next theme.html | 7 +- .../Creating an icon pack.md | 4 +- .../Customize the Next theme.md | 6 +- 5 files changed, 45 insertions(+), 43 deletions(-) diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme.html index ea74ba4d44..3311ca3f82 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme.html @@ -7,38 +7,39 @@

Step 2. Create the theme

- - - - - - - - - - - - - - - - - - - - - -
- - Themes are code notes with a special attribute. Start by creating a new - code note.
- - Then change the note type to a CSS code.
- - 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.
- +
+ + + + + + + + + + + + + + + + + + + + + +
  
+ + Themes are code notes with a special attribute. Start by creating a new + code note.
+ + Then change the note type to a CSS code.
+ + 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.

@@ -60,7 +61,7 @@

Step 5. Making changes

Simply go back to the note and change according to needs. To apply the - changes to the current window, press Ctrl+Shift+R to + changes to the current window, press Ctrl+Shift+R to refresh.

It's a good idea to keep two windows, one for editing and the other one for previewing the changes.

\ No newline at end of file diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Creating an icon pack.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Creating an icon pack.html index 8aa3c00775..0256575f96 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Creating an icon pack.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Creating an icon pack.html @@ -1,5 +1,5 @@ @@ -74,7 +74,7 @@ "bx-ball": { "glyph": "\ue9c2", "terms": [ "ball" ] - }, + }, "bxs-party": { "glyph": "\uec92" "terms": [ "party" ] diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Customize the Next theme.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Customize the Next theme.html index dd72effbfd..32083ee809 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Customize the Next theme.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Customize the Next theme.html @@ -18,7 +18,8 @@

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.

:root {
-	--launcher-pane-background-color: #0d6efd !important;
+  theme. Due to that, it is recommended to use #trilium-app with
+  a next theme instead of the :root of a legacy
+  theme.
#trilium-app {
+	--launcher-pane-background-color: #0d6efd;
 }

\ No newline at end of file
diff --git a/docs/User Guide/User Guide/Theme development/Creating an icon pack.md b/docs/User Guide/User Guide/Theme development/Creating an icon pack.md
index 218c21b21b..06c5c97558 100644
--- a/docs/User Guide/User Guide/Theme development/Creating an icon pack.md	
+++ b/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 Icon Packs.
+> This page describes how to create custom icon packs. For a general description of how to use already existing icon packs, see Icon Packs.
 
 ## Supported formats
 
@@ -49,7 +49,7 @@ The icon pack manifest is a JSON file with the following structure:
 		"bx-ball": {
 			"glyph": "\ue9c2",
 			"terms": [ "ball" ]
-		},		
+		},
 		"bxs-party": {
 			"glyph": "\uec92"
 			"terms": [ "party" ]
diff --git a/docs/User Guide/User Guide/Theme development/Customize the Next theme.md b/docs/User Guide/User Guide/Theme development/Customize the Next theme.md
index 657199a67e..e5e1ad8860 100644
--- a/docs/User Guide/User Guide/Theme development/Customize the Next theme.md	
+++ b/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;
 }
 ```
\ No newline at end of file