From f90cc9aff7a23163dd55f237f31ff8499c2dcd28 Mon Sep 17 00:00:00 2001 From: hulmgulm Date: Wed, 4 Feb 2026 20:39:58 +0100 Subject: [PATCH 1/2] 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

From e82ae762f0f4a454cfbef2b2fb80090493938e0d Mon Sep 17 00:00:00 2001
From: hulmgulm 
Date: Wed, 4 Feb 2026 20:48:36 +0100
Subject: [PATCH 2/2] More fixes

---
 .../Creating a custom theme.html              | 67 +++++++++----------
 .../Creating an icon pack.html                |  2 +-
 .../Creating a custom theme.md                |  2 +-
 .../Creating an icon pack.md                  |  2 +-
 4 files changed, 36 insertions(+), 37 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 3311ca3f82..0496700e82 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,39 +7,38 @@
   
 

 
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.

@@ -61,7 +60,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 0256575f96..d5649a2028 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	
@@ -76,7 +76,7 @@
 			"terms": [ "ball" ]
 		},
 		"bxs-party": {
-			"glyph": "\uec92"
+			"glyph": "\uec92",
 			"terms": [ "party" ]
 		}
 	}
diff --git a/docs/User Guide/User Guide/Theme development/Creating a custom theme.md b/docs/User Guide/User Guide/Theme development/Creating a custom theme.md
index 12334c6cae..0a39e2f6e2 100644
--- a/docs/User Guide/User Guide/Theme development/Creating a custom theme.md	
+++ b/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 Ctrl+Shift+R  to refresh.
+Simply go back to the note and change according to needs. To apply the 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/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 06c5c97558..20bc897899 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	
@@ -51,7 +51,7 @@ The icon pack manifest is a JSON file with the following structure:
 			"terms": [ "ball" ]
 		},
 		"bxs-party": {
-			"glyph": "\uec92"
+			"glyph": "\uec92",
 			"terms": [ "party" ]
 		}
 	}