The default theme restricts tab coloring with "workspaceTabBackgroundColor"

[DrakeDrole]

Hello. The default TriliumNext theme does not fully color the tabs using the label workspaceTabBackgroundColor

The trilum tabs were fully colored

But Next-Dark doesn't color much except for a tiny line at the top of the tab.

This is a problem. I would like to color the tabs completely, how do I do this?

[dosubot[bot]]

Hi @DrakeDrole! I'm Dosu and I’m helping the Trilium team.

The Next-Dark theme only colors a thin line at the top of each tab with workspaceTabBackgroundColor because the CSS applies this color to a 3px-high border, not the full tab background. This is an intentional design choice, but you can override it with custom CSS.

To fully color the tabs, add a CSS note in Trilium with the following code and label it with #appCss:

/* Fully color workspace tabs using workspaceTabBackgroundColor */
.note-tab .note-tab-wrapper {
  background-color: var(--workspace-tab-background-color) !important;
}
/* Remove the colored top line */
.note-tab .note-tab-wrapper::after {
  display: none !important;
}

Create a new note, set its type to CSS, paste the code above, add the #appCss label, and refresh the page. This will make the entire tab background use your chosen color. Note: tab text color cannot be changed, so use lighter background colors for readability.
Reference

To reply, just mention @dosu.

---

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

[DrakeDrole]

I'm having another problem. The tab text becomes almost invisible with the entire tab coloring. Because the tab text is always gray.

I would like the text in the tabs to always be white, and become bold when the tab is selected like here:

How to do it?

[DrakeDrole]

I managed to make the text more visible with the color property below.

/* Fully color workspace tabs using workspaceTabBackgroundColor */
.note-tab .note-tab-wrapper {
  background-color: var(--workspace-tab-background-color) !important;
  color: #a8a8ad !important;
}
/* Remove the colored top line */
.note-tab .note-tab-wrapper::after {
  display: none !important;
}

By default the text of the selected tab is automatically colored in white with Next-Dark, but when I use the Color property to make the text a little more visible (in gray), the theme no longer colors the text of the tab in white, which makes it difficult to spot the active tab among all the other tabs.

So far, they're all the same. I'd like the selected tab to make the text bold or just white. How can I fix this?

[dosubot[bot]]

You can set all tab text to gray and make the selected tab's text white and bold using this CSS in your #appCss note:

/* Set all tab text to gray */
.tab-row-widget .note-tab .note-tab-title {
  color: #a8a8ad !important;
  font-weight: normal !important;
}

/* Make the selected tab's text white and bold */
.tab-row-widget .note-tab[active] .note-tab-title {
  color: #fff !important;
  font-weight: bold !important;
}

This will keep inactive tabs readable and make the active tab stand out. If you don't see the change, try refreshing the page or clearing your browser cache. Note that future theme updates might require you to adjust these selectors if the theme structure changes.

Direct tab text color customization isn't supported by default in Trilium, so this CSS override is the best workaround for now (reference).

To reply, just mention @dosu.

---

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

[eliandoran]

This is purely a personal preference, so we're going to have it set as default. The reasons why we don't want the full tab to be colored are exactly the ones you have encountered, such as a bad contrast between the background and the foreground colors.

Since you can adjust this behavior via #appCss, that should be an acceptable solution.