gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-06 13:54:27 +01:00
Code Issues Actions 15 Packages Projects Releases Wiki Activity

Adjust theme development docu

Browse Source
This commit is contained in:
hulmgulm 2026-02-04 20:39:58 +01:00
parent 9a2b7fbda1
commit f90cc9aff7
5 changed files with 45 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme.html generated vendored
View File

@ -7,38 +7,39 @@
<img src="Creating a custom theme_5_.png">
</p>
<h2>Step 2. Create the theme</h2>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="Creating a custom theme_3_.png">
</td>
<td>Themes are code notes with a special attribute. Start by creating a new
code note.</td>
</tr>
<tr>
<td>
<img src="Creating a custom theme_1_.png">
</td>
<td>Then change the note type to a CSS code.</td>
</tr>
<tr>
<td>
<img src="Creating a custom theme_Cr.png">
</td>
<td>In the <em>Owned Attributes</em> section define the <code spellcheck="false">#appTheme</code> attribute
to point to any desired name. This is the name that will show up in the
appearance section in settings.</td>
</tr>
</tbody>
</table>
<figure class="table">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="Creating a custom theme_3_.png">
</td>
<td>Themes are code notes with a special attribute. Start by creating a new
code note.</td>
</tr>
<tr>
<td>
<img src="Creating a custom theme_1_.png">
</td>
<td>Then change the note type to a CSS code.</td>
</tr>
<tr>
<td>
<img src="Creating a custom theme_Cr.png">
</td>
<td>In the <em>Owned Attributes</em> section define the <code spellcheck="false">#appTheme</code> attribute
to point to any desired name. This is the name that will show up in the
appearance section in settings.</td>
</tr>
</tbody>
</table>
</figure>
<h2>Step 3. Define the theme's CSS</h2>
<p>As a very simple example we will change the background color of the launcher
pane to a shade of blue.</p>
@ -60,7 +61,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>

4
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Creating an icon pack.html generated vendored
View File

@ -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,7 +74,7 @@
"bx-ball": {
"glyph": "\ue9c2",
"terms": [ "ball" ]
},
},
"bxs-party": {
"glyph": "\uec92"
"terms": [ "party" ]

7
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Customize the Next theme.html generated vendored
View File

@ -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>

4
docs/User Guide/User Guide/Theme development/Creating an icon pack.md vendored
View File

@ -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,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" ]

6
docs/User Guide/User Guide/Theme development/Customize the Next theme.md vendored
View File

@ -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;
}
```