Custom Table of Contents (TOC) Headers

[BiigBeaker]

I'm not much of a coder so forgive me if this is stupid but lately I've been creating a lot of documentation and I wanted to color code the headers and associated table of contents. I have no issue color coding the headers inside of the note using a .css but these changes don't seem to reflect the associated sections inside of the table of contents.

I've attempted making a separate .css for the table of contents but I'm not getting anywhere. I've made many iterations to the code but I just can't get it to work correctly. I'll have the current code listed below called 'custom-toc'

Problem:

I am able to change header formatting with custom css in the notes itself but these changes do not also apply to the table of contents. The current custom css that I am using is shown below.

custom-header.css

/* Header styles for note content */ .custom-headers h2 { color: #4ce699 !important; font-weight: bold; } .custom-headers h3 { color: #e6994c !important; font-weight: bold; } .custom-headers h4 { color: #4c99e6 !important; font-weight: bold; } .custom-headers h5 { color: #e64c4c !important; font-weight: bold; }

The parent folder that contains the notes that I am attempting to modify has the following attribute: #cssClass(inheritable)=custom-headers

custom-toc.css

/* TOC styles for corresponding header levels */ .toc-widget .toc > ol > li > span { color: #4ce699 !important; font-weight: bold; } .toc-widget .toc > ol > li > ol > li > span { color: #e6994c !important; font-weight: bold; } .toc-widget .toc > ol > li > ol > li > ol > li > span { color: #4c99e6 !important; font-weight: bold; } .toc-widget .toc > ol > li > ol > li > ol > li > ol > li > span { color: #e64c4c !important; font-weight: bold; }

As for the attribute section for the parent folder, I've attempted multiple different values for attribute labels with the name of cssClass. Values I have tried are toc-widget, toc, and even toc-widget-toc. Nothing seems to work

My Goal:

I want to change header colors based on header type. For example, all h2 headers should be green, h3 headers orange, h4 headers blue. The document also contains a table of content (toc). Lets say the h2 named "Required Role Permissions" is orange, I would like the associated header in the toc also named "Required Role Permissions" to share them same color.

[dosubot[bot]]

Your CSS selectors for the TOC are correct for targeting header levels by their nesting depth, since TriliumNext's TOC uses a nested list structure without header-level classes. If your styles aren't showing up, it's likely due to CSS specificity or conflicts with the default theme.

Try increasing selector specificity, for example:

.toc-widget .toc > ol > li > span {
  color: #4ce699 !important;
  font-weight: bold;
}
.toc-widget .toc > ol > li > ol > li > span {
  color: #e6994c !important;
  font-weight: bold;
}
.toc-widget .toc > ol > li > ol > li > ol > li > span {
  color: #4c99e6 !important;
  font-weight: bold;
}
.toc-widget .toc > ol > li > ol > li > ol > li > ol > li > span {
  color: #e64c4c !important;
  font-weight: bold;
}

If that still doesn't work, inspect the TOC in your browser's developer tools to check for unexpected classes or style overrides. You may also want to use the #shareOmitDefaultCSS tag to prevent default styles from interfering with your custom CSS, as CSS conflicts between custom and default themes are a known issue in TriliumNext Notes (discussion).

There is currently no way to automatically match header colors between the note and the TOC by class or text—matching by nesting depth is the only option unless the code is changed to add more semantic classes. If Trilium's structure changes in the future, you may need to update your selectors accordingly.

Let me know if you need help with inspecting the TOC or further troubleshooting!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[dosubot[bot]]

The reason your custom TOC CSS isn't working is because the TriliumNext Notes table of contents doesn't use tags for the header text. Instead, each TOC entry is a

containing a

for the visible text, and the TOC is built from nested

lists to represent header levels. There are no special classes for header depth, so you need to use CSS selectors that target the nesting level of the lists.

Here's how you can color-code the TOC entries by header level (h2, h3, h4, h5):

/* TOC styles for corresponding header levels */
.toc-widget .toc > ol > li > .item-content {
  color: #4ce699 !important; /* h2 */
  font-weight: bold;
}
.toc-widget .toc > ol > li > ol > li > .item-content {
  color: #e6994c !important; /* h3 */
  font-weight: bold;
}
.toc-widget .toc > ol > li > ol > li > ol > li > .item-content {
  color: #4c99e6 !important; /* h4 */
  font-weight: bold;
}
.toc-widget .toc > ol > li > ol > li > ol > li > ol > li > .item-content {
  color: #e64c4c !important; /* h5 */
  font-weight: bold;
}

Make sure your custom CSS is loaded by TriliumNext Notes (for example, by using the #cssClass attribute or the global custom CSS feature). You do not need to set the cssClass to "toc-widget" or similar; just ensure your CSS targets the correct selectors as above.

This approach matches the TOC structure as implemented in TriliumNext Notes, where each header level is represented by deeper nesting of <ol> and <li> elements, and the header text is always inside a .item-content div. You can adjust the colors as needed to match your header styles.
Reference: TOC structure and classes

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[SiriusXT]

The CSS in this theme might be what you're looking for:
https://github.com/SiriusXT/trilium-theme-blue/blob/main/blue-theme.css#L192

Lines 192–244 define the styles for headings and the table of contents (TOC), which you can modify according to your needs.

Here's a preview:

[BiigBeaker]

It's been a very busy week but I should be able to tackle this tomorrow. Thank you for the insight, I will report back when I can!